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픽셀로 표시되므로 동일한 크기로 저장된 이미지를 사용하는 것이 좋습니다.
고정 너비의 경우 디스플레이 크기와 동일한 크기로 저장된 이미지를 사용합니다.
하지만 디스플레이 크기가 다른 경우에는 어떻게 해야 할까요?
다양한 기기가 사용되는 오늘날 이미지가 항상 고정된 단일 크기로 표시되는 것은 아닙니다.
이미지 요소의 너비는 비율로 지정할 수도 있고, 화면 크기에 맞게 이미지 표시 크기가 변경되는 반응형 레이아웃의 일부일 수도 있습니다.
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가 작동하는 모습을 확인할 수 있습니다. 노트북이나 데스크톱 컴퓨터를 사용하는 경우 브라우저 창 크기를 변경하고 이 페이지를 다시 엽니다.
그런 다음 브라우저 도구의 Network(네트워크) 패널을 사용하여 사용된 이미지를 확인합니다.
시크릿 또는 비공개 창에서 수행해야 합니다. 그러지 않으면 원본 이미지 파일이 캐시됩니다.
여러 이미지 크기를 만들려면 어떻게 해야 하나요?
srcset와 함께 사용하려는 모든 이미지에 여러 크기를 제공해야 합니다.
주요 이미지와 같은 일회성 이미지의 경우 다양한 크기를 수동으로 저장할 수 있습니다. 제품 사진과 같이 이미지가 많은 경우 자동화해야 합니다. 이를 위해 두 가지 접근 방식이 있습니다.
빌드 프로세스에 이미지 처리 통합
빌드 프로세스의 일부로 이미지의 크기가 다른 버전을 만드는 단계를 추가할 수 있습니다. 자세한 내용은 'Imagemin을 사용하여 이미지 압축하기'를 참고하세요.
이미지 서비스 사용
이미지 생성 및 전송은 Cloudinary와 같은 상용 서비스 또는 직접 설치하고 실행하는 Thumbor와 같은 오픈소스 대안을 사용하여 자동화할 수 있습니다.
고해상도 이미지를 업로드하면 이미지 서비스가 URL 매개변수에 따라 다양한 이미지 형식과 크기를 자동으로 생성하고 전송합니다. 예를 들어 Cloudinary의 이 샘플 이미지를 열고 URL 표시줄에서 w 값 또는 파일 확장자를 변경해 보세요.
이미지 서비스에는 다양한 이미지 크기에 맞게 '자동 자르기'를 자동화하고 파일 확장자를 변경하지 않고도 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에서 제공하는 무료 '반응형 이미지' 과정을 사용해 보세요.