이미지를 있습니다. 이미지가 괜찮아 보이지만 사용자에게 불편을 야기함 데이터 및 해로운 페이지 확인할 수 있습니다
크기가 잘못된 이미지 식별
Lighthouse를 사용하면 크기가 잘못된 이미지를 쉽게 식별할 수 있습니다. 먼저 성능 감사 (Lighthouse > 옵션 > 성능)를 열고 적절한 이미지 크기 감사 결과 감사에서는 크기를 조정해야 합니다.
올바른 이미지 크기 확인
이미지 크기 조정은 의외로 복잡할 수 있습니다. 이러한 이유로 '좋은' 접근법을 더 나아질 수 있습니다 둘 다 성능을 개선하지만 '더 나음' 이 접근 방식을 이해하고 구현하는 데 시간이 조금 더 걸릴 수 있습니다. 하지만 더 큰 실적 개선으로 보상이 될 수도 있습니다 고객에게 가장 적합한 것은 여러분께서 구현하실 수 있는 개발자입니다.
CSS 단위에 대한 간단한 참고사항
HTML 요소의 크기를 지정하기 위한 CSS 단위에는 두 가지 유형이 있습니다. 이미지 포함:
- 절대 단위: 절대 단위를 사용하여 스타일이 지정된 요소는 항상 모든 광고가 동일한 크기로 표시됩니다. 유효한 예시 절대 CSS 단위: px, cm, mm, 인치
- 상대 단위: 상대 단위를 사용하여 스타일이 지정된 요소는 다음 위치에 표시됩니다. 지정된 상대적 길이에 따라 크기가 달라질 수 있습니다. 예시: 유효한 상대 CSS 단위: %, vw (1vw = 표시 영역 너비의 1%), em (1.5 em = 글꼴 크기의 1.5배)
'양호' 접근 방식
크기 조정이 적용된 이미지의 경우
- 상대 단위: 모든 기기에서 작동하는 크기로 이미지 크기를 조정합니다.
애널리틱스 데이터 (예: Google 애널리틱스)를 확인하는 것이 애널리틱스)에서 사용자가 흔히 사용하는 디스플레이 크기를 확인할 수 있습니다. 또는 screensiz.es 는 여러 일반적인 기기의 디스플레이에 관한 정보를 제공합니다. - 절대 단위: 표시되는 크기와 일치하도록 이미지 크기를 조정합니다.
DevTools Elements 패널은 이미지 크기를 결정하는 데 사용할 수 있습니다. 입니다.
'더 나은(Better)' 접근 방식
절대 크기와 상대 크기 조정이 모두 사용된 이미지의 경우 srcset를 사용합니다.
및 sizes
속성을 사용하여 서로 다른 디스플레이 밀도에 다른 이미지를 제공합니다.
반응형 이미지 가이드를 읽어보세요.
'화면 밀도' 서로 다른 디스플레이에 서로 다른 표현할 수 있습니다. 다른 모든 조건이 동일할 경우 픽셀 밀도가 높고 픽셀 밀도가 낮은 디스플레이보다 선명하게 보입니다.
따라서 사용자가 여러 이미지를 보고 싶은 경우 픽셀 밀도에 관계없이 가장 선명한 이미지를 경험할 수 있습니다. 액세스할 수 있습니다.
반응형 이미지 기법을 사용하면 기기에서 작동하는 이미지를 선택하도록 할 수 있습니다. 가장 적합합니다
모든 기기에서 작동하는 이미지는 더 작은 기기입니다. 반응형 이미지 기법, 특히 srcset 및 크기를 사용하면 여러 이미지 버전을 지정할 수 있고 기기에서 가장 적합한 크기를 선택합니다.
이미지 크기 조절
어떤 접근 방식을 선택하든 ImageMagick을 사용하여 이미지 크기를 조절할 수 있습니다. ImageMagick이 가장 인기 있고 이미지 생성 및 편집을 위한 명령줄 도구입니다. 대부분의 사용자는 이미지 크기를 조절할 수 있습니다. 이미지 편집기에 비해 훨씬 더 빠르게 작업할 수 있습니다.
이미지 크기를 원본 크기의 25% 로 조정:
convert flower.jpg -resize 25% flower_small.jpg
'너비 200픽셀, 높이 100픽셀' 내에 맞게 이미지 크기 조정:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
많은 이미지의 크기를 조절하려는 경우 스크립트나 서비스를 사용하여 프로세스를 자동화할 수 있습니다. 자세한 내용은 반응형 이미지 가이드입니다.
크기를 지정하여 레이아웃 변경 방지
이 가이드에서는 다운로드되는 불필요한 바이트 수를 줄이는 맥락에서 이미지 크기를 설명하지만, 레이아웃에서 이미지를 위한 올바른 공간을 확보하는 것은 페이지의 누적 레이아웃 변경 측정항목을 최소화하는 또 다른 중요한 구성요소라는 점에 유의해야 합니다. HTML로 이미지를 게재할 때는 적절한 width 및 height 속성을 사용해야 합니다. 그래야 브라우저에서 이미지 레이아웃에 얼마나 많은 공간을 할당할지 알 수 있습니다.
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
이러한 속성이나 이와 동등한 CSS 크기가 없으면 브라우저는 이미지가 로드될 때까지 이미지가 얼마나 공간을 차지할지 알지 못합니다. 이로 인해 문서에서 레이아웃이 변경되어 사용자가 콘텐츠를 사용하기 시작한 후에 이동하면 사용자가 불편을 느낄 수 있습니다. 이로 인해 사용자가 기사를 읽을 때 이전 위치를 잃거나 놓칠 수 있습니다. 페이지 로드 중에 의도하지 않은 다른 항목을 클릭하게 됩니다.
너비와 높이를 명시적으로 제공하는 대신 이미지에 CSS aspect-ratio 속성을 사용할 수도 있습니다. 이는 컨테이너가 일관된 가로세로 비율을 유지한다는 측면에서 width 및 height 속성이 수행하는 것과 유사한 요소의 크기에 영향을 미칩니다. 하지만 이렇게 하면 이미지가 제공된 것과 다른 가로세로 비율이 사용될 수 있으므로 object-fit 설정을 사용하여 이미지가 이 명시적인 16/9 뷰에서 왜곡되지 않도록 하는 것이 좋습니다.
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
확인
모든 이미지의 크기를 조절한 후 Lighthouse를 다시 실행하여 크기를 조정하지 않았는지 확인합니다. 뭐든 빠뜨리죠.