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 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.

Zmierz odległość

Uruchom Lighthouse, aby sprawdzić, czy można poprawić wczytywanie strony przez skompresowanie obrazów. Te możliwości są wymienione w sekcji „Użyj efektywnego kodowania obrazów”:

Imagemin

Imagemin to doskonały wybór do kompresji obrazów, ponieważ obsługuje wiele formatów obrazów i łatwo integruje się ze skryptami i narzędziami do kompilacji. Imagemin jest dostępny jako CLI i moduł npm. Zazwyczaj moduł npm jest najlepszym wyborem, ponieważ oferuje więcej opcji konfiguracji, ale wiersz poleceń może być dobrą alternatywą, jeśli chcesz wypróbować Imagemin bez konieczności wprowadzania zmian w kodzie.

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 stratną kompresją. Zapewniają one znacznie większe oszczędności miejsca na dysku, a poziomy kompresji możesz dostosować do swoich potrzeb. Tabela poniżej zawiera listę popularnych wtyczek Imagemin. To nie jedyne dostępne wtyczki, ale wszystkie z nich będą dobrym wyborem w Twoim projekcie.

Imagemin CLI

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 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ą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 używaniu Imagemin z webpackem znajdziesz w tym CodeLab.

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