srcset를 사용하여 적절한 이미지 크기를 자동으로 선택하세요.
HTTP Archive에 따르면 일반적인 모바일 웹페이지의 크기는 2.6MB를 넘으며, 이 중 3분의 2 이상이 가중치는 이미지입니다 이는 아주 좋은 기회가 될 것입니다.
<ph type="x-smartling-placeholder">
요약
- 표시 크기보다 큰 이미지는 저장하지 마세요.
- 각 이미지의 여러 크기를 저장하고
srcset드림 속성을 사용하여 브라우저가 가장 작은 크기를 선택할 수 있도록 합니다.w값은 각 버전의 너비를 브라우저에 알려줍니다.
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
적절한 크기로 이미지 저장
다음과 같은 이미지를 사용하면 웹사이트의 속도를 높이고 데이터 소모를 줄일 수 있습니다. 디스플레이 크기와 일치하는 크기입니다. 즉, 이미지에 적절한 변경할 수 있습니다.
아래 이미지를 살펴보세요.
둘은 거의 동일하게 보이지만 파일 크기는 10배가 넘습니다. 크게 좌우됩니다.
첫 번째 이미지는 여러 크기로 저장되었기 때문에 파일 크기가 훨씬 큽니다. 디스플레이 크기보다 훨씬 큽니다. 두 이미지 모두 고정된 크기가 300픽셀이므로 동일한 너비에 저장된 이미지를 있습니다.
고정 너비의 경우 디스플레이 크기입니다
디스플레이 크기가 다양한 경우에는 어떻게 해야 할까요?
다양한 기기가 사용되는 환경에서 이미지가 항상 고정된 단일 크기로 표시되는 것은 아닙니다.
이미지 요소에는 백분율 너비가 있거나 반응형 레이아웃의 일부가 될 수 있습니다. 여기서 이미지 디스플레이 크기가 화면 크기에 맞게 변경됩니다.
...Retina 디스플레이와 같이 픽셀이 부족한 기기는 어떨까요?
브라우저에서 올바른 이미지 크기를 선택하도록 돕기
각 이미지를 다양한 크기로 제공하고 브라우저에서 기기 및 디스플레이 크기에 가장 적합한 크기를 선택하도록 할까요? 안타깝게도 catch-22는 가장 적합한 이미지를 찾는 것입니다. 브라우저는 최대한 작은 크기의 이미지를 다운로드해 두지 않으면 너비를 알 수 없습니다.
이러한 경우, srcset가 유용합니다. 다양한 크기로 이미지를 저장한 다음
각 버전의 너비를 브라우저에 알립니다.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 값은 각 이미지의 너비를 픽셀 단위로 표시합니다. 예를 들어
small.jpg 500w는 브라우저에 small.jpg가 500임을 알립니다.
지정할 수 있습니다. 이렇게 하면 브라우저가
가능한 가장 작은 이미지를
표시 영역 크기에 따라 다른 표시 영역을 찾을 수 있습니다.
이미지를 다운로드하여 크기를 확인합니다.
아래 이미지에서 srcset가 작동하는 것을 확인할 수 있습니다. 노트북이나
브라우저 창 크기를 변경하고 이 페이지를 다시 여세요.
그런 다음 브라우저 도구의 네트워크 패널을 사용하여 어떤 이미지가 사용되었는지 확인합니다.
(시크릿 모드나 비공개 창에서 이 작업을 해야 하며, 그렇지 않은 경우
캐시됩니다.)
여러 가지 크기의 이미지를 만들려면 어떻게 해야 하나요?
사용하려는 이미지마다 여러 크기를 제공해야 함
srcset를 사용합니다.
히어로 이미지와 같은 일회성 이미지의 경우 다양한 크기를 수동으로 저장할 수 있습니다. 만약 제품 사진과 같은 이미지가 많다면 자동화해야 합니다 여기에는 두 가지 방법이 있습니다.
빌드 프로세스에 이미지 처리 통합
빌드 과정에서 단계를 추가하여 다양한 크기의 Google Cloud 콘솔의 시각적 도구입니다 'Imagemin을 사용하여 이미지 압축'을 참조하세요. 를 참조하세요.
이미지 서비스 사용
다음과 같은 상업 서비스를 사용하여 이미지 생성 및 전송을 자동화할 수 있습니다. Cloudinary 또는 다음과 같이 이에 상응하는 오픈소스 개발자가 직접 설치하고 실행하는 Thumbor.
고해상도 이미지를 업로드하면 이미지 서비스가 자동으로
URL에 따라 다양한 이미지 형식과 크기를 만들고 게재
매개변수입니다. 예를 들어 Cloudinary의 샘플 이미지를 열고 w 값 또는 URL 표시줄의 파일 확장자를 변경해 보세요.
또한 이미지 서비스에는 "스마트 자르기" WebP 이미지를 자동으로 게재합니다. 이 형식을 지원하는 브라우저로 변환해야 하며, 이때 파일을 변경하지 않아도 됩니다. 확장자가 포함됩니다.
이미지가 여러 크기에서 제대로 보이지 않으면 어떻게 해야 할까요?
이 경우 '아트 디렉션'에 <picture> 요소를 사용해야 합니다.
여러 가지 크기로 다른 이미지 또는 이미지 자르기를 제공합니다. 자세히 알아보기
'아트 디렉션' Codelab을 살펴보세요.
픽셀 밀도는 어떤가요?
고급형 기기에는 더 작은 (더 밀도 높은) 물리적 픽셀이 있습니다. 예를 들어 고급형 휴대전화의 경우 휴대전화의 각 행에 2~3배 더 많은 픽셀이 더 저렴한 기기입니다.
이에 따라 이미지를 저장하는 데 필요한 크기가 달라질 수 있습니다. 우리는 잔혹한 이야기에 여기에서 자세한 내용을 확인할 수 있으며 '밀도 설명자 사용' Codelab
이미지의 표시 크기는 어떻게 되나요?
sizes을(를) 사용하여 srcset을(를) 더 효과적으로 활용할 수 있습니다.
이 속성이 없으면 브라우저에서
srcset에서 가져온 이미지 sizes 속성은
이미지 요소가 표시되어 브라우저가
이미지 파일을 만듭니다.
아래 예에서 sizes="50vw"는 이 이미지가
50% 의 너비로 표시됩니다.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
다음에서 예를 확인할 수 있습니다. simpl.info/sizes 및 '여러 슬롯 너비 지정' Codelab
브라우저 지원은 어떻게 되나요?
srcset 및 sizes는 Google의 90% 이상에서 지원됩니다.
전 세계에서 이용 가능한 브라우저입니다.
브라우저가 srcset 또는 sizes를 지원하지 않으면 src 속성만 사용하도록 대체됩니다.
이를 통해 srcset 및 sizes가 점진적으로 개선됩니다.
자세히 알아보기
'이미지 최적화' 섹션을 살펴봅니다. 를 참조하세요. 자세한 단계별 안내는 사용해 보시려면 무료 '반응형' '이미지' 과정 제공 Udacity.