Kompresowanie obrazów za pomocą Imagemin

Katie Hempenius

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.

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