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에서 이 샘플 이미지를 열고 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에서 제공하는 무료 '반응형 이미지' 과정을 수강해 보세요.