Dzisiaj porozmawiamy o temacie bliskim i drogim mojemu sercu, czyli kompresji obrazu! Częściowo żartuję, ale jest coś dziwnie satysfakcjonującego w zmniejszaniu ogromnych procent rozmiaru pliku obrazu bez utraty jego jakości.

Inspiracją do napisania tego wpisu był bardzo popularny post na facebookowej grupie Beaver Builders. Właśnie nakręciłem samouczek wideo na temat włączania i używania nowego algorytmu Guetzli firmy Google w programie ImageOptim i byłem zszokowany wszystkimi innymi opcjami, z którymi wcześniej nie byłem zaznajomiony. W tym artykule omówimy kilka wskazówek i narzędzi do kompresji obrazów w Internecie.

Początkowa terminologia

Zanim przejdziemy głębiej, ustalmy wspólną terminologię.

JPEG, PNG, SVG – są to trzy najpopularniejsze typy plików graficznych w Internecie. W tym samouczku skupimy się głównie na plikach JPEG i PNG, ponieważ to one przynoszą największe korzyści z kompresji i optymalizacji.

Pliki JPEG są zwykle lepsze w przypadku obrazów o wysokiej jakości, takich jak zdjęcia i grafiki internetowe, które nie mają przezroczystości.

Pliki PNG świetnie nadają się do przechowywania ikon i logo oraz czegokolwiek, co wymaga przejrzystości. Pliki PNG można również znacznie zoptymalizować po wyjściu z programu Photoshop lub wybranego narzędzia do edycji grafiki.

Bezstratne i stratne – są to metody kompresji. Kompresja bezstratna oznacza, że ​​obraz nie straci na jakości. Dosłownie wcale. Wiąże się to z usunięciem metadanych z obrazu lub czegokolwiek, co nie wpływa na jakość.

Stratna oznacza, że ​​algorytm kompresji obniży jakość obrazu. Uzyskasz lepsze wyniki kompresji, ale poświęcisz jakość obrazu. Większość narzędzi do kompresji stratnej udostępnia suwak procentowy, dzięki czemu można wybrać równowagę między jakością a rozmiarem pliku.

Wskazówka: w przypadku dużych obrazów tła często nieco rozmazuję obraz lub dodaję nieprzezroczystą warstwę koloru na zdjęcie. Zmniejszenie szczegółów i/lub normalizacja kolorów to przyjemny wybór w stylu estetycznym, który znacznie zmniejsza rozmiar pliku. Możesz zobaczyć to w akcji na naszej stronie z ofertami pracy.

Jak bardzo należy kompresować obrazy?

Celem kompresji obrazu jest maksymalne zmniejszenie rozmiaru pliku bez utraty jakości. Jest to w równym stopniu sztuka, co nauka, a poziom „akceptowalnej jakości” będzie się różnić w zależności od sytuacji.

Studio fotograficzne prawdopodobnie będzie chciało podkreślić swoją pracę w najwyższej jakości, podczas gdy witryna internetowa poświęcona nieruchomościom może być skłonna poświęcić jakość w zamian za wyświetlanie większej liczby zdjęć na stronie.

Większość programów do edycji obrazów umożliwia eksportowanie obrazów o różnej jakości. Chociaż jeśli używasz dedykowanego narzędzia do kompresji obrazu, czasami najlepiej jest zapewnić temu oprogramowaniu najlepszą możliwą jakość i pozwolić, aby algorytmy kompresji działały na tym poziomie.

Opcje narzędzi do kompresji obrazu

Jak niedawno odkryłem, nie brakuje opcji, jeśli chodzi o narzędzia i usługi do kompresji obrazu.

ObrazOptym

Zacząłem od ImageOptim i nadal wolę. ImageOptim jest dostępny tylko w systemie OSX, ale obsługuje kompresję stratną i bezstratną zarówno dla plików JPEG, jak i PNG. Można go również skonfigurować tak, aby korzystał ze stosunkowo nowego algorytmu kompresji Google, Guetzli. Guetzli może zmniejszyć rozmiar plików średnio o 20–30% więcej niż inne algorytmy.

