이전
목록
다음
전

WebKit (사파리)에서 srcset 구현

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-08-23 (금) 16:48:16 · 4113 · 1

링크

http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ (261) https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/ (107)
반응형 이미지 표준으로 제안된 안 중 하나인, srcset이 WebKit에서 구현되었다는 소식입니다.
(참고로 크롬은 버전27까지 WebKit이었고, 지금은 Blink 기반입니다.  고로 이번 구현은 사파리에만 적용됩니다. ^^;)

<img src="low-res.jpg" srcset="high-res.jpg 2x">

위와 같이 사용할 수 있으며, 
위의 경우 2x 디스플레이의 경우 hight-res.jpg가 대신 보여지게 되고,
low-res.jpg는, 보통 해상도 이거나 srcset이 작동하지 않는 브라우져에서 보여집니다.

원래 제안된 srcset 문법은, (아래처럼) 가로폭 등에 대응할 수 있으나 현재는 1x, 2x 등 해상도 부분만 구현되었다고 합니다.

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">


다른 표준인 picture에 비하면, 문법이 조금은 편법같아 보이긴 하죠? ^^;

<picture>
    <source src="med.jpg" media="(min-width: 40em)" />
    <source src="sm.jpg" />
    <img src="fallback.jpg" alt="" />
<picture>

게다가 picture 표준은, srcset도 포함하고 있고요..

<picture>
    <source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" />
    <source srcset="sm.jpg 1x, sm-hd.jpg 2x" />
    <img src="fallback.jpg" alt="" />
<picture>

자세한 내용은 링크들 (영문 글) 을 참조하시길..

뒷이야기>
picture를 제안한 사람 (첫번째 링크 글 작성자)이, 대기업이 아니라는 이유때문에? w3c 로부터
'커뮤니티그룹이나 만들어' 라는 퇴짜를 맞고 ( http://timkadlec.com/2012/05/wtfwg/ )
곧바로 저 이상한 표준을 애플로부터 받았을때는 곧바로 표준을 받아줬다는... 
근데, 첫번째 글 작성자는, '그래도 어떻게든 반응형 이미지 구현이 되었으니 좋은일 (good thing) 이다' 리고 쿨하게 받아줬네요. ^^
#퍼블리셔톡 #퍼블리셔
|

댓글 1개

은빛달그림자
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-10-04 (금) 10:26:20
좋은 정보 감사합니다.^^
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-10-29 조회 7,859
13-10-28 조회 8,686
13-10-28 조회 3,865
13-10-28 조회 3,414
13-10-27 조회 3,038
13-10-26 조회 3,754
13-10-25 조회 3,490
13-10-24 조회 3,456
13-10-24 조회 3,190
13-10-24 조회 3,511
13-10-24 조회 4,107
13-10-23 조회 4,270
13-10-23 조회 3,524
13-10-22 조회 4,757
13-10-21 조회 3,265
13-10-20 조회 3,588
13-10-18 조회 4,508
13-10-17 조회 4,838
13-10-15 조회 4,757
13-10-11 조회 4,626
13-10-10 조회 5,232
13-10-10 조회 3,708
13-10-08 조회 4,238
13-10-03 조회 6,311
13-10-02 조회 4,174
13-10-02 조회 4,448
13-10-02 조회 4,220
13-10-02 조회 3,699
13-10-02 조회 3,962
13-10-02 조회 3,818
13-10-02 조회 4,185
13-09-29 조회 4,754
13-09-29 조회 4,195
13-09-29 조회 4,066
13-09-29 조회 6,653
13-09-29 조회 4,281
13-09-27 조회 3,592
13-09-27 조회 4,225
13-09-24 조회 3,282
13-09-24 조회 3,562
13-09-18 조회 3,977
13-09-17 조회 3,841
13-09-16 조회 8,035
13-09-16 조회 5,400
13-09-16 조회 4,361
13-09-15 조회 3,218
13-09-13 조회 4,907
13-09-13 조회 3,389
13-09-13 조회 3,681
13-09-12 조회 3,490
13-09-11 조회 6,281
13-09-10 조회 3,544
13-09-10 조회 6,145
13-09-10 조회 3,910
13-09-09 조회 4,298
13-09-09 조회 4,941
13-09-07 조회 5,041
13-09-07 조회 3,137
13-09-06 조회 3,249
13-09-06 조회 3,874
13-09-06 조회 3,231
13-09-05 조회 3,402
13-09-05 조회 9,565
13-09-04 조회 3,093
13-09-04 조회 3,350
13-09-04 조회 3,038
13-09-03 조회 3,137
13-09-03 조회 3,560
13-08-30 조회 3,392
13-08-30 조회 4,477
13-08-29 조회 4,425
13-08-28 조회 3,934
13-08-28 조회 8,118
13-08-27 조회 4,101
13-08-26 조회 4,310
13-08-26 조회 3,543
13-08-26 조회 4,825
13-08-23 조회 4,114
13-08-23 조회 5,859
13-08-22 조회 5,388
13-08-22 조회 4,589
13-08-22 조회 5,109
13-08-22 조회 4,685
13-08-22 조회 4,598
13-08-22 조회 3,593
13-08-20 조회 3,837
13-08-18 조회 8,548
13-08-18 조회 5,435
13-08-17 조회 6,039
13-08-17 조회 4,862
13-08-17 조회 4,351
13-08-14 조회 3,384
13-08-12 조회 4,396
13-08-11 조회 3,566
13-08-09 조회 4,078
13-08-08 조회 5,301
13-08-08 조회 5,035
13-08-08 조회 4,428
13-08-08 조회 9,331
13-08-08 조회 5,547
글쓰기