Kompresowanie obrazów za pomocą Imagemin

Katie Hempenius

Dlaczego warto wziąć to pod uwagę?

Nieskompresowane obrazy zwiększają rozmiar stron o niepotrzebne bajty. Ponieważ obrazy mogą być kandydatami do największego wyrenderowania treści (LCP), te niepotrzebne bajty mogą zwiększyć czas wczytywania zasobu obrazu, co może skutkować dłuższymi czasami LCP.

Zdjęcie po prawej jest o 40% mniejsze niż to po lewej, ale dla przeciętnego użytkownika prawdopodobnie wyglądałoby identycznie.

Zmierz odległość

Uruchom Lighthouse, aby sprawdzić, czy można skrócić czas wczytywania strony, kompresując obrazy. Te możliwości są wymienione w sekcji „Wydajne kodowanie obrazów”:

Imagemin

Imagemin to doskonały wybór do kompresji obrazów, ponieważ obsługuje wiele formatów obrazów i można go łatwo zintegrować ze skryptami i narzędziami do tworzenia. Imagemin jest dostępny jako CLI i moduł npm. Zasadniczo moduł npm jest najlepszym wyborem, ponieważ oferuje więcej opcji konfiguracji, ale interfejs wiersza poleceń może być dobrą alternatywą, jeśli chcesz wypróbować Imagemin bez pisania 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żniejszą rzeczą, którą 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 kosztem możliwego obniżenia jakości obrazu. Jeśli wtyczka nie określa, czy jest „stratna” czy „bezstratna”, możesz to sprawdzić za pomocą jej interfejsu API: jeśli możesz określić jakość obrazu wyjściowego, oznacza to, że jest „stratna”.

Dla większości osób najlepszym wyborem są wtyczki stratne. Oferują one znacznie większe oszczędności w rozmiarze pliku, a poziomy kompresji można dostosować do swoich potrzeb. W tabeli poniżej znajdziesz popularne wtyczki Imagemin. Nie są to jedyne dostępne wtyczki, ale wszystkie będą dobrym wyborem do Twojego projektu.

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 wejściowego.

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

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

Moduł npm Imagemin

Jeśli chcesz używać Imagemin z bundlerem, sprawdź, czy wybrany bundler ma dostępną wtyczkę. Na przykład webpack to popularny bundler, który doskonale obsługuje Imagemin. Więcej informacji o tym, jak używać Imagemin z webpackiem, znajdziesz w tym ćwiczeniu.

Możesz też używać Imagemin samodzielnie jako skryptu Node. Ten kod używa wtyczki „imagemin-mozjpeg” do kompresowania plików JPEG do jakości 50 (gdzie „0” to najgorsza jakość, 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);
})();