ImageOptim to program znajdujący się w Docku komputera Mac. Możesz po prostu przeciągnąć i upuścić obrazy na ikonę programu, a on je skompresuje. Zwykle optymalizuję jeden lub dwa obrazy na raz, więc to rozwiązanie świetnie się dla mnie sprawdza. Jeśli jednak pracujesz nad dużą liczbą obrazów lub obrazami o dużych rozmiarach plików, niektóre inne opcje mogą być lepszym wyborem w przypadku dużych zadań.

Smush od WPMU Dev

Smush to bezpłatna wtyczka WordPress od WPMU Dev, którą można skonfigurować tak, aby optymalizowała istniejące obrazy w instalacji WordPress i/lub podczas przesyłania ich do WordPress. Smush jest świetny, ponieważ całą pracę wykonują serwery WPMU Dev, które optymalizują i zmieniają rozmiar obrazów.

Jeśli tworzysz strony internetowe dla klientów — szczególnie tych, którzy lubią przesyłać wielomegabajtowe obrazy prosto ze swojego aparatu cyfrowego — Smush to świetna opcja, którą można ustawić i zapomnieć.

Mały PNG

TinyPNG to internetowy kompresor obrazu. Możesz przesłać swoje obrazy (do 5bm) i pobrać wersję skompresowaną. Spowoduje to zużycie przepustowości, więc może nie być najlepszą opcją, jeśli korzystasz z wolnego lub płatnego połączenia internetowego. Obsługuje typy plików JPEG i PNG. To nic nie kosztuje. Wygląda na to, że nie zapewnia żadnej kontroli nad poziomem jakości kompresji.

Po zabawie z TinyPNG myślę, że nadal wolę ImageOptim, ale byłaby to świetna opcja dla użytkowników systemu Windows, szybkich, jednorazowych zadań lub użytkowników, którzy specjalnie szukają kompresora internetowego. Lub, jeśli próbujesz przenieść przetwarzanie do chmury na maszynę lokalną.

Wyobraź sobie

Imagify to kolejna internetowa opcja SASS, która zapewnia dedykowaną wtyczkę WordPress do optymalizacji i zmiany rozmiaru obrazów podczas ich przesyłania lub bezpośrednio z obszaru administracyjnego WordPress. Wtyczka Imagify WordPress może pochwalić się imponującą średnią oceną 4,5 gwiazdki, a w wielu recenzjach zauważono, że jakość obrazu osiągnięta dzięki Imagify jest lepsza niż w przypadku alternatywnych rozwiązań.

Imagify ma bezpłatny plan, który umożliwia przesyłanie i optymalizację obrazów o rozmiarze poniżej 2 MB. Zoptymalizowana wersja obrazów będzie dostępna do pobrania z ich serwerów przez 24 godziny.

JPEGMini

JPEGMini to usługa SASS, która powinna spodobać się osobom poszukującym rozwiązania, które nie wymaga pracy. Wyobraź sobie, że masz za zadanie zoptymalizować dziesiątki tysięcy zdjęć produktów w wysokiej rozdzielczości dla sklepu eCommerce. JPEGMini umożliwiłby przeniesienie całego przetwarzania na prawdopodobnie szybkie i zoptymalizowane serwery w chmurze.

Krótki piksel

ShortPixel to kolejny internetowy SASS. Jeśli chcesz przenieść kompresję obrazu na serwer w chmurze, jest to świetna opcja do wypróbowania. Ich bezpłatny plan pozwala zoptymalizować do 100 zdjęć miesięcznie, a plany premium zaczynają się od 5 USD miesięcznie za więcej. ShortPixel ma również wtyczkę WordPress i jest ulubionym narzędziem reszty zespołu BB.

Wyobraź sobie

Jaki jest twój ulubiony?

Jeśli odwiedzisz oryginalny wątek na Facebooku, który zainspirował ten post, zobaczysz kilka innych opcji i ludzi, którzy wolą jedną lub drugą z różnych powodów. Czy brakuje nam Twojego ulubieńca? Daj nam znać w komentarzach, co to jest i dlaczego Ci się podoba.

Ponadto jeśli należysz do osób, które jedzą, śpią i oddychają wydajnością, ten wywiad z Jonem Brownem na temat nowoczesnych najlepszych praktyk związanych z wydajnością prawdopodobnie przypadnie Ci do gustu.