가로세로 비율이 잘못된 이미지를 표시합니다.
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
렌더링된 이미지의 가로세로 비율 이 소스 파일의 가로세로 비율 (자연스러운 가로세로 비율)과 크게 다른 경우 렌더링된 이미지가 왜곡되어 보일 수 있으며 이로 인해 사용자 환경이 저하될 수 있습니다.
Lighthouse 이미지 가로세로 비율 감사 실패 방법
Lighthouse 는 자연 비율로 렌더링될 때 렌더링된 크기에서 예상 크기보다 몇 픽셀 차이가 큰 이미지를 플래그합니다.
이미지의 가로세로 비율이 잘못된 일반적인 두 가지 원인은 다음과 같습니다.
이미지가 소스 이미지의 크기와 다른 명시적인 너비 및 높이 값으로 설정됩니다.
이미지는 다양한 크기의 컨테이너의 백분율로 너비와 높이로 설정됩니다.
참고: 각 권장사항 감사는 Lighthouse 권장사항 점수에 동일한 가중치가 적용됩니다. 권장사항 점수 에서 자세히 알아보세요.
이미지가 올바른 가로세로 비율로 표시되는지 확인
이미지 CDN 사용
이미지 CDN을 사용하면 다양한 크기의 이미지 버전을 만드는 프로세스를 더 쉽게 자동화할 수 있습니다. 개요는 이미지 CDN을 사용하여 이미지 최적화 를, 실습 Codelab은 Thumbor 이미지 CDN을 설치하는 방법 을 참조하세요.
이미지의 가로세로 비율에 영향을 미치는 CSS 확인
잘못된 가로세로 비율을 유발하는 CSS를 찾는 데 문제가 있는 경우 Chrome DevTools에서 특정 이미지에 영향을 미치는 CSS 선언을 표시할 수 있습니다.
자세한 내용은 Google의 요소에 실제로 적용된 CSS만 보기 페이지를 참고하세요.
HTML에서 이미지의 width
및 height
속성을 확인하세요.
가능하면 HTML에 각 이미지의 width
및 height
속성을 지정하여 브라우저가 이미지를 위한 공간을 할당할 수 있도록 하는 것이 좋습니다.
이 접근 방식을 사용하면 이미지가 로드된 후 이미지 아래의 콘텐츠가 바뀌지 않습니다.
그러나 표시 영역 크기를 모르면 너비와 높이를 알 수 없으므로 반응형 이미지로 작업하는 경우 HTML에 이미지 크기를 지정하기가 어려울 수 있습니다. 반응형 이미지의 가로세로 비율을 유지하려면 CSS 가로세로 비율 라이브러리 또는 가로세로 비율 상자 를 사용하는 것이 좋습니다.
마지막으로 올바른 크기로 이미지 제공 게시물을 참고하여 각 사용자 기기에 적합한 크기의 이미지를 제공하는 방법을 알아보세요.
자료
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2019-05-02(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2019-05-02(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2019-05-02(UTC)"]]