Dlaczego warto wziąć to pod uwagę?
Nieskompresowane obrazy zwiększają rozmiar stron o niepotrzebne bajty. Ponieważ obrazy mogą być kandydatami na największe wyrenderowanie treści (LCP), te niepotrzebne bajty mogą wydłużyć czas wczytywania zasobu, co może spowodować wydłużenie czasu LCP.
Zdjęcie po prawej stronie jest o 40% mniejsze niż to po lewej stronie, ale dla przeciętnego użytkownika prawdopodobnie wygląda identycznie.
20 KB | 12 KB |
---|
Zmierz odległość
Uruchom Lighthouse, aby poszukać możliwości przyspieszenia wczytywania strony przez kompresowanie obrazów. Te możliwości są wymienione w sekcji „Efektywnie koduj obrazy”:
Miniatura obrazu
Narzędzie Imagemin znakomicie nadaje się do kompresji obrazów, ponieważ obsługuje szeroką gamę formatów obrazów i łatwo integruje się ze skryptami kompilacji oraz narzędziami do kompilacji. Imagemin jest dostępny jako CLI i moduł npm. Ogólnie najlepszym wyborem jest moduł npm, ponieważ oferuje więcej opcji konfiguracji, ale interfejs wiersza poleceń może być świetnym rozwiązaniem, jeśli chcesz wypróbować Imagemin bez dotykania kodu.
Wtyczki
Imagemin jest oparty na „wtyczkach”. Wtyczka to pakiet npm, który kompresuje określony format obrazu (np. „mozjpeg” kompresuje pliki JPEG). Popularne formaty obrazów mogą mieć wiele wtyczek do wyboru.
Najważniejszym czynnikiem, który należy wziąć pod uwagę przy wyborze wtyczki, jest to, czy jest ona „stratna” czy „bezstratna”. W przypadku kompresji bezstratnej nie dochodzi do utraty danych. Kompresja stratna zmniejsza rozmiar pliku, ale może to wiązać się z ograniczonym spadkiem jakości obrazu. Jeśli rozszerzenie nie określa, czy jest „stratne”, czy „bezstratne”, możesz to sprawdzić w interfejsie API: jeśli możesz określić jakość obrazu wyjściowego, jest to „stratne”.
Większość osób woli wtyczki z stratą. Zapewniają one znacznie większe oszczędności miejsca na dysku, a poziomy kompresji możesz dostosować do swoich potrzeb. W tabeli poniżej znajdziesz popularne wtyczki Imagemin. To nie jedyne dostępne wtyczki, ale wszystkie z nich będą dobrym wyborem w Twoim projekcie.
Format obrazu | Wtyczki Lossy | Wtyczki bezstratne |
---|---|---|
JPEG | imagemin-mozjpeg | imagemin-jpegtran |
PNG | imagemin-pngquant | imagemin-optipng |
GIF | imagemin-giflossy | imagemin-gifsicle |
SVG | imagemin-svgo | |
WebP | imagemin-webp | imagemin-webp |
Interfejs wiersza poleceń Imagemin
Narzędzie wierszowe Imagemin współpracuje z 5 różnymi wtyczkami: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant i imagemin-svgo. Imagemin używa odpowiedniego wtyczka na podstawie formatu obrazu wejściowego.
Aby skompresować obrazy w katalogu „images/” i zapisać je w tym samym katalogu, uruchom to polecenie (zastąpi ono oryginalne pliki):
$ imagemin images/* --out-dir=images
Moduł npm Imagemin
Jeśli chcesz używać Imagemin z bundlerem, sprawdź, czy wybrany przez Ciebie bundler ma dostępną wtyczkę. Na przykład webpack to popularny pakiet, który świetnie obsługuje Imagemin. Więcej informacji o tym, jak używać Imagemin z Webpackiem, znajdziesz w tym ćwiczeniu w Codelabs.
Możesz też użyć Imagemin jako skryptu Node. Ten kod korzysta z wtyczki „imagemin-mozjpeg”, aby skompresować pliki JPEG do jakości 50, gdzie „0” to najgorsza opcja, a „100” to najlepsza:
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);
})();