올바른 크기로 이미지 제공

케이티 헴페니우스
Katie Hempenius
X

Lighthouse 실행

이 글리치는 크기가 작아서 이미지를 손으로 검사할 수 있습니다. 하지만 대부분의 웹사이트에서는 Lighthouse와 같은 도구를 사용하여 이를 자동화하는 것이 필수적입니다.

  1. 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  2. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. Lighthouse 탭을 클릭합니다.
  4. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
  5. 보고서 생성 버튼을 클릭합니다.
  6. 적절한 크기의 이미지 감사 결과를 확인합니다.

Lighthouse에서 적절한 크기의 이미지 감사에 실패합니다.

Lighthouse 감사에 따르면 이 페이지의 두 이미지 모두 크기를 조절해야 합니다.

flower_logo.png 수정

페이지 상단에서 시작하여 로고 이미지를 수정합니다.

  • DevTools 요소 패널에서 flower_logo.png를 검사합니다.

DevTools 요소 패널

다음은 flower_logo.png의 CSS입니다.

.logo {
  width: 50px;
  height: 50px;
}

이 이미지의 CSS 너비는 50픽셀이므로 flower_logo.png의 크기를 이에 맞게 조정해야 합니다. ImageMagick을 사용하여 이미지의 크기를 알맞게 조정할 수 있습니다. ImageMagick은 이미지 편집을 위한 CLI 도구로, Codelab 환경에 사전 설치되어 있습니다.

  1. 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  2. 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수 있음).
  3. 콘솔에서 다음을 입력합니다.
convert flower_logo.png -resize 50x50 flower_logo.png

flower_photo.jpg 수정

다음으로 보라색 꽃 사진을 수정합니다.

  • DevTools 요소 패널에서 flower_photo.jpg를 검사합니다.

DevTools 요소 패널

다음은 flower_photo.jpg의 CSS입니다.

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw는 flower_photo.jpg의 CSS 너비를 '브라우저 너비의 절반'으로 설정합니다. (1vw는 브라우저 너비의 1% 와 같습니다.)

이 이미지의 이상적인 크기는 이미지가 표시되는 기기에 따라 달라지므로 대부분의 사용자에게 잘 맞는 크기로 크기를 조절해야 합니다. 분석 데이터를 확인하여 사용자에게 일반적인 화면 해상도를 확인할 수 있습니다.

화면 해상도에 대한 Google 애널리틱스

이 데이터에 따르면 이 사이트 방문자의 95%이상은 너비가 1920픽셀 이하인 화면 해상도를 사용합니다.

이 정보를 사용하여 이미지의 너비를 계산할 수 있습니다. (너비 1,920픽셀) * (브라우저 너비의 50%) = 960픽셀

너비가 1920픽셀보다 큰 해상도에서는 이미지가 영역을 덮을 수 있도록 늘어납니다. 크기가 조절된 이미지는 여전히 상당히 크므로 이로 인한 영향이 눈에 띄지는 않습니다.

  • ImageMagick을 사용하여 이미지 너비를 960픽셀로 조절합니다. 터미널 유형을 선택합니다.
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Lighthouse 다시 실행

  • Lighthouse 성능 감사를 다시 실행하여 이미지 크기를 성공적으로 조절했는지 확인합니다.

Lighthouse의 이미지 감사 크기가 적절합니다.

... 그리고 실패했다고! 이유가 무엇인가요?

Lighthouse는 Nexus 5x에서 테스트를 실행합니다. Nexus 5x의 화면은 1080x1920입니다. Nexus 5x의 경우 flower_photo.jpg의 최적 크기는 너비 540픽셀 (1080픽셀 * . 5). 크기가 조절된 이미지보다 훨씬 작습니다.

이미지 크기를 더 작게 조정해야 할까요? 아마 그럴 거예요. 그러나 이에 대한 답이 항상 명확하지는 않습니다.

이때 고해상도 기기에서의 이미지 품질과 성능 간의 절충점은 다음과 같습니다. 사용자가 이미지를 얼마나 면밀하게 검사할지 과대평가하기 쉬우므로 이미지를 축소하는 것이 좋습니다. 하지만 이미지 품질이 더 중요한 사용 사례도 분명히 있습니다.

다행인 점은 반응형 이미지를 사용하여 여러 크기의 이미지를 제공하면 이러한 단점을 완전히 우회할 수 있다는 것입니다. 자세한 내용은 반응형 이미지 가이드를 참고하세요.