가로세로 비율이 잘못된 이미지를 표시합니다.

렌더링된 이미지의 가로세로 비율이 소스 파일의 가로세로 비율 (자연스러운 가로세로 비율)과 크게 다른 경우 렌더링된 이미지가 왜곡되어 보일 수 있으며 이로 인해 사용자 환경이 저하될 수 있습니다.

Lighthouse는 자연 비율로 렌더링될 때 렌더링된 크기에서 예상 크기보다 몇 픽셀 차이가 큰 이미지를 플래그합니다.

Lighthouse 감사에서 가로세로 비율이 잘못 표시된 이미지를 표시함

이미지의 가로세로 비율이 잘못된 일반적인 두 가지 원인은 다음과 같습니다.

  • 이미지가 소스 이미지의 크기와 다른 명시적인 너비 및 높이 값으로 설정됩니다.
  • 이미지는 다양한 크기의 컨테이너의 백분율로 너비와 높이로 설정됩니다.

이미지가 올바른 가로세로 비율로 표시되는지 확인

이미지 CDN 사용

이미지 CDN을 사용하면 다양한 크기의 이미지 버전을 만드는 프로세스를 더 쉽게 자동화할 수 있습니다. 개요는 이미지 CDN을 사용하여 이미지 최적화를, 실습 Codelab은 Thumbor 이미지 CDN을 설치하는 방법을 참조하세요.

이미지의 가로세로 비율에 영향을 미치는 CSS 확인

잘못된 가로세로 비율을 유발하는 CSS를 찾는 데 문제가 있는 경우 Chrome DevTools에서 특정 이미지에 영향을 미치는 CSS 선언을 표시할 수 있습니다. 자세한 내용은 Google의 요소에 실제로 적용된 CSS만 보기 페이지를 참고하세요.

HTML에서 이미지의 widthheight 속성을 확인하세요.

가능하면 HTML에 각 이미지의 widthheight 속성을 지정하여 브라우저가 이미지를 위한 공간을 할당할 수 있도록 하는 것이 좋습니다. 이 접근 방식을 사용하면 이미지가 로드된 후 이미지 아래의 콘텐츠가 바뀌지 않습니다.

그러나 표시 영역 크기를 모르면 너비와 높이를 알 수 없으므로 반응형 이미지로 작업하는 경우 HTML에 이미지 크기를 지정하기가 어려울 수 있습니다. 반응형 이미지의 가로세로 비율을 유지하려면 CSS 가로세로 비율 라이브러리 또는 가로세로 비율 상자를 사용하는 것이 좋습니다.

마지막으로 올바른 크기로 이미지 제공 게시물을 참고하여 각 사용자 기기에 적합한 크기의 이미지를 제공하는 방법을 알아보세요.

자료