올바른 크기로 이미지 제공

Katie Hempenius
Katie Hempenius

이 글리치는 이미지를 직접 검사할 수 있을 만큼 작습니다. 하지만 대부분의 웹사이트에서는 Lighthouse와 같은 도구를 사용하여 이를 자동화하는 것이 필수적입니다.

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

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

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

flower_logo.png 수정

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

  • DevTools Elements 패널에서 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. Console에 다음을 입력합니다.
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;
}

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

이 이미지의 이상적인 크기는 이미지를 표시하는 기기에 따라 다르므로 대부분의 사용자에게 적합한 크기로 조정해야 합니다. 애널리틱스 데이터를 확인하여 사용자에게 일반적인 화면 해상도를 알아볼 수 있습니다.

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

이 데이터는 이 사이트 방문자의 95%이상이 화면 해상도가 1,920픽셀 이하임을 나타냅니다.

이 정보를 사용하여 이미지의 너비를 계산할 수 있습니다. (너비 1920픽셀) * (브라우저 너비의 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). 이는 크기가 조절된 이미지보다 훨씬 작습니다.

이미지 크기를 더 줄여야 하나요? 아마 그럴 거예요. 그러나 이에 대한 답이 항상 명확한 것은 아닙니다.

여기서는 고해상도 기기의 이미지 품질과 성능 간에 절충이 이루어집니다. 사용자가 이미지를 얼마나 자세히 살펴볼지 과대평가하기 쉽기 때문에 이미지를 더 작게 만드는 것이 좋습니다. 하지만 이미지 품질이 더 중요한 사용 사례도 있습니다.

좋은 소식은 반응형 이미지를 사용하여 여러 이미지 크기를 게재하여 이 절충점을 완전히 우회할 수 있다는 것입니다. 자세한 내용은 반응형 이미지 가이드를 참고하세요.