데스크톱 크기의 이미지를 휴대기기에 제공하면 2~4배 더 많은 데이터를 할 수 있습니다 사용자 환경을 개선하려면 이 페이지의 가이드라인을 따르세요. 여러 기기에 서로 다른 이미지 크기를 게재합니다.
반응형 이미지 및 Core Web Vitals
반응형 이미지를 제공하면 페이지에서 디스플레이 기능을 평가합니다. 이미지 조합 중 하나를 선택하여 디스플레이에 가장 적합하게 만들 수 있습니다 이렇게 하면 사용자의 데이터가 절약되며 주로 화면이 작은 기기에 더 작은 이미지를 제공하는 것입니다.
이미지 로딩 속도가 빨라지면 페이지의 최대 콘텐츠 페인트 (LCP). 예를 들어 페이지의 LCP 요소는 이미지로, 리소스 로드 기간을 줄일 수 있습니다.
리소스 로드 시간이 짧을수록 LCP 이미지의 로드 시간이 단축되어 확인할 수 있습니다. LCP가 낮으면 사용자에게 사이트가 더 빠르게 로드된다고 인식하게 되므로 특히 가장 중요한 콘텐츠 (LCP 요소)를 더 빠르게 로드할 수 있습니다. 반응형 이미지를 제공하면 다른 서비스에 대한 대역폭 경합도 줄일 수 있습니다. 리소스를 많이 사용하므로 일반적으로 페이지 로드 속도를 개선할 수 있습니다.
이미지 크기 조절
가장 많이 사용되는 이미지 크기 조절 도구 두 가지는 sharp npm 패키지 그리고 ImageMagick CLI 도구가 포함됩니다.
Sharp 패키지는 이미지 크기 조절을 자동화하는 데 좋은 선택입니다 (예: 웹사이트의 모든 동영상에 대해 여러 크기의 썸네일을 생성) 그것은 빠르고 빌드 스크립트 및 도구와 원활하게 통합됩니다. ImageMagick은 한 번에 이미지 크기를 조절할 때 편리합니다. 이는 전적으로 명령어에서 실행되기 때문입니다. 행입니다.
날카로운
Sharp를 노드 스크립트로 사용하려면 이 코드를 프로젝트를 실행한 다음 실행하여 이미지를 변환합니다.
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
이미지 크기를 원래 크기의 33% 로 조절하려면 다음 명령어를 실행합니다. 터미널:
convert -resize 33% flower.jpg flower-small.jpg
너비 300픽셀, 높이 200픽셀 안에 들어가도록 이미지 크기를 조절하려면 다음 명령어를 실행합니다.
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
이미지 버전을 몇 개나 만들어야 하나요?
단 하나의 '정답'은 없습니다. 답할 수 있습니다 그러나 일반적으로 3~5가지 크기의 이미지를 게재합니다. 다양한 크기의 이미지를 제공하는 것이 서버에서 더 많은 공간을 차지하며 약간 더 많은 HTML을 사용합니다.
기타 옵션
Thumbor (오픈소스)와 같은 이미지 서비스 및 Cloudinary도 확인해 보시기 바랍니다. 둘 다 텍스트, 이미지, 오디오, 동영상 등 쉽게 제어할 수 있습니다 Thumbor를 설정하려면 서버에 설치하세요. 클라우드 에서 세부정보를 처리하므로 서버 설정이 필요하지 않습니다.
여러 이미지 버전 제공
여러 이미지 버전을 지정하면 브라우저가 최적의 이미지를 사용:
| 전 | 후 |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" 크기="50vw"> |
<img> 태그의
src,
srcset,
및 sizes
이러한 최종 결과를 달성하기 위해 모든 속성이 상호 작용합니다.
'src' 속성
src 속성을 사용하면 작동하지 않는 브라우저에서도 이 코드가
srcset 및 sizes 지원
속성 이러한 브라우저는
src 속성
'srcset' 속성
srcset 속성은 쉼표로 구분된 이미지 파일 이름 및 파일 이름 목록입니다.
밀도 설명어를 사용합니다.
이 예에서는
너비 설명자,
이미지의 너비를 브라우저에 알려주기 때문에
이미지를 직접 다운로드하지 않아도
확인할 수 있습니다 480w는 너비 설명어로,
flower-small.jpg의 너비는 480픽셀입니다. 1080w는 너비 설명어로
flower-large.jpg의 너비가 1080px인 브라우저입니다.
추가 크레딧: 다양한 이미지 크기를 제공하기 위해 밀도 설명자에 관해 알 필요는 없습니다. 하지만 밀도 설명어가 어떻게 작동하는지 알고 싶다면 해결 방법 전환 Codelab 밀도 설명어는 기기의 크기에 따라 다른 이미지를 제공하는 데 픽셀 밀도입니다.
'크기' 속성
크기 속성은 이미지가 얼마나 큰지 이미지의 디스플레이 크기에는 영향을 미치지 않으므로 여전히 CSS가 있습니다.
브라우저는 이 정보를 사용하여 사용자의 기기 (크기 및 픽셀 밀도 포함)를 사용하여 어떤 이미지를 업로드할지 있습니다.
브라우저에서 'sizes'을(를) 인식하지 못하는 경우 속성이 있는 경우
'src'에서 지정한 이미지를 로드하는 중입니다. 속성의 값을 제공합니다. (sizes 및 srcset
동시에 도입되었기 때문에 모든 브라우저는
둘 다 여부를 선택할 수 있습니다.)
추가 크레딧: 고급 설정을 원하는 경우 크기 속성을 사용하여 여러 개의 슬롯 크기를 사용할 수 있습니다. 이렇게 하면 다양한 레이아웃을 사용하는 웹사이트를 여러 표시 영역 크기를 지원합니다. 여러 슬롯 코드 샘플을 확인하세요. 를 참조하세요.
(더 보기) 추가 크레딧
이미 나열된 모든 추가 크레딧 (이미지가 복잡함) 외에도 같은 개념을 아트 디렉션에 사용됩니다. 아트 디렉션은 완전히 다른 이미지를 제공하는 행위입니다. (동일한 이미지의 다른 버전 대신) 다른 표시 영역에 연결할 수 있습니다. 나 Art Direction Codelab에서 자세히 알아보세요.
확인
반응형 이미지를 구현한 후에는 Lighthouse를 사용하여 확인할 수 있습니다. Lighthouse 성능 감사 실행 (Lighthouse > Options > Performance)로 이동하여 적절한 이미지 크기 감사 이 결과에는 있습니다.