왜 관심을 가져야 할까요?
압축되지 않은 이미지는 페이지를 불필요한 바이트로 묶어 부풀립니다. 이미지는 콘텐츠가 포함된 최대 페인트 (LCP)의 후보가 될 수 있으므로 불필요한 바이트로 인해 이미지의 리소스 로드 기간이 길어져 LCP 시간이 길어질 수 있습니다.
오른쪽 사진은 왼쪽 사진보다 40% 작지만 일반 사용자와 동일하게 보일 수 있습니다.
|
|
|
|---|
측정
Lighthouse를 실행하여 이미지를 압축하여 페이지 로드를 개선할 수 있는지 확인합니다. 이러한 추천은 '효율적으로 이미지 인코딩' 아래에 표시됩니다.
이미지 최솟값
Imagemin은 다양한 크기의 이미지를 지원하기 때문에 이미지 압축에 탁월한 선택입니다. 다양한 이미지 형식이 지원되며 빌드 스크립트 및 있습니다. Imagemin은 CLI 및 npm 모듈을 참고하세요. 일반적으로 npm 모듈은 다음과 같습니다. 더 많은 구성 옵션을 제공하기 때문에 최선의 선택이지만, CLI는 코드를 변경하지 않고 Imagemin을 사용해 보려는 경우 괜찮은 대안이 될 수 있습니다.
플러그인
Imagemin은 '플러그인'을 중심으로 빌드됩니다. 플러그인은 최신 버전의 애플리케이션을 압축하는 (예: 'mozjpeg'은 JPEG를 압축함) 인기 이미지 형식 선택할 수 있는 플러그인이 여러 개 있을 수 있습니다.
플러그인을 선택할 때 고려해야 할 가장 중요한 사항은 '손실' '무손실'이라 할 수 있습니다. 무손실 압축에서는 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지가 줄어들 수 있습니다. 있습니다. 플러그인에 '손실' 여부가 표시되지 않는 경우 '무손실'의 경우 나 API를 통해 알 수 있습니다. 출력의 이미지 품질을 지정할 수 있다면 '손실'입니다.
대부분의 경우 손실 플러그인이 가장 적합합니다. Kubernetes는 더 큰 파일 크기 절감 효과를 누리고 원하는 만큼 압축 수준을 확인할 수 있습니다 아래 표에는 많이 사용되는 Imagemin 플러그인이 나와 있습니다. 이것들은 유일한 플러그인은 아닙니다 모두 프로젝트에 좋은 선택이 될 것입니다
| 이미지 형식 | Lossy 플러그인 | 무손실 플러그인 |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
Imagemin CLI
Imagemin CLI는 imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant 및 imagemin-svgo Imagemin은 있습니다.
'images/'에 있는 이미지를 압축하려면 인코더와 디코더에 저장하고 다음 명령어를 실행합니다 (원본 파일 덮어쓰기).
$ imagemin images/* --out-dir=images
Imagemin npm 모듈
이러한 빌드 도구 중 하나를 사용하는 경우 다음 명령어로 Imagemin용 Codelab을 webpack, gulp, 으르렁거립니다.
Imagemin 자체를 노드 스크립트로 사용할 수도 있습니다. 이 코드는 'imagemin-mozjpeg'을 사용합니다. JPEG 파일을 특정 품질로 압축하는 플러그인 50점('0'이 최악, '100'이 최고):
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();