WebKit (사파리)에서 srcset 구현

전진

· 12년 전 · 조회 1360 1360 · 댓글 1 1

링크

http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ (229) https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/ (73)

반응형 이미지 표준으로 제안된 안 중 하나인, 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개

은빛달그림자

프로필 보기 이 회원 글보기 이 회원의 댓글보기

12년 전

좋은 정보 감사합니다.^^

게시글 목록

번호	제목	글쓴이	조회	날짜
19528	JavaScript 그누보드4 에 Daum 우편번호 찾기 API 연동 하기.	위토즈	1,401	11년 전
6810	php 스쿨에서 활동 안하는 이유. 7	Terrorboy	3,235	11년 전
6807	프로그래머가 되고 나서 처음으로 달력을 짜보았습니다. 2	Terrorboy	1,131	11년 전
6801	자바 스크립트 왜 이렇게 어렵죠???? 5	이시태	997	11년 전
6798	형님들 모바일 브라우저 구분방법 알고싶습니다. 2	궈뉘궈뉘	2,075	11년 전
6791	회사를 퇴사하고 싶습니다.... 6	어려워요잉	2,731	11년 전
24615	네이버 웹문서개편으로 인해 피해보신분들 계신가요?? 1	우왕왕와	2,094	11년 전
24612	SW개발 표준산출물 관리 가이드를 아시나요? 2	쭌111	3,126	11년 전
6788	관공서파견시 신원조회에 관해 질문 좀 드립니다 2	Shhhh	1,514	11년 전
30933	기타 호환성모드 오류(?)처리 (X-UA-Compatible) 5	LaRuota	3,267	11년 전
6784	홈페이지 들어갈때마다 트로이목마? 그런게 자꾸 떠요.. 3	숲을지나	782	11년 전
6783	페이스북으로 연예인등 특정인의 담벼락을 불러오는게 가능할까요?	막돼먹은영애	1,079	11년 전
27834	보통 웹 퍼블리셔 분들은 프로그램 어디까지 다루시나요? 4	이시태	1,953	11년 전
19527	기타 이벤트 핸들러관련 자바 문법들 정리 (안드로이드)	장영록	2,309	11년 전
19526	기타 아마존 서버 이용시 지역별 ping 조사	장영록	1,016	11년 전
19524	MySQL MYSQL 기본 명령어들 모음 1	장영록	2,824	11년 전
19521	기타 소스코드를 자동으로 정렬해주는... 2	감기약	3,026	11년 전
6777	안녕하세요, embed태그로 영상을 하나 넣었는데... 5	도룡이	1,515	11년 전
6770	주석 다는법을 배워야겠습니다. 6	Terrorboy	2,188	11년 전
19519	웹서버 FTP 프로세스 죽이기 1	시청남	1,046	11년 전
27823	크로스 부라우징 테스트 어디까지 테스트 하세요? ^^; 10	갱쿤	1,395	11년 전
6766	익스를 제외한 브라우져에서... 3	Terrorboy	1,064	11년 전
24604	중국에서 사용할 홈페이지 만들어보신분 계신가요^^ 7	야상곡	2,259	11년 전
6760	모바일 홈페이지 코딩하는 방법은 많이 다른가요? 5	도룡이	2,175	11년 전
6757	어플과 php 통신 2	Terrorboy	1,164	11년 전
30925	기타 jQuery로 동작하는 페이지 로딩바 7	우산11	5,298	11년 전
19518	jQuery 레이아웃 float 사용시 좌우 레이어 높이값 같게하기	뽁스	2,346	11년 전
30924	CSS CSS slider 테스트1	쥬노	3,059	11년 전
30923	CSS 수평메뉴1	쥬노	1,907	11년 전
6746	개발자 스페이스 vs 탭 10	뽁스	945	11년 전
19516	node.js Node.js 서버의 기본적인 내용 정리 1	장영록	2,028	11년 전
30922	기타 dpi 환산표(?)	LaRuota	2,156	11년 전
19515	기타 ocx 호환(win7 32bit 64bit)	조조부활	1,876	11년 전
30921	기타 px to em 또는 em to px	네이비칼라	1,486	11년 전
6732	개발자 미수금은 적립금인가요.. 13	위토즈	943	11년 전
27803	퍼블리셔 작업 하면서 스트레스 받는 버블리싱~ 19	Terrorboy	1,844	11년 전
19508	PHP 숫자를 한글로 변환 2	찜닭	2,565	11년 전
19507	PHP 웹프로그램 하나 만들어주세요. 렌터카용입니다.	kimsdesign	1,291	11년 전
24599	기획자 그누보드는 엄청난 시간 동안 준비되었군요. 4	Terrorboy	2,769	11년 전
19504	PHP 썸네일 클래스입니다 2	바트형아	1,716	11년 전
19501	PHP [php] 파일업로드 확장자 체크하기 2	파아랑	4,470	11년 전
19498	MySQL 자주쓰는 MYSQL 2	파아랑	1,847	11년 전
19497	기타 즐겨찾기 추가 IE/FireFox 적용	네이비컬러	2,501	11년 전
19496	PHP 두지점의 위도,경도간 거리계산	파아랑	3,714	11년 전
19495	MySQL 트리거를 이용 시 이전 insert 쿼리 primary key값 가지고 오기	잘살아보자	1,588	11년 전
19493	MySQL 무한 로딩 중인 쿼리 죽이기 1	잘살아보자	2,461	11년 전
19492	기타 파폭 ssh, ftp	민기만	814	11년 전
19491	MySQL mysql 기본 사용법	천재조상훈	1,846	11년 전
19490	기타 무료 db 클라이언트 툴	천재조상훈	4,477	11년 전
19489	웹서버 .htaccess를 이용한 리다이렉션에 대해 알아볼게요.	천재조상훈	1,600	11년 전
6721	개발자 암울한 웹의 미래 10	HackYa	1,862	11년 전
6720	개발자 혁신적이거나 싸지거나	iwebstory	742	11년 전
19488	jQuery 제이쿼리를 이용하여 노드 선택	잘살아보자	1,129	11년 전
19487	jQuery append를 이용하여 엘리먼트 추가하기	잘살아보자	1,458	11년 전
19486	jQuery 알아두면 좋은 insertBefore와 insertAfter	잘살아보자	1,564	11년 전
19485	JavaScript 000000.1원팁 ^^ 자스로 아이프레임 target 제어	천재조상훈	1,472	11년 전
30919	CSS 서버에 등록되어 있는 폰트 사용하기 1	잘살아보자	2,227	11년 전
19484	MySQL 이미 생성되어 있는 테이블에 create 스크립트를 알고 싶을 경우	잘살아보자	1,151	11년 전
30913	CSS [1원짜리팁] div나 span 등 에서 수직 정렬 두번째이야기 5	잘살아보자	3,062	11년 전
30910	CSS [1원짜리팁] div 나 span 등에 tag에서 수직 정렬하기 2	잘살아보자	3,269	11년 전
19483	JavaScript 레이어를 이용한 셀렉트 박스	잘살아보자	1,827	11년 전
19482	JavaScript 유투브 동영상 노출 시 자동 실행 또는 자동 종료 소스입니다.	잘살아보자	4,746	11년 전
19478	jQuery 페이스북 글 가져오기 쉬운방법. 3	위토즈	9,887	11년 전
30908	CSS 에디터(cheditor) 외부의 css 적용 1	매직크레용	2,624	11년 전
19477	기타 에디터(cheditor)에 사용자 css 적용하기	매직크레용	1,107	11년 전
31683	표준화 9강 최신글(skin/latest) 스킨 7	지운아빠	3,250	11년 전
19475	기타 크롬에서 새새션 열기[익스 포함] 1	파아랑	2,571	11년 전
19473	jQuery HTML5가 지원이 되지 않는 브라우져에서 form입력필드의 placeholder사용하기 1	써맨	2,099	11년 전
19471	JavaScript 초보입니다. 이미지 롤링이 xp에서만 보이는데 문제가 뭘까요. 소스좀 봐주세요. 1	star3840	1,009	11년 전
19470	PHP 그누보드5 관리자 메뉴추가 방법	파아랑	4,236	11년 전
19469	기타 간편] 시간 따라 인덱스 화면을 다르게	iwebstory	700	11년 전
19468	JavaScript 아이폰5s 소개페이지같은 사이트 만들기(?)	디귿	1,229	11년 전
19467	PHP 달력 출력하기	devdev	1,660	11년 전
19466	PHP 네이버 아이디로 로그인(메타로그인)	파아랑	1,883	11년 전
19464	JavaScript [1원짜리팁]새창 띄우기 소스 1	잘살아보자	1,849	11년 전
19462	기타 크롬 모바일 모드로 인터넷 사용하기 1	파아랑	4,617	11년 전
19461	MySQL MYSQL 최초 디비생성시 라틴으로 세팅되는 버그	파아랑	1,612	11년 전
19460	JavaScript 아이프로그램 닫기	잘살아보자	852	11년 전
19459	JavaScript 자바스크립트 공백 제거	잘살아보자	2,032	11년 전
31680	CSS CSS과정 - 20.Align 2	신리	1,599	11년 전
19458	MySQL 부동산 DB 설계 EXERD 처음으로 했는데 잘했는지 모르겟네요 ㅎㅎ	앱원	2,599	11년 전
19457	웹서버 네임서버 zone 파일 인쿠르드	잘살아보자	877	11년 전
31676	CSS CSS과정 - 19.Floating 3	신리	1,547	11년 전
31674	CSS CSS과정 - 18.Positioning 1	신리	1,456	11년 전
31671	CSS CSS과정 - 17.Display 2	신리	1,592	11년 전
31670	CSS CSS과정 - 16.Dimension	신리	1,223	11년 전
31669	CSS CSS과정 - 15.Padding	신리	1,179	11년 전
31664	CSS CSS과정 - 14.Margin 4	신리	1,222	11년 전
31663	CSS CSS과정 - 13.Outline	신리	1,561	11년 전
31662	CSS CSS과정 - 12.Border	신리	1,651	11년 전
31658	CSS CSS과정 - 11.Box Model 3	신리	1,743	11년 전
31657	CSS CSS과정 - 10.Tables	신리	1,656	11년 전
19456	PHP GPS정보 모바일에서 사용하기	파아랑	1,934	11년 전
19455	PHP SNMP(Simple Network Monitoring Protocol)과 MRTG 관련정보	파아랑	1,142	11년 전
31655	CSS CSS과정 - 9. Lists 1	신리	1,344	11년 전
31653	CSS CSS과정 - 8. Links 1	신리	1,294	11년 전
31649	CSS CSS과정 - 7. Fonts 3	신리	1,461	11년 전
31646	CSS CSS과정 - 6. Text 2	신리	1,966	11년 전
27800	퍼블리셔와 디자이너의 차이? 2	코코기	1,526	11년 전
19454	JavaScript 메뉴 네비 레이어 서서히 없어지는거	마뇽	1,527	11년 전

이전 다음

11 12 13 14 15

전체 목록