Lighthouse 실행
이 글리치는 이미지를 직접 검사할 수 있을 만큼 작습니다. 하지만 대부분의 웹사이트에서는 Lighthouse와 같은 도구를 사용하여 이를 자동화하는 것이 필수적입니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
- 적절한 이미지 크기 설정 감사의 결과를 확인합니다.
Lighthouse 감사 결과에 따르면 이 페이지의 두 이미지 모두 크기를 조절해야 합니다.
flower_logo.png
수정
페이지 상단에서 시작하여 로고 이미지를 수정합니다.
- DevTools Elements 패널에서
flower_logo.png
를 검사합니다.
다음은 flower_logo.png
의 CSS입니다.
.logo {
width: 50px;
height: 50px;
}
이 이미지의 CSS 너비는 50픽셀이므로 flower_logo.png
의 크기를 이에 맞게 조정해야 합니다. ImageMagick을 사용하여 이미지 크기를 조정하여 맞출 수 있습니다. ImageMagick은 이미지 편집을 위한 CLI 도구로, Codelab 환경에 사전 설치되어 있습니다.
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
- 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수 있음).
- Console에 다음을 입력합니다.
convert flower_logo.png -resize 50x50 flower_logo.png
flower_photo.jpg 수정
다음으로 보라색 꽃 사진을 수정합니다.
- DevTools 요소 패널에서
flower_photo.jpg
를 검사합니다.
다음은 flower_photo.jpg
의 CSS입니다.
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
는 flower_photo.jpg
의 CSS 너비를 '브라우저 너비의 절반'으로 설정합니다.
(1vw는 브라우저 너비의 1% 와 같습니다.)
이 이미지의 이상적인 크기는 이미지가 표시되는 기기에 따라 다르므로 대부분의 사용자에게 적합한 크기로 조정해야 합니다. 애널리틱스 데이터를 확인하여 사용자에게 일반적인 화면 해상도를 알아볼 수 있습니다.
이 데이터는 이 사이트 방문자의 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는 Nexus 5x에서 테스트를 실행합니다. Nexus 5x의 화면은 1080x1920입니다.
Nexus 5x의 경우 flower_photo.jpg
의 최적 크기는 540픽셀 (1080픽셀 * . 5). 이는 크기가 조절된 이미지보다 훨씬 작습니다.
이미지 크기를 더 줄여야 하나요? 아마 그럴 거예요. 하지만 이에 대한 답변은 항상 명확하지는 않습니다.
여기서는 고해상도 기기의 이미지 품질과 성능 간에 절충이 이루어집니다. 사용자가 이미지를 얼마나 자세히 살펴볼지 과대평가하기 쉽기 때문에 이미지를 더 작게 만드는 것이 좋습니다. 하지만 이미지 품질이 더 중요한 사용 사례도 있습니다.
좋은 소식은 반응형 이미지를 사용하여 여러 이미지 크기를 게재하여 이 절충점을 완전히 우회할 수 있다는 것입니다. 자세한 내용은 반응형 이미지 가이드를 참고하세요.