Kompresowanie obrazów za pomocą Imagemin

Katie Hempenius

Dlaczego warto wziąć to pod uwagę?

Nieskompresowane obrazy zawierają na stronie niepotrzebne bajty. Obrazy mogą być kandydatami do największego wyrenderowania treści (LCP), więc te niepotrzebne bajty mogą wydłużyć czas ładowania zasobów, co może przełożyć się na dłuższy czas LCP.

Zdjęcie po prawej jest o 40% mniejsze niż to po lewej, ale prawdopodobnie będzie wyglądać tak samo jak przeciętny użytkownik.

Zmierz odległość

Uruchom Lighthouse, aby sprawdzić możliwości poprawy wczytywania strony przez kompresję obrazów. Te możliwości są wymienione w sekcji „Efektywnie koduj obrazy”:

Obraz

Imagemin to doskonały wybór do kompresji obrazów, ponieważ obsługuje wiele różnych formatów obrazów i można go łatwo zintegrować ze skryptami kompilacji i narzędzi do kompilacji. Aplikacja Imagemin jest dostępna zarówno jako CLI, jak i moduł npm. Ogólnie najlepszym rozwiązaniem jest moduł npm, ponieważ oferuje więcej opcji konfiguracji, ale interfejs wiersza poleceń może być przydatną alternatywą, jeśli chcesz wypróbować Imagemin bez konieczności dotykania żadnego kodu.

Wtyczki

Oprogramowanie Imagemin opiera się 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żniejszą rzeczą do rozważenia przy wyborze wtyczki jest jej typ „strata” lub „bezstratna”. W przypadku kompresji bezstratnej żadne dane nie są tracone. Kompresja stratna zmniejsza rozmiar pliku, ale kosztem potencjalnego pogorszenia jakości obrazu. Jeśli wtyczka nie informuje, czy jest „stratna”, czy „stratna”, do tego można użyć interfejsu API: jeśli można określić jakość obrazu wyjściowego, będzie on „stratny”.

Dla większości użytkowników najlepszym wyborem są wtyczki stratne. Pozwalają one znacznie zmniejszyć rozmiar plików i można dostosować poziomy kompresji do swoich potrzeb. W tabeli poniżej znajdziesz popularne wtyczki Imagemin. Nie są to jedyne dostępne wtyczki, ale wszystkie mogą się przydać w Twoim projekcie.

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. Imagemin używa odpowiedniej wtyczki na podstawie formatu obrazu danych wejściowych.

Aby skompresować obrazy znajdujące się w katalogu „images/” i zapisać je w tym samym katalogu, uruchom to polecenie (zastąpi to oryginalne pliki):

$ imagemin images/* --out-dir=images

Moduł npm w Imagemin

Jeśli używasz jednego z tych narzędzi do kompilacji, kup moduły do Codemin dotyczące Imagemin za pomocą webpacka, przepchnięcia lub chrapania.

Możesz też użyć samej aplikacji Imagemin jako skryptu węzła. Ten kod korzysta z wtyczki „imagemin-mozjpeg” do kompresowania plików JPEG do jakości 50 (gdzie 0 oznacza najgorszą jakość, a „100” oznacza najlepszą):

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);
})();