렌더링된 이미지의 가로세로 비율이 소스 파일의 가로세로 비율 (자연스러운 가로세로 비율)과 크게 다른 경우 렌더링된 이미지가 왜곡되어 보일 수 있으며 이로 인해 사용자 환경이 저하될 수 있습니다.
Lighthouse 이미지 가로세로 비율 감사 실패 방법
Lighthouse는 자연 비율로 렌더링될 때 렌더링된 크기에서 예상 크기보다 몇 픽셀 차이가 큰 이미지를 플래그합니다.
이미지의 가로세로 비율이 잘못된 일반적인 두 가지 원인은 다음과 같습니다.
- 이미지가 소스 이미지의 크기와 다른 명시적인 너비 및 높이 값으로 설정됩니다.
- 이미지는 다양한 크기의 컨테이너의 백분율로 너비와 높이로 설정됩니다.
이미지가 올바른 가로세로 비율로 표시되는지 확인
이미지 CDN 사용
이미지 CDN을 사용하면 다양한 크기의 이미지 버전을 만드는 프로세스를 더 쉽게 자동화할 수 있습니다. 개요는 이미지 CDN을 사용하여 이미지 최적화를, 실습 Codelab은 Thumbor 이미지 CDN을 설치하는 방법을 참조하세요.
이미지의 가로세로 비율에 영향을 미치는 CSS 확인
잘못된 가로세로 비율을 유발하는 CSS를 찾는 데 문제가 있는 경우 Chrome DevTools에서 특정 이미지에 영향을 미치는 CSS 선언을 표시할 수 있습니다. 자세한 내용은 Google의 요소에 실제로 적용된 CSS만 보기 페이지를 참고하세요.
HTML에서 이미지의 width 및 height 속성을 확인하세요.
가능하면 HTML에 각 이미지의 width 및 height 속성을 지정하여 브라우저가 이미지를 위한 공간을 할당할 수 있도록 하는 것이 좋습니다.
이 접근 방식을 사용하면 이미지가 로드된 후 이미지 아래의 콘텐츠가 바뀌지 않습니다.
그러나 표시 영역 크기를 모르면 너비와 높이를 알 수 없으므로 반응형 이미지로 작업하는 경우 HTML에 이미지 크기를 지정하기가 어려울 수 있습니다. 반응형 이미지의 가로세로 비율을 유지하려면 CSS 가로세로 비율 라이브러리 또는 가로세로 비율 상자를 사용하는 것이 좋습니다.
마지막으로 올바른 크기로 이미지 제공 게시물을 참고하여 각 사용자 기기에 적합한 크기의 이미지를 제공하는 방법을 알아보세요.