srcset를 사용하여 적절한 이미지 크기를 자동으로 선택합니다.
HTTP Archive에 따르면 일반적인 모바일 웹페이지의 무게는 2.6MB가 넘으며, 이 가중치의 3분의 2 이상이 이미지입니다. 이는 최적화를 위한 훌륭한 기회입니다.
요약
- 디스플레이 크기보다 큰 이미지를 저장하지 마세요.
- 각 이미지의 여러 크기를 저장하고
srcset속성을 사용하여 브라우저에서 가장 작은 이미지를 선택하도록 합니다.w값은 각 버전의 너비를 브라우저에 알려줍니다.
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
이미지를 적절한 크기로 저장합니다.
디스플레이 크기와 일치하는 크기의 이미지를 사용하면 웹사이트의 속도 및 데이터 사용량을 줄일 수 있습니다. 즉, 이미지를 저장할 때 적절한 너비와 높이를 지정해야 합니다.
아래 이미지를 살펴보세요.
두 이미지는 거의 동일하게 보이지만 한쪽의 파일 크기는 다른 것보다 10배 이상 큽니다.
첫 번째 이미지는 표시 크기보다 훨씬 큰 크기로 저장되므로 파일 크기가 훨씬 큽니다. 두 이미지 모두 300픽셀의 고정 너비로 표시되므로 동일한 크기로 저장된 이미지를 사용하는 것이 좋습니다.
고정 너비의 경우 디스플레이 크기와 동일한 크기로 저장된 이미지를 사용합니다.
그렇다면 디스플레이 크기가 다양한 경우에는 어떻게 해야 할까요?
다양한 기기가 사용되는 환경에서는 이미지가 항상 하나의 고정된 크기로 표시되지 않을 수 있습니다.
이미지 요소는 백분율 너비이거나 이미지 디스플레이 크기가 화면 크기에 맞게 변경되는 반응형 레이아웃의 일부일 수 있습니다.
레티나 디스플레이와 같이 픽셀을 많이 사용하는 기기의 경우에는 어떨까요?
브라우저가 올바른 이미지 크기를 선택하도록 돕기
각 이미지를 다양한 크기로 제공한 다음 브라우저가 기기와 디스플레이 크기에 가장 적합한 크기를 선택하도록 하면 좋지 않을까요? 안타깝게도 가장 적합한 이미지를 파악할 때 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와 함께 사용하려는 모든 이미지에 여러 크기를 사용할 수 있도록 해야 합니다.
히어로 이미지와 같은 일회성 이미지의 경우 여러 크기를 수동으로 저장할 수 있습니다. 제품 사진과 같은 이미지가 많은 경우 자동화해야 합니다. 이를 위한 두 가지 접근 방식이 있습니다.
빌드 프로세스에 이미지 처리 통합
빌드 프로세스의 일부로 단계를 추가하여 다양한 크기의 이미지 버전을 만들 수 있습니다. 자세한 내용은 'Imagemin을 사용하여 이미지 압축'을 참고하세요.
이미지 서비스 사용
이미지 생성 및 제공은 Cloudinary와 같은 상업용 서비스 또는 사용자가 직접 설치하고 실행하는 Thumbor와 같은 오픈소스에 해당하는 서비스를 사용하여 자동화할 수 있습니다.
고해상도 이미지를 업로드하면 이미지 서비스가 URL 매개변수에 따라 다양한 이미지 형식과 크기를 자동으로 만들어 제공합니다. 예를 들어 Cloudinary의 이 샘플 이미지를 열고 w 값 또는 URL 입력란의 파일 확장자를 변경해 보세요.
또한 이미지 서비스에는 다양한 이미지 크기에 맞게 '스마트 자르기'를 자동화하고 파일 확장자를 변경하지 않고 JPEG 대신 이 형식을 지원하는 브라우저에 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는 전 세계 브라우저의 90% 이상에서 지원됩니다.
브라우저가 srcset 또는 sizes를 지원하지 않으면 src 속성만 사용하는 것으로 대체됩니다.
이를 통해 srcset 및 sizes가 점진적으로 개선됩니다.
자세히 알아보기
이미지 최적화에 대해 자세히 알아보려면 web.dev의 '이미지 최적화' 섹션을 살펴보세요. 자세한 안내를 받으려면 Udacity에서 제공하는 무료 '반응형 이미지' 과정을 수강해 보세요.