srcset URL은 어떻게 이름이 지정되나요?

각 너비는 파일 확장자 앞에 - w 접미사를 붙입니다. 예: photo-640w.jpg.

sizes 속성은 무엇을 위한 것인가요?

이미지가 차지하는 공간을 브라우저에 알려주어 적절한 소스를 선택할 수 있게 합니다.

Srcset 생성기

srcset과 sizes를 갖춘 반응형 img 태그를 만드세요.

기본 이미지 URL너비 (px)sizes 속성대체 텍스트

출력

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

기본 이미지 URL과 대상 너비를 입력하면 srcset과 sizes 속성을 갖춘 반응형 <img> 태그를 생성할 수 있습니다.

사용 방법

기본 이미지 URL을 입력하세요.
원하는 너비를 쉼표로 구분해 나열하세요.
생성된 반응형 img 태그를 복사하세요.

자주 묻는 질문

srcset URL은 어떻게 이름이 지정되나요?: 각 너비는 파일 확장자 앞에 -<width>w 접미사를 붙입니다. 예: photo-640w.jpg.
sizes 속성은 무엇을 위한 것인가요?: 이미지가 차지하는 공간을 브라우저에 알려주어 적절한 소스를 선택할 수 있게 합니다.

사용 방법

자주 묻는 질문

관련 도구