Jak zmniejszyć rozmiar zdjęcia? Czyli kilka słów o kompresji i optymalizacji wagi zdjęć!

Każdego dnia przeglądamy w internecie tysiące zdjęć – od śmiesznych kotów, po fotografie ślubne czy w celu kupna ulubionej odzieży. Wzrokiem wybieramy produkty, usługi i artykuły na stronach internetowych. Dobre zdjęcie jest nieodzownym aspektem marketingowym – a w branżach „wizualnych” jest to wręcz kluczową kwestią zakupową. Ale czy dobre zdjęcie musi zajmować dużo miejsca na twoim dysku? Przekonajmy się!

Wstęp czyli dlaczego warto zmniejszać wielkość zdjęć poprzez kompresje

Każdy sklep internetowy czy fotograf dąży do tego by jego zdjęcia, były w jak najlepszej jakości i rozdzielczości, jednak większość właścicieli stron www nie zdaje sobie sprawy z tego, że ich zdjęcia są ogromne i mogą wczytywać się dla użytkownika nawet kilkanaście sekund – a duże zdjęcie nie jest wcale synonimem super jakości!

59,80 procent wszystkich odsłon www w Polsce pochodziło z ruchu mobilnego – smartfonów i tabletów!
Dane Statcounter
Luty 2019 rok

Co oznaczają te dane? Użytkownicy mobilni nie zawsze posiadają szybki internet. Przeglądają internet w autobusie, pociągu, innym środku transportu. W ich przypadku optymalizacja zdjęć poprzez kompresje stratną jest kluczowa, by uzyskać konkretny wynik biznesowy z ruchu mobilnego.

Wyszukiwarka Google a optymalizacja zdjęć

Prędkość strony jest jednym z czynników rankingowych, który ustala pozycje strony www w wyszukiwarce. Kompresja jest kluczowym, łatwym do zrealizowania elementem, który może przynieść ogromny zysk poprzez zmniejszenie wagi zdjęć na twojej stronie internetowej. Nie wierzysz? Zobacz różnicę pomiędzy współczynnikiem odrzuceń twojej strony internetowej przed i po optymalizacji zdjęć!

Oprócz szybszego wczytywania się strony serwer, na którym znajduje się twoja strona, wygeneruje mniej transferu danych – tym samym, jeżeli masz limit transferu w planie hostingowym to identyczny hosting, pozwoli Ci na obsługę większej liczby klientów i internautów.

Jak dobrze zmniejszyć rozmiar pliku zdjęcia?

Pierwszym pytaniem przed optymalizacją zdjęcia, które musisz sobie zadać, jest to czy wybierasz opcje kompresji bezstratnej, czy kompresji stratnej. Drugim pytaniem jest jaki format zdjęcia – jpg, png, gif, webp, jfif wybrać do jakiego zdjęcia? Formatów zdjęć jest bardzo dużo i zostaną one opisane w oddzielnym artykule blogowym.

Po odpowiedzi na te dwa pytania należy zadać sobie ostateczne pytanie – ile jesteś w stanie poświecić jakości celem uzyskania lepszej kompresji zdjęcia? Jeżeli nie chcesz myśleć nad tymi pytaniami – po prostu ściągnij odpowiedni program, wykonaj kopię zapasową zdjęć, skompresuj je aplikacją i porównaj wyniki oraz jakość.

W skrócie: Kompresja zdjęć dzieli się następująco::

• Kompresja bezstratna oznacza zmniejszenie wielkości zdjęcia bez straty jakości za pomocą użycia lepszych algorytm przechowującej dane dotyczące pikseli w pliku.
• Kompresja stratna oznacza zmniejszenie rozmiaru kosztem jakości zdjęci. Zdjęcie nie jest tak ostre, jak przed kompresją, a w zależności od procentu kompresji może być również nieczytelne i rozmazane, ewentualnie z mniejszą liczbą kolorów!

Kompresja stratna – mimo nazwy niekoniecznie oznacza widoczną utratę jakości!

Bazując na moim doświadczeniu, zdjęcie jpg skompresowane do 75%* nie posiada utraty jakości wizualnej i jest bez różnicy dla internautów* i zostanie to udowodnione w przykładzie znajdującym w artykule!

Jak nie ma różnicy to po co przepłacać? Porównanie jakości zdjęcia do ich rozmiaru!

Poniższe zdjęcie oraz porównanie pokazuje, dlaczego warto zmniejszać zdjęcia poprzez użycie odpowiedniej kompresji. Aktualne algorytmy i nowe formaty plików graficznych pozwalają znacząca ograniczyć wagę plików na twojej stronie internetowej.

Krok po kroku – aplikacje do kompresji zdjęć i jak z nich korzystać

Poniższe narzędzia pozwalają na zmniejszanie wagi (rozmiaru) zdjęcia poprzez kompresje zdjęć w formacie JPG, PNG, oraz animacji GIF. W zależności od wybranej opcji możliwa jest kompresja bez utraty jakości, jak też z ich stratą. Klikając w logotyp bądź nazwę dowiesz się więcej na temat konkretnego narzędzia.

Aplikacje konsolowe są przeznaczone dla użytkowników zaawansowanych, dla osób początkujących bądź mniej interesujących się zagadnieniami technicznymi zalecam korzystanie ze stron internetowych, bądź aplikacji posiadających instalacje w postaci pliku instalacyjnego systemu Windows.

Programy i aplikacje do zmniejszania wielkości zdjęć bez utraty jakości, bądź z kompresją stratną
Aplikacje oznaczone 🔥 polecam dla początkujących do kompresji i optymalizacji zdjęć.

Nazwa	Krótka informacja	Zastosowanie i Możliwość?
ImageOptim (Mac) / File Optimizer (Windows)🔥 (Aplikacje)	FileOptimizer kompresuje również już skompresowane pliki bez zmiany formatu pliku i jest całkowicie kompatybilny. Zachowuje nienaruszone zachowanie pliku, ale dzięki zmniejszeniu jego rozmiaru dzięki kilku technikom rekompresji i optymalizacji	✔️Automatyczna optymalizacja przez kilkanaście algorytmów ✔️ Wspiera bardzo duża ilość formatów graficznych jak i filmowych a nawet pliki stron internetowych! ✔️ Kompresja dowolnej ilości plików nie tylko graficznych
Squoosh (Strona WWW)🔥	Narzędzie do optymalizacji zdjęć o przeznaczaniu do wykorzystania w Internecie	✔️ Pojedyncze zdjęcie ✔️Możliwość porównania dwóch ustawień
(Strona WWW)🔥	Narzędzie umożliwia sprawdzenie prędkości wczytywania się danego URL oraz generuje skompresowane elementy (js, css, grafiki)	✔️Pojedyncza strona internetowa (adres URL) ✔️ Kompresja plików znajdujących się na stronie internetowe
pngquant (Aplikacja bash)	Pngquant to biblioteka do kompresji stratnej obrazów w formacie PNG. Jest one wykorzystywane przez wiersze poleceń (bash). Pngquant znacząca zmniejsza rozmiary plików (nawet do 70%) oraz zachowuje kanał przezroczystości.	✔️Optymalizacja plików PNG (kompresja automatyczna) ✔️ Kompresja plików znajdujących na dysku, serwerze (ssh)
(Aplikacja bash)	MozJPEG redukuje rozmiary plików obrazów JPEG, zachowując jednocześnie jakość i kompatybilność zdjęć. Można go zastosować do dowolnego pliku JPEG (z jpegtran), aby bezstratnie zmniejszyć rozmiar pliku.	✔️Optymalizacja plików JPG, JPEG (kompresja automatyczna) ✔️ Kompresja plików znajdujących na dysku, serwerze (ssh)
Ezgif.com/optimize/ (Strona WWW)🔥	Ezgif.com to prosty serwis internetowy zawierający zestawy narzędzi do kompresji i edycji plików GIF, JPG, PNG, WebP, APNG. Możesz tworzyć, zmieniać rozmiar, przycinać, odwracać, optymalizować i stosować niektóre efekty do obrazów i animacji	✔️Kompresja plików graficznych ✔️Konwersja formatów ✔️ Kompresja pliku z dysku twardego lub adresu URL
Libwebp (Aplikacja bash)	Kodek WebP: biblioteka do kodowania i dekodowania obrazów w formacie WebP. Ten pakiet zawiera bibliotekę, której można użyć w innych programach, aby dodać obsługę WebP, jak również narzędzia wiersza poleceń „cwebp” i „dwebp”.	✔️Optymalizacja plików PNG, JPG, GIF, MP4 (kompresja automatyczna) do formatu webP ✔️ Kompresja pliku, plików do formatu webP ✔️ Tworzenie animacji w formacie .webP
(Aplikacja bash)	Fmpeg to projekt wolnego oprogramowania składający się z ogromnego pakietu bibliotek i programów do obsługi wideo, audio i innych plików multimedialnych i strumieni. Przeznaczony jest do pracy z plikami video i audio w oparciu o wiersz poleceń	✔️ Optymalizacja plików MP4 ✔️ Konwersja plików do formatu MP4 (np. z gif) ✔️ Praca z plikami Video oraz GIF

Programy do zmniejszania rozmiaru zdjęcia i ich kompresji (optymalizacji)
Opisane poniżej aplikacje polecam – używam większości z nich przy pracy jako Specjalista SEO.

File Optimizer (Windows),
ImageOptim (Mac)

Automatyczna optymalizacja w łatwy sposób

File Optimizer to program komputerowy przeznaczony na systemy Windows, który polecam każdej osobie czytającej ten artykuł. Idealny do kompresji i łatwy w obsłudze, dodatkowo znacząca potrafi zmniejszyć wagę zdjęcia.

Aplikacja przetwarza plik graficzny przez wiele algorytmów (np. pliki png przez 16 aplikacji). Wystarczy dodać odpowiedni folder bądź pliki do programu i rozpocząć kompresje. Program jest dostępny na licencji open source i pozwala na optymalizacje ponad 50 formatów graficznych, audio, video, a nawet pdf! ImageOptim jest odpowiednikiem programu na systemy Mac.

GTMetrix

Optymalizacja prędkości z wygenerowaniem odpowiednich zdjęć.

Aplikacja w postaci strony internetowej, która rozpoczyna pracę po wejściu na adres URL podany przez użytkownika.

GTMetrix analizuje witrynę pod kątem prędkości i generuje wskazówki oraz zoptymalizowane pliki graficzne, które można pobrać i podmienić na serwerze FTP.

Jest to świetne rozwiązanie dla blogerów, którzy mogą sprawdzić, czy ich nowy wpis blogowy zawiera zdjęcia odpowiednio zoptymalizowane pod wyszukiwarkę internetową.

Squoosh

Jakość kontra kompresja – narzędzie idealne do sprawdzenia straty jakości.

Narzędzie Google, które pozwala na porównanie dwóch plików i wpływu optymalizacji na jakość. Pozwala na kompresje w najlepszym (moim zdaniem!) algorytmie MozJPEG oraz umożliwia zapis zdjęcia w formacie .webp.

Minusem aplikacji jest to, że zamiast korzystać z pngquant, korzysta z optipng – co nie daje najlepszej optymalizacji rozmiaru pliku w formacie .png. Aplikacja umożliwia kompresje pojedynczo zdjęcia – nie można masowo kompresować zdjęcia.

pngquant

pngquant w pliku wiersza poleceń.

75% mniej bez znaczącej różnicy jakości.

Najlepszy algorytm do kompresji obrazów w formacie png. Pozwala znacząca zmniejszyć rozmiar plików, zachowując przy tym format przezroczystości. Mimo że jest to kompresja stratna, to spadek jakości nie jest znaczący. Jeżeli masz program Adobe Photoshop to, jest możliwość instalacji oficjalnego plug-inu, który wprowadza funkcje zapisu za pomocą tego narzędzia. Umożliwia masowe zmniejszanie rozmiaru plików png.

Instalacja za pomocą linii poleceń (bash) na systemach uniksowych – sudo apt-get install pngquant

# Kompresja jednego pliku (tworzy się dopisek -fs8 do nazwy pliku)

pngquant pngquant-comparision.png

# Kompresja pliku - zysk

 136.0 KiB [ 75.6% ]  pngquant-comparision.png
 44.0 KiB  [ 24.4% ]  pngquant-comparision-fs8.png
   
# Kompresja wielu plików z nadpisaniem pliku kompresowanego

find . -name '*.png' -exec pngquant --ext .png --force 256 {} \;

#Wersja wielodzeniowa

find . -name '*.png' -print0 | xargs -0 -P8 -L1 pngquant --ext .png --force 256

#Jeżeli korzystasz z powłoki fish możesz wykonać, skompresuje to automatycznie pliki i doda rozszerzenie -fs8.png

pngquant **.png

#lub opcja z nadpisywaniem plikow

pngquant **.png --ext .png --force

MozJPEG i JPEG recompress

mozJPEG w wierszu poleceń

MozJPEG jest świetnym narzędziem do kompresji plików jpg, stworzonym przez firmę Mozilla. Jest w stanie obsługiwać pliki wejściowe bmp, ppm, jpg i targa. Instalacja jest problematyczna – należy pobrać odpowiednie repozytorium git i je skompilować. Umożliwia masowe zmniejszanie rozmiarów zdjęć jpg.

MozJPEG, jak i inne biblioteki korzystające z linii poleceń są przeznaczone dla osób, które potrafią zainstalować linie poleceń UNIX w systemie Windows lub korzystają z systemów uniksowych.

#Linie poleceń pochodzą ze strony 
#https://nystudio107.com/blog/installing-mozjpeg-on-ubuntu-16-04-forge
#https://guides.wp-bullet.com/batch-optimize-jpg-lossy-linux-command-line-with-jpeg-recompress/


#instalujemy odpowiednie pakiety by móc zbudować mozjpeg

sudo apt-get install cmake autoconf automake libtool nasm make pkg-config git

#pobieramy repozytorium z githuba

git clone https://github.com/mozilla/mozjpeg.git

# Rozpoczynamy konfiguracje kompilacji
cd mozjpeg
mkdir build && cd build
sudo cmake -G"Unix Makefiles" ../

# Instalujemy
sudo make install

# Nastepnie dodajemy alias do systemu
sudo ln -s /opt/mozjpeg/bin/jpegtran /usr/bin/mozjpeg

#Instalujemy JPEG Recompress, które korzysta z MozjPEG

sudo apt-get install bzip2
cd /tmp
wget https://github.com/danielgtaylor/jpeg-archive/releases/download/2.1.1/jpeg-archive-2.1.1-linux.tar.bz2 -O jpeg-archive.tar.bz2
tar -xf jpeg-archive.tar.bz2
sudo cp jpeg-recompress /usr/bin/jpeg-recompress
sudo chmod 755 /usr/bin/jpeg-recompress

#Wyszukiwane w folderze plików jpg, jpeg, JPG i automatyczna ich kompresja za pomocą MozJPEG

find $1 -type f -regex '.*\(jpg\|jpeg\|JPG\)$' -exec mozjpeg -copy none -outfile {} {} \;

#Kompresja za pomocą jpeg-recompress

jpeg-recompress -n 70 -x 73 --accurate -m smallfry photo.jpg image.jpg

# Przykładowe podsumowanie
Metadata size is 45kb
smallfry at q=71 (70 - 73): 99.460938
smallfry at q=72 (72 - 73): 99.533051
smallfry at q=73 (73 - 73): 99.577461
smallfry at q=74 (74 - 73): 99.751091
smallfry at q=74 (75 - 73): 99.751091
Final optimized smallfry at q=74: 99.750221
New size is 32% of original (saved 1844 kb)

EZGIF.COM

strona internetowa ezgif.com – optymalizacja online

Strona WWW umożliwiająca kompresje zdjęć i animacji do różnych rozszerzeń online! Pozwala oprócz kompresji na edycje i optymalizacje animacji gif. Przyjazny interfejs pozwala na łatwą optymalizację plików multimedialnych. Polecam ją dla osób początkujących.

Umożliwia: Stworzenie i optymalizacje animacji gif, konwersje formatu wideo do gif, zmniejszenie obrazu, jego kadrowanie, optymalizacje, dodanie efektów, tekstów i konwersje.

LibwebP

webp w wierszu poleceń

Jest to biblioteka do obsługi formatu WebP, która umożliwia konwersje plików graficznych i animacji do tego formatu bądź też dekodowanie z WebP do innego rozszerzenia. Libwebp można zainstalować w Ubuntu bezpośrednio z repozytorium komendą w terminalu: sudo apt-get install webp.

Po instalacji umożliwia skorzystanie z następujących komend: cwebp, dwebp, gif2webp, img2webp, vwebp, webpinfo, webpmux.

# kompresja z png do webp

cwebp -q 80 xQVgf0E9vH.png -o nazwa.webp 

# Przykładowy log przy generowaniu pliku .webp saving file 'nazwa.webp'

Saving file 'nazwa.webp'
File:      xQVgf0E9vH.png
Dimension: 890 x 504
Output:    35932 bytes Y-U-V-All-PSNR 43.81 44.23 44.69   44.01 dB
block count:  intra4: 741
              intra16: 1051  (-> 58.65%)
              skipped block: 813 (45.37%)
bytes used:  header:            417  (1.2%)
             mode-partition:   3818  (10.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       3%|      11%|      29%|      54%|    1792
      quantizer:  |      27 |      25 |      21 |      16 |
   filter level:  |       8 |       5 |       9 |      63 |
   
#Porównanie wielkości

36.0 KiB 	[ 20.0% ]		nazwa.webp
144.0 KiB 	[ 80.0% ]  		xQVgf0E9vH.png

FFmpeg

ffmpeg wiersz polecen z przykładowymi.. komendami

FFMpeg to pakiet programów i bibliotek do obsługi multimedialnych plików (od audio do video i grafik). Przetwarza pliki za pomocą linii poleceń – w Ubuntu instalacja odbywa się poprzez terminal za pomocą komendy sudo apt-get install ffmpeg.

#konwersja mov do mp4

ffmpeg -i example.mov example.mp4 

# Informacje na temat pliku

ffmpeg -i path/to/file.ext

# Konwersja plików .m4a do .mp3 (320k)

for f in *.m4a; do ffmpeg -i "$f" -acodec libmp3lame -vn -b:a 320k "${f%.m4a}.mp3"; done

# Konwersja video .foo do .bar

ffmpeg -i input.foo -vcodec bar -acodec baz -b:v 21000k -b:a 320k -g 150 -threads 4 output.bar

# Konwersja sekwencji zdjęć do filmu o formacie .ext

ffmpeg -r 18 -pattern_type glob -i '*.png' -b:v 21000k -s hd1080 -vcodec vp9 -an -pix_fmt yuv420p -deinterlace output.ext

# Połączenie filmu z plkiiem audio

ffmpeg -i video.ext -i audio.ext -c:v copy -c:a copy output.ext

# Wysłuchanie 10 sekund dźwieku z danego filmu

#
# -ss : start odtwarzania
# -t  : ile sekund
# -autoexit : automatyczne zamknięcie ffplay.

ffmpeg -ss 00:34:24.85 -t 10 -i path/to/file.mp4 -f mp3 pipe:play | ffplay -i pipe:play -autoexit

Pod­su­mo­wa­nie

Uwa­żam, że łatwość, z jaką można opty­ma­li­zo­wać zdję­cia, jest ele­men­tem, dla­czego warto ją sto­so­wać – wystar­czy zain­sta­lo­wać jedno z wyżej wymie­nio­nych narzę­dzi, bądź sko­rzy­stać ze stron online, które to umoż­li­wiają.

Pojem­ność danych można zmniej­szyć wie­lo­krot­nie bez zna­czą­cej utraty jako­ści. Warian­tów kom­pre­sji i algo­ryt­mów jest wiele, i naprawdę nie musisz iść w „maksa”, wystar­czy, cho­ciażby kom­pre­sja na 75% która może, spo­wo­do­wać spa­dek roz­miaru zdję­cia o 80% – spo­wo­duje to gigan­tyczne przy­śpie­sze­nie strony www dla inter­nauty!

Jeżeli posia­dasz sklep inter­ne­towy bądź stronę inter­ne­tową – i długo nad nią pra­co­wa­łeś to powin­nie­neś roz­wa­żyć opty­ma­li­za­cje. Auto­ma­tyczna kom­pre­sja może spo­wo­do­wać że twój fol­der prze­cho­wu­jący zdję­cia (np. fol­der uplo­ads w WordPress) zosta­nie dia­me­tral­nie zop­ty­ma­li­zo­wany. Moim rekor­dem jest odchu­dze­nie tego fol­deru z 20 GB do 11 GB.