read : srcset 관련 : 기술 #img #srcset::공대여자홈

srcset 관련

작성자 공대여자

작성 : 2026-04-23 09:07 조회 : 41
지남 1일간

2026-04-23 - 2026-04-23

좌표
첨부된 파일이 없습니다.

#img #srcset

스펙

https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-srcset

mdn

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#srcset

----------=--------------

샘플

from: 이케아 홈페이지에서

<img alt="강동점 베스트 어워즈"

src="https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=s"

srcset="https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=sg 1600w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxxl 1400w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxl 1100w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xl 900w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=l 750w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=m 700w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=s 600w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xs 500w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxs 400w,

https://www.ikea.com/images/-b8287ca620a9c84a5247b73cc586955c.jpg?f=xxxs 300w"

sizes="(min-width: 56.25em) 78vw, 100vw" loading="lazy">

srcset 설명

1600w : 이 이미지는 너비가 1600px 기준이라는 표시. 브라우저는 sizes 를 참고하여 알맞는 너비의 이미지인지 판단 때 사용함.

sizes="(min-width: 56.25em) 78vw, 100vw"

=> 화면 너비가 56.25em 이하일 때 이미지는 화면 너비의 78% 가정, 미만이면 100% 가진다고 가정

=> 작은 화면인 경우 이미지는 화면의 100% 너비로 보이게, 큰 화면인 경우 78%의 너비로 보이게

=> 브라우저에서는 지정된 sizes 에서의 너비를 보고 1600w 등을 참고해서 보여질 이미지를 srcset 에서 선택함.

브라우저의 동작

1. 화면 너비에 따라서 sizes 의 너비 기준을 가지고 이미지를 선택해서 가져온다.

2. PC의 FHD 모니터에서 화면 너비가 1920이면 75vw로 1440px가 기준 너비가 된다. 1600w 를 선택해서 리사이즈 해서 사용한다.

3. 큰 사이즈은 이미지를 이미 가져왔을 경우, 화면이 작아져도 작은 사이즈 이미지를 안가져오고 이미 가지고있는 이미지를 리사이즈 해서 사용하는 경우가 많다.

4. 작은 사이즈의 이미지를 이미 가져왔어도 화면이 넓어지면 큰 사이즈로 가져와서 사용하는 경우가 많다.

5. 이미지 선택에 대해서는 브라우저가 자체적으로 판단하는 부분이라서 원하는 데로 정확히 동작 안할 수 있다.

6. 브라우저는 디바이스 픽셀 비율(DPR)도 계산에 포함한다.

6.1. DPR이 3이고 화면 너비가 400인 경우 너비 1200px 를 기준으로 가져오려고 할 것이다. srcset에서1400w를 가져와서 사용한다.

7. sizes 설정이 없으면 100vw를 기준으로 사용한다.

작은 이미지일 경우 sizes 설정은?

<img

width="32"

src="icon.png"

srcset="icon-32.png 32w, icon-64.png 64w" sizes="32px"

sizes에 보여질 너비를 지정함.

작은 이미지일 경우 차라리

<img

width="32"

src="icon.png"

srcset="icon.png 1x, icon@2x.png 2x"

2x, 3x 같은 배율 방식이 더 편함. DPR에 맞춰서 최선의 이미지를 선택하려고 할 것임.

참고

1. img.currentSrc로 현재 선택된 이미지의 url을 알 수 있다.

1.1. srcset의 영향으로 img.src와 값이 다를 수 있다.

2. 휴대폰이나 고급 노트북의 경우 DPR이 3이 나오는 경우가 있다. 이 경우를 대비해서 최소 2x의 아이콘은 준비하자.

3. svg의 경우 렌더링 될 때 다시 백터에서 그려지므로 srcset 처리가 필요 없다. (안에 비트맵이 있는 경우는 희리게 보일 수 있다)

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	87693
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	93363
공지	[공지] 기술 게시판	mins01	06/24 15:10	95795

일	월	화	수	목	금	토
4.26	4.27	4.28	4.29	4.30	5.1	5.2
5.3	5.4	5.5	5.6 ffmpeg 명령 샘플 new	5.7	5.8	5.9
5.10	5.11 도메인 등록 대행자 등록 수수료 및 서비스 new 1 첨부파일 다운로드 해더에서 파일명 지정 방법 new	5.12 x.com (구 트위터) - 트윗 특이사항 - 수정 내역 new	5.13	5.14	5.15	5.16
5.17	5.18	5.19	5.20	5.21	5.22	5.23
5.24	5.25	5.26	5.27	5.28	5.29	5.30
5.31	6.1	6.2	6.3	6.4	6.5	6.6