이전
목록
다음
전

WebKit (사파리)에서 srcset 구현

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-08-23 (금) 16:48:16 · 4078 · 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,827
13-10-28 조회 8,648
13-10-28 조회 3,831
13-10-28 조회 3,390
13-10-27 조회 3,013
13-10-26 조회 3,729
13-10-25 조회 3,456
13-10-24 조회 3,430
13-10-24 조회 3,166
13-10-24 조회 3,488
13-10-24 조회 4,077
13-10-23 조회 4,236
13-10-23 조회 3,493
13-10-22 조회 4,721
13-10-21 조회 3,230
13-10-20 조회 3,559
13-10-18 조회 4,469
13-10-17 조회 4,793
13-10-15 조회 4,716
13-10-11 조회 4,593
13-10-10 조회 5,198
13-10-10 조회 3,678
13-10-08 조회 4,206
13-10-03 조회 6,262
13-10-02 조회 4,126
13-10-02 조회 4,391
13-10-02 조회 4,161
13-10-02 조회 3,654
13-10-02 조회 3,914
13-10-02 조회 3,778
13-10-02 조회 4,148
13-09-29 조회 4,704
13-09-29 조회 4,148
13-09-29 조회 4,022
13-09-29 조회 6,615
13-09-29 조회 4,238
13-09-27 조회 3,559
13-09-27 조회 4,184
13-09-24 조회 3,257
13-09-24 조회 3,534
13-09-18 조회 3,943
13-09-17 조회 3,791
13-09-16 조회 7,993
13-09-16 조회 5,352
13-09-16 조회 4,332
13-09-15 조회 3,184
13-09-13 조회 4,871
13-09-13 조회 3,358
13-09-13 조회 3,650
13-09-12 조회 3,457
13-09-11 조회 6,220
13-09-10 조회 3,508
13-09-10 조회 6,116
13-09-10 조회 3,880
13-09-09 조회 4,261
13-09-09 조회 4,913
13-09-07 조회 5,017
13-09-07 조회 3,107
13-09-06 조회 3,225
13-09-06 조회 3,841
13-09-06 조회 3,204
13-09-05 조회 3,375
13-09-05 조회 9,532
13-09-04 조회 3,069
13-09-04 조회 3,331
13-09-04 조회 3,008
13-09-03 조회 3,106
13-09-03 조회 3,535
13-08-30 조회 3,364
13-08-30 조회 4,444
13-08-29 조회 4,400
13-08-28 조회 3,918
13-08-28 조회 8,094
13-08-27 조회 4,079
13-08-26 조회 4,288
13-08-26 조회 3,513
13-08-26 조회 4,798
13-08-23 조회 4,079
13-08-23 조회 5,806
13-08-22 조회 5,339
13-08-22 조회 4,547
13-08-22 조회 5,049
13-08-22 조회 4,645
13-08-22 조회 4,559
13-08-22 조회 3,565
13-08-20 조회 3,802
13-08-18 조회 8,508
13-08-18 조회 5,351
13-08-17 조회 5,949
13-08-17 조회 4,808
13-08-17 조회 4,299
13-08-14 조회 3,344
13-08-12 조회 4,354
13-08-11 조회 3,531
13-08-09 조회 4,028
13-08-08 조회 5,261
13-08-08 조회 5,002
13-08-08 조회 4,391
13-08-08 조회 9,299
13-08-08 조회 5,504
글쓰기