올바른 크기로 이미지 제공

Katie Hempenius
Katie Hempenius

이미지를 페이지에 추가하기 전에 축소하는 것을 잊어버린 경험이 있을 것입니다. 이미지는 괜찮아 보이지만 사용자 데이터를 낭비하고 페이지 성능을 저하시킵니다.

잘못된 크기의 이미지 식별

Lighthouse를 사용하면 크기가 잘못된 이미지를 쉽게 식별할 수 있습니다. 성능 감사 (Lighthouse > 옵션 > 성능)를 실행하고 적절한 이미지 크기 감사 결과를 찾습니다. 감사에는 크기를 조절해야 하는 이미지가 나열됩니다.

올바른 이미지 크기 확인

이미지 크기 조정은 놀라울 정도로 복잡할 수 있습니다. 그래서 Google에서는 '좋은' 것과 '더 나은' 두 가지 접근 방식을 제공합니다. 둘 다 성능이 개선되지만 '더 나은' 접근방식은 이해하고 구현하는 데 시간이 조금 더 걸릴 수 있습니다. 그러나 더 큰 성능 개선이 보상으로 제공됩니다. 가장 좋은 방법은 구현하는 데 불편함이 없는

CSS 단위에 대한 간단한 참고사항

이미지를 포함하여 HTML 요소의 크기를 지정하는 CSS 단위에는 두 가지 유형이 있습니다.

  • 절대 단위: 절대 단위를 사용하여 스타일이 지정된 요소는 기기에 관계없이 항상 같은 크기로 표시됩니다. 유효한 절대 CSS 단위의 예: px, cm, mm, in.
  • 상대 단위: 상대 단위를 사용하여 스타일이 지정된 요소는 지정된 상대 길이에 따라 다양한 크기로 표시됩니다. 유효한 상대 CSS 단위의 예: %, vw (1vw = 표시 영역 너비의 1%), em (1.5em = 1.5배 글꼴 크기).

'좋은' 접근 방식

다음에 따라 크기를 조정하는 이미지의 경우

  • 상대 단위: 모든 기기에서 작동하는 크기로 이미지 크기를 조절합니다.

애널리틱스 데이터 (예: Google 애널리틱스)에서 사용자가 가장 많이 사용하는 디스플레이 크기를 확인하는 것이 도움이 될 수 있습니다. 또는 screensiz.es는 많은 일반 기기의 디스플레이에 관한 정보를 제공합니다. - 절대 단위: 이미지가 표시되는 크기에 맞게 이미지 크기를 조절합니다.

DevTools 요소 패널을 사용하여 이미지가 표시되는 크기를 결정할 수 있습니다.

DevTools 요소의 패널

'더 나은' 접근 방식

절대 크기 및 상대 크기가 모두 있는 이미지의 경우 srcsetsizes 속성을 사용하여 다양한 이미지를 다양한 디스플레이 밀도에 제공합니다. 반응형 이미지 가이드 읽어보기

'디스플레이 밀도'는 디스플레이마다 픽셀 밀도가 다르다는 사실을 의미합니다. 다른 모든 조건이 동일하다면 고픽셀 밀도 디스플레이가 저픽셀 밀도 디스플레이보다 선명하게 보입니다.

따라서 기기의 픽셀 밀도와 관계없이 사용자가 가능한 가장 선명한 이미지를 경험하려면 여러 이미지 버전이 필요합니다.

반응형 이미지 기법을 사용하면 여러 이미지 버전을 나열하고 기기에서 가장 적합한 이미지를 선택할 수 있으므로 이러한 작업이 가능합니다.

모든 기기에서 작동하는 이미지는 소형 기기에서는 불필요하게 커집니다. 반응형 이미지 기법, 특히 srcsetsizes를 사용하면 여러 이미지 버전을 지정하고 기기에서 가장 적합한 크기를 선택할 수 있습니다.

이미지 크기 조절

선택한 접근 방식과 관계없이 ImageMagick을 사용하여 이미지 크기를 조절하는 것이 유용할 수 있습니다. ImageMagick은 이미지를 만들고 편집하는 데 가장 널리 사용되는 명령줄 도구입니다. 대부분의 사람들은 GUI 기반 이미지 편집기보다 CLI를 사용할 때 훨씬 더 빠르게 이미지 크기를 조절할 수 있습니다.

이미지 크기를 원본 크기의 25% 로 조절:

convert flower.jpg -resize 25% flower_small.jpg

'가로 200픽셀, 세로 100픽셀' 범위에 맞게 이미지 크기 조정:

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

여러 이미지의 크기를 조절하려는 경우 스크립트나 서비스를 사용하여 프로세스를 자동화하는 것이 더 편리할 수 있습니다. 자세한 내용은 반응형 이미지 가이드를 참고하세요.

크기를 지정하여 레이아웃 변경 방지

이 가이드에서는 다운로드되는 불필요한 바이트 수를 줄이는 맥락에서 이미지 크기를 설명하지만, 레이아웃에서 이미지를 위한 올바른 공간을 확보하는 것도 페이지의 레이아웃 변경 횟수 측정항목을 최소화하는 중요한 구성요소입니다. HTML로 이미지를 제공할 때는 브라우저가 이미지의 레이아웃에 할당할 공간을 알 수 있도록 적절한 widthheight 속성을 사용해야 합니다.

<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">

이러한 속성 또는 이에 상응하는 CSS 크기 조정이 없으면 브라우저는 이미지가 로드될 때까지 이미지가 얼마나 많은 공간을 차지할지 알 수 없습니다. 이로 인해 문서에서 레이아웃이 변경되므로 사용자가 사용을 시작한 후에 콘텐츠가 이동될 때 사용자가 불편을 느낄 수 있습니다. 이로 인해 사용자가 페이지를 읽을 때 자신의 위치를 잃거나 의도한 조회 대상을 '놓치고' 페이지 로드 중에 의도하지 않은 다른 항목을 클릭하게 될 수 있습니다.

너비와 높이를 명시적으로 제공하는 대신 이미지에 CSS aspect-ratio 속성을 사용할 수도 있습니다. 이는 컨테이너가 일관된 가로세로 비율을 유지한다는 점에서 widthheight 속성과 마찬가지로 요소 크기에도 비슷한 영향을 미칩니다. 단, 이 경우 이미지가 제공된 것과 다른 가로세로 비율이 사용될 수 있다는 점이 다릅니다. 따라서 다음과 같이 명시적인 16/9 뷰에서 이미지가 왜곡되지 않도록 object-fit 설정을 사용하는 것이 좋습니다.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

확인

모든 이미지의 크기를 조절한 후 Lighthouse를 다시 실행하여 누락된 것이 없는지 확인합니다.