반응형 이미지
반응형 이미지 Srcset 생성기
원본 이미지의 실제 너비와 페이지에서 표시될 너비를 입력하세요. 이 브라우저에서 srcset, sizes, 복사 가능한 img 태그를 만듭니다.
준비됨100/100
이미지와 중단점
기기 너비만이 아니라 CSS 레이아웃 너비를 사용하세요. 2x 후보는 원본 너비에서 잘립니다.
값은 이 브라우저에만 남고 파일은 업로드되지 않습니다.
sizes 슬롯
기본 슬롯은 max-width를 비우세요. 작은 뷰포트를 앞에 두세요.
| max-width(px) | 슬롯 크기 | |
|---|---|---|
생성된 마크업
나열된 픽셀 너비로 파일을 내보낸 뒤 이 마크업을 붙이세요.
너비 목록
각 행은 내보내야 할 파일입니다. 너비는 원본을 넘지 않습니다.
| 너비 | 파일 | 설명자 |
|---|---|---|
| 320 | /images/hero-320.webp | 320w |
| 480 | /images/hero-480.webp | 480w |
| 640 | /images/hero-640.webp | 640w |
| 768 | /images/hero-768.webp | 768w |
| 960 | /images/hero-960.webp | 960w |
| 1024 | /images/hero-1024.webp | 1024w |
| 1280 | /images/hero-1280.webp | 1280w |
| 1536 | /images/hero-1536.webp | 1536w |
| 2048 | /images/hero-2048.webp | 2048w |
| 2560 | /images/hero-2560.webp | 2560w |