Dlaczego warto wziąć to pod uwagę?
Nieskompresowane obrazy zapełniają strony zbędnymi bajtami. Obrazy mogą być kandydatami do największego wyrenderowania treści (LCP), więc te niepotrzebne bajty mogą wydłużyć czas wczytywania zasobu obrazu, co może skutkować dłuższym czasem LCP.
Zdjęcie po prawej stronie jest o 40% mniejsze od zdjęcia po lewej, ale prawdopodobnie wygląda tak samo jak zdjęcie przeciętnego użytkownika.
|
|
|
|---|
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
Aplikacja Imagemin znakomicie nadaje się do kompresji obrazu, ponieważ obsługuje z różnymi formatami obrazów i można je łatwo zintegrować ze skryptami kompilacji narzędzi. Aplikacja Imagemin jest dostępna jako CLI i npm . Ogólnie moduł npm jest jest najlepszym wyborem, ponieważ udostępnia więcej opcji konfiguracji. dobry wybór, jeśli chcesz wypróbować Imagemin bez dotykania kodu.
Wtyczki
Narzędzie Imagemin opiera się na „wtyczkach”. Wtyczka to pakiet npm, który kompresuje w konkretnym formacie (np. „mozjpeg” kompresuje pliki JPEG). Popularne formaty obrazu może mieć wiele wtyczek do wyboru.
Najważniejszą rzeczą, jaką należy rozważyć przy wyborze wtyczki, jest to, czy jest ona „stratny” czy „bezstratny”. Kompresja bezstratna nie powoduje utraty żadnych danych. Strata kompresja zmniejsza rozmiar pliku, ale kosztem potencjalnej redukcji obrazu jakości. Jeśli wtyczka nie wskazuje, że jest „stratna” czyli „bezstratny”, Ty interfejs API: jeśli można określić jakość obrazu wyjściowego, jest „stratny”.
Dla większości użytkowników najlepszym wyborem są wtyczki stratne. Oferują znacznie pozwala zmniejszyć rozmiar plików i dostosować poziom kompresji, do Twoich potrzeb. Tabela poniżej zawiera listę popularnych wtyczek do Imagemin. To nie jedyne wtyczki ale dobrze sprawdzą się w przypadku Twojego projektu.
| Format obrazu | Lossy Wtyczki | 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
Interfejs wiersza poleceń Imagemin działa z 5 różnymi wtyczkami: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant i imagemin-svgo. Aplikacja Imagemin korzysta z odpowiedniej wtyczki na podstawie formatu obrazu dane wejściowe.
Aby skompresować obrazy w elemencie „images/” i zapisać je w tym samym katalogu, w katalogu, uruchom następujące polecenie (zastępuje oryginalne pliki):
$ imagemin images/* --out-dir=images
Moduł npm Imagemin
Jeśli używasz jednego z tych narzędzi, z Codelabs w przypadku Imagemin webpack, gulp, lub mruczeniem.
Możesz też użyć samej aplikacji Imagemin jako skryptu węzła. Ten kod wykorzystuje plik „imagemin-mozjpeg” wtyczka do kompresji plików JPEG do jakości z 50 („0” to najgorsza wartość, 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);
})();