이전
목록
다음
전

WebKit (사파리)에서 srcset 구현

전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2013-08-23 (금) 16:48:16 · 4038 · 1

링크

http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ (259) https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/ (104)
반응형 이미지 표준으로 제안된 안 중 하나인, 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,724
13-10-28 조회 8,607
13-10-28 조회 3,776
13-10-28 조회 3,372
13-10-27 조회 2,992
13-10-26 조회 3,675
13-10-25 조회 3,446
13-10-24 조회 3,419
13-10-24 조회 3,155
13-10-24 조회 3,474
13-10-24 조회 4,060
13-10-23 조회 4,212
13-10-23 조회 3,375
13-10-22 조회 4,524
13-10-21 조회 3,192
13-10-20 조회 3,517
13-10-18 조회 4,417
13-10-17 조회 4,573
13-10-15 조회 4,664
13-10-11 조회 4,549
13-10-10 조회 5,141
13-10-10 조회 3,619
13-10-08 조회 4,145
13-10-03 조회 6,216
13-10-02 조회 4,087
13-10-02 조회 4,271
13-10-02 조회 4,120
13-10-02 조회 3,605
13-10-02 조회 3,873
13-10-02 조회 3,735
13-10-02 조회 4,005
13-09-29 조회 4,658
13-09-29 조회 4,094
13-09-29 조회 3,965
13-09-29 조회 6,550
13-09-29 조회 4,182
13-09-27 조회 3,520
13-09-27 조회 4,152
13-09-24 조회 3,214
13-09-24 조회 3,499
13-09-18 조회 3,910
13-09-17 조회 3,757
13-09-16 조회 7,910
13-09-16 조회 5,275
13-09-16 조회 4,300
13-09-15 조회 3,143
13-09-13 조회 4,751
13-09-13 조회 3,322
13-09-13 조회 3,610
13-09-12 조회 3,423
13-09-11 조회 6,040
13-09-10 조회 3,467
13-09-10 조회 6,090
13-09-10 조회 3,857
13-09-09 조회 4,227
13-09-09 조회 4,874
13-09-07 조회 4,996
13-09-07 조회 3,087
13-09-06 조회 3,211
13-09-06 조회 3,821
13-09-06 조회 3,178
13-09-05 조회 3,345
13-09-05 조회 9,354
13-09-04 조회 3,047
13-09-04 조회 3,308
13-09-04 조회 2,987
13-09-03 조회 3,083
13-09-03 조회 3,428
13-08-30 조회 3,337
13-08-30 조회 4,413
13-08-29 조회 4,377
13-08-28 조회 3,888
13-08-28 조회 8,065
13-08-27 조회 4,049
13-08-26 조회 4,252
13-08-26 조회 3,476
13-08-26 조회 4,758
13-08-23 조회 4,039
13-08-23 조회 5,628
13-08-22 조회 5,183
13-08-22 조회 4,508
13-08-22 조회 4,973
13-08-22 조회 4,593
13-08-22 조회 4,495
13-08-22 조회 3,519
13-08-20 조회 3,759
13-08-18 조회 8,411
13-08-18 조회 5,285
13-08-17 조회 5,890
13-08-17 조회 4,602
13-08-17 조회 4,139
13-08-14 조회 3,301
13-08-12 조회 4,319
13-08-11 조회 3,495
13-08-09 조회 4,009
13-08-08 조회 5,232
13-08-08 조회 4,957
13-08-08 조회 4,341
13-08-08 조회 9,257
13-08-08 조회 5,341
글쓰기