페이지에 이미지를 추가하기 전에 이미지 크기를 줄이는 것을 잊은 적이 있으신가요? 이미지는 괜찮아 보이지만 사용자 데이터를 낭비하고 페이지 성능을 저해합니다.
잘못된 크기의 이미지 식별
Lighthouse를 사용하면 잘못된 크기의 이미지를 쉽게 식별할 수 있습니다. 성능 감사 (Lighthouse > 옵션 > 성능)를 실행하고 이미지 크기 조정 감사 결과를 찾습니다. 감사에는 크기를 조정해야 하는 이미지가 나열됩니다.
올바른 이미지 크기 결정
이미지 크기 조정은 겉보기와 달리 복잡할 수 있습니다. 이러한 이유로 '좋음'과 '더 좋음'이라는 두 가지 접근 방식을 제공합니다. 두 가지 모두 성능을 개선하지만 '더 좋음' 접근 방식은 이해하고 구현하는 데 시간이 더 걸릴 수 있습니다. 하지만 성능 개선 효과도 더 큽니다. 가장 적합한 선택은 구현하기에 편안한 접근 방식입니다.
CSS 단위에 관한 간단한 참고사항
이미지를 비롯한 HTML 요소의 크기를 지정하는 CSS 단위에는 두 가지 유형이 있습니다.
- 절대 단위: 절대 단위를 사용하여 스타일이 지정된 요소는 기기에 관계없이 항상 동일한 크기로 표시됩니다. 유효한 절대 CSS 단위의 예: px, cm, mm, in
- 상대 단위: 상대 단위를 사용하여 스타일이 지정된 요소는 지정된 상대 길이에 따라 다양한 크기로 표시됩니다. 유효한 상대 CSS 단위의 예: %, vw (1vw = 뷰포트 너비의 1%), em (1.5em = 글꼴 크기의 1.5배)
'좋음' 접근 방식
크기가 다음을 기반으로 하는 이미지의 경우
- 상대 단위: 모든 기기에서 작동하는 크기로 이미지 크기를 조정합니다.
애널리틱스 데이터 (예: Google 애널리틱스)를 확인하여 사용자가 흔히 사용하는 디스플레이 크기를 확인하는 것이 좋습니다. 또는 screensiz.es 에서 일반적인 기기의 디스플레이에 관한 정보를 제공합니다. - 절대 단위: 표시되는 크기에 맞게 이미지 크기를 조정합니다.
DevTools 요소 패널을 사용하여 이미지가 표시되는 크기를 확인할 수 있습니다.
'더 좋음' 접근 방식
절대 크기 조정과 상대 크기 조정이 모두 있는 이미지의 경우 srcset
및 sizes
속성을 사용하여 디스플레이 밀도에 따라 다른 이미지를 제공합니다.
반응형 이미지에 관한 가이드를 읽어보세요.
'디스플레이 밀도'는 디스플레이마다 픽셀 밀도가 다르다는 사실을 나타냅니다. 다른 모든 조건이 동일하다면 픽셀 밀도가 높은 디스플레이가 픽셀 밀도가 낮은 디스플레이보다 더 선명하게 보입니다.
따라서 사용자가 기기의 픽셀 밀도와 관계없이 가능한 가장 선명한 이미지를 경험하도록 하려면 여러 이미지 버전이 필요합니다.
반응형 이미지 기술을 사용하면 여러 이미지 버전을 나열하고 기기에서 가장 적합한 이미지를 선택할 수 있으므로 이 작업을 수행할 수 있습니다.
모든 기기에서 작동하는 이미지는 작은 기기에서는 불필요하게 클 수 있습니다. 반응형 이미지 기술, 특히 srcset 및 sizes를 사용하면 여러 이미지 버전을 지정하고 기기에서 가장 적합한 크기를 선택할 수 있습니다.
이미지 크기 조절
선택한 접근 방식과 관계없이 ImageMagick을 사용하여 이미지 크기를 조정하는 것이 좋습니다. ImageMagick은 이미지를 만들고 수정하는 데 가장 널리 사용되는 명령줄 도구입니다. 대부분의 사용자는 GUI 기반 이미지 편집기보다 CLI를 사용할 때 이미지 크기를 훨씬 더 빠르게 조정할 수 있습니다.
이미지 크기를 원본 크기의 25% 로 조정합니다.
convert flower.jpg -resize 25% flower_small.jpg
'너비 200px, 높이 100px' 내에 맞게 이미지 크기를 조정합니다.
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
이미지 크기를 많이 조정하는 경우 스크립트 또는 서비스를 사용하여 프로세스를 자동화하는 것이 더 편리할 수 있습니다. 자세한 내용은 반응형 이미지 가이드를 참고하세요.
크기 지정을 통해 레이아웃 이동 방지
이 가이드에서는 다운로드되는 불필요한 바이트 수를 줄이는 맥락에서 이미지 크기를 설명하지만 레이아웃에서 이미지에 올바른 공간을 예약하는 것도 페이지의 누적 레이아웃 이동 측정항목을 최소화하는 데 중요한 구성요소입니다. HTML에서 이미지를 제공할 때는 브라우저에서 레이아웃에서 이미지에 할당할 공간을 알 수 있도록 적절한 width 및 height 속성을 사용해야 합니다.
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
이러한 속성 또는 이에 상응하는 CSS 크기 조정이 없으면 브라우저는 이미지가 로드될 때까지 이미지가 차지할 공간을 알 수 없습니다. 이로 인해 문서에서 레이아웃 이동이 발생하며, 사용자가 콘텐츠를 사용하기 시작한 후 콘텐츠가 이동하면 불편할 수 있습니다. 이로 인해 사용자가 읽고 있는 위치를 잃거나 의도한 적중 대상을 '놓치고' 페이지 로드 중에 의도하지 않은 다른 항목을 클릭할 수 있습니다.
너비와 높이를 명시적으로 제공하는 대신 이미지에 CSS aspect-ratio 속성을 사용하는 방법도 있습니다. 컨테이너가 일관된 가로세로 비율을 유지한다는 점에서 요소의 크기에 width 및 height 속성과 유사한 영향을 미칩니다. 하지만 차이점은 이미지가 제공되는 것과 다른 가로세로 비율이 사용될 수 있으므로 object-fit 설정을 사용하여 이 명시적 16/9 뷰에서 이미지가 왜곡되지 않도록 하는 것이 좋습니다.
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
확인
모든 이미지의 크기를 조정한 후 Lighthouse를 다시 실행하여 누락된 항목이 없는지 확인합니다.