Optymalizacja zdjęć i grafiki na stronę www

Czy wiesz, że nawet jedno źle dobrane zdjęcie do strony internetowej może spowolnić stronę 40-krotnie i zniweczyć wszelkie działania UX oraz SEO jakie podjęliśmy? Nie żartuję. Stopień w jakim optymalizacja zdjęć ma wpływ na optymalizację całego serwisu www jest przeogromny.

Aby to zilustrować podam przykład. Wezmę pierwszy z brzegu projekt strony internetowej nad którym pracuję. Serwis internetowy średniej firmy będzie finalnie zawierał 9 unikalnych podstron. Ich waga razem z kodem CSS to 524KB. czyli ok. 0,5 MB. Natomiast jedno (oczywiście nieprawidłowo) dodane zdjęcie, może ważyć nawet 20MB! Czyli jedno zdjęcie dodane do jednej podstrony może „kosztować” w przepustowości łącza 40 razy więcej niż wszystkie inne zasoby serwisu internetowego załadowane na raz.

Jeżeli testujemy jakość stron internetowych, to pierwsze uwagi i ostrzeżenia jakie ukazują się naszym oczom to właśnie te związanie z optymalizacją zdjęć. Dlatego, jeżeli chcemy przyspieszyć stronę www, spełnić podstawowe wskaźniki internetowe i tym samym wesprzeć SEO, w pierwszej kolejności powinniśmy się zająć:

• formatami plików a szczególnie WebP,
• stopniem kompresji,
• doborem odpowiedniego rozmiaru,
• wykorzystaniu mechanizmu elastycznych zdjęć (srcset).

Temat jest mi bardzo bliski z dwóch powodów: Przychód z optymalizacji istniejących serwisów i sklepów internetowych już dawno przekroczył ten z ich projektowania i tworzenia. A po drugie, na studiach inżynierskich jako specjalność wybrałem grafikę komputerową i mam (przynajmniej tak mi się wydaje) solidne podstawy do napisania prostym językiem takiego artykułu, który mam nadzieję da wielu osobom wartość.

Uwaga: Artykuł jest pisany w oderwaniu od konkretnego CMSa i jest uniwersalny dla wszystkich stron. Jeżeli interesuje cię optymalizacja zdjęć w WordPress, kliknij w podlinkowany artykuł.

Po pierwsze: dobór formatu pliku

Format w rozumieniu informatycznym to sposób zapisu konkretnych treści.

Format BMP

Format BMP czyli innymi słowy bitmapa, jest formatem do zapisu grafiki rastrowej, czyli grafiki zawierającej informacje o poszczególnych pikselach jakie mają zostać wyświetlone.

Bez zastosowania opcjonalnej kompresji RLE bitmapa jest de facto piksmapą czyli każdemu pikselowi odpowiada stała wielkość zajmowanej pamięci.

Zaletą BMP jest fakt, że zapis i odczyt nie angażuje mocno zasobów procesora. Dlatego często jest używany jako format „przejściowy” w przetwarzaniu i np. w przechwytywaniu obrazu (po czym dane są konwertowane na odpowiednie formaty wideo).

Wadą BMP jest brak wydajnej kompresji co powoduje, że wszelkie grafiki (zarówno te proste jak i bardzo skomplikowane) zajmują dokładnie tyle samo miejsca a waga jest liniowo zależna od wielkości bitmapy czyli rozmiaru grafiki.

Zastosowanie w internecie:

jak można się domyślić, niestety żadne 🙂

Przykłady 320x320px (przytrzymaj, lub prawy przycisk i otwórz link w nowej karcie):
https://cdn.mansfeld.pl/wp-content/uploads/2018/09/przyklad-BMP-1-optymalizacja-zdjec-1.bmp
https://cdn.mansfeld.pl/wp-content/uploads/2018/09/przyklad-BMP-2-optymalizacja-zdjec.bmp
https://cdn.mansfeld.pl/wp-content/uploads/2018/09/przyklad-BMP-3-optymalizacja-zdjec-2.bmp
https://cdn.mansfeld.pl/wp-content/uploads/2018/09/przyklad-BMP-5-optymalizacja-zdjec-2.bmp
https://cdn.mansfeld.pl/wp-content/uploads/2018/09/przyklad-BMP-4-optymalizacja-zdjec-2.bmp
https://cdn.mansfeld.pl/wp-content/uploads/2018/09/przyklad-BMP-6-optymalizacja-zdjec.bmp

Rezultat BMP (grafika wyjściowa):

Jak nie trudno się domyślić wszystkie grafiki mają dokładnie ten sam rozmiar. Załóżmy że grafiki powyżej są oryginałami dzięki któremu będziemy porównywać kolejne przykłady.

1. Wnętrze: rozmiar: 300KB
2. Owoce: rozmiar: 300KB
3. Architektura: rozmiar: 300KB
4. Portret (studio): rozmiar: 300KB
5. Fotografia produktowa: rozmiar: 300KB
6. Logo (grafika): rozmiar: 300KB

Format PNG

Format PNG czyli (Portable Network Graphics) jak już sama nazwa wskazuje został zaprojektowany z myślą o zastosowaniu typowo sieciowym i optymalizacji zdjęć dla stron www. Jest to format grafiki rastrowej ale z wydajną i bezstratną kompresją, czyli wizualna jakość oryginalnego zdjęcia, które wykonuje fotograf lub grafiki jaką tworzy grafik w programie graficznym zostaje w pełni zachowana.

Bezstratna kompresja zdjęć bierze się stąd, że dane można „upchać” za pomocą działań matematycznych np. „AAAAAAAA” komputer może sobie zapisać jako 8xA. 8 znaków zamieniliśmy na 3, co oznacza, że tak prymitywnym algorytmem wymyślonym na szybko, zaoszczędziliśmy 62,5% miejsca. Zdjęcie zapisane w formacie PNG jest niejako „wyliczane” przez komputer a nie podane „jak na tacy” stąd zapis i wyświetlenie nieco bardziej angażuje procesor. Zdjęcia obsługują przezroczystość, tzw. kanał alfa oraz 48-bitową głębię kolorów. Obsługuje profile ICC, ICM oraz metadane EXIF.

Jest jeden kruczek w stosowaniu PNG na stronach internetowych. Bowiem, z oszczędnością miejsca mamy do czynienia wtedy, jeżeli w grafice występują odpowiednie, że tak powiem regularności. Czyli miejsca w grafice/zdjęciu gdzie mamy swego rodzaju „AAAAAAAA”.

Przy zapisie można wybrać opcję aby PNG było zapisane z przeplotem (interlaced), co powoduje, że wcześniej pokaże się nam zdjęcie gorszej jakości a w miarę postępu ładowania zdjęcie się będzie wyostrzać. To bardzo przydatna funkcja w przypadku stron internetowych.

Zaletą PNG jest przede wszystkim obsługa przezroczystości i oczywiście oszczędność miejsca przy zachowaniu oryginalnej informacji i jakość zdjęcia. Dodatkiem jest wspomniana opcja interlaced. Warto wspomnieć, że PNG nie jest obciążony żadnymi patentami.

Wadą PNG jest fakt, że zapis i odczyt nieco bardziej angażuje procesor (można to jednak całkowicie pominąć w kontekście stron internetowych) a przy bardzo skomplikowanych zdjęciach jak np. portret na nieregularnym tle, krajobraz lub szum – stopień kompresji jest niski, tzn zysk z jego stosowania jest mniej opłacalny.

Zastosowanie w internecie:

• rastrowe wykresy, grafy, proste ilustracje na regularnym tle (zachowując ostre krawędzie, dochodzi jednocześnie do sporej oszczędności miejsca)
• elementy nawigacji, np, strzałeczki, ikonki, które będą wykorzystywać przezroczystość
• logo i tym podobne „znaczki”, które mają mieć niczym nie skompromitowana jakość i mogą przy okazji wykorzystać przezroczystość

Przykłady  (możesz samodzielnie porównać rozmiar ściągając zdjęcie):

Rezultat kompresji PNG:

Wszystkie grafiki wyglądają dokładnie tak jak nasze idealne oryginały. Nawet jakbyśmy analizowali kolor piksela po pikselu. W rezultatach widać, że format PNG bez jakiejkolwiek straty jakości jest w stanie obniżyć wagę zdjęcia. Im prostsza do opisania kompozycja zdjęcia, tym oszczędność jest większa:

1. Wnętrze: rozmiar: 174KB
2. Owoce: rozmiar: 185KB
3. Architektura: rozmiar: 207KB
4. Portret (studio): rozmiar: 123KB
5. Fotografia produktowa: rozmiar: 43KB
6. Logo (grafika): rozmiar: 17KB

Format JPEG

Format JPEG (Joint Photographic Experts Group) to najczęściej wykorzystywany w powszechnym życiu format zapisu zdjęć. Jest to metoda optymalizacji zdjęć wykorzystująca niedoskonałość ludzkiego wzroku i postrzegania (np. tego, że ludzie szybciej dostrzegają drobne różnice w jasności niż drobnych różnic barw). Obniżenie rozmiaru danych jest tutaj wykonane za pomocą „kompresji stratnej”. Kompresja stratna to tak naprawdę zniszczenie zdjęcia i stworzeniu czegoś w rodzaju regularności tam gdzie ich tak naprawdę nie ma (stąd wytracenie pewnych szczegółów). Można się odważyć o porównanie, że JPEG tak kompresuje zdjęcia jak MP3 muzykę.

Algorytm w swojej implementacji korzysta zarówno z bezstratnych technik kompresji danych jak i stratnych, dlatego sam w sobie i tak jest stratny. Algorytm kompresji JPEG z z grubsza polega tym, że:

1. Obraz jest konwertowany z kanału RGB na jasność i chrominację (2 kanały barwy)
2. Następuje redukcja rozdzielczości barwnej (tzn, część kolorów jest zastępowana najbliższym odpowiednikiem)
3. Zdjęcie jest dzielone na bloki 8×8, wyciągane są z nich średnie i zamiast zapisywać dokładne kolory pikseli, zapisuje się średnie bloków oraz różnice pikseli wewnątrz tego bloku. Jest to tzw. dyskretna transformata kosinusowa (DCT).
4. Transformata kosinusowa (która jest de facto bezstratna) generuje wyniki zmiennoprzecinkowe dlatego następuje zaokrąglanie wyników.
5. Nie zapisujemy średnich wartości bloków ale tak naprawdę różnicę pomiędzy poszczególnymi blokami

Dodatkowo, przy każdym takim kroku gdzie tylko można, korzysta się z kompresji bezstratnej…

Stopień tego „zniszczenia” jest tym większy im więcej miejsca chcemy zaoszczędzić. Najlepiej zobaczyć to wszystko na przykładach poniżej.  Jakość 80% jest uważana za najlepszy punkt tzw. „sweet spot” będący kompromisem pomiędzy oszczędnością a utratą jakości przy zastosowaniu na stronach internetowych.

Nie jest to do końca prawda. Wszystko zależy też od stopnia skomplikowania zdjęcia. Zdjęcia kolorowe, typu vivid, z przejściami tonalnymi oraz intensywnymi kolorami szafiru i szmaragdu wymagają ustawienia lepszej jakości aby zachować podobny poziom szczegółowości zdjęcia.

JPEG też obsługuje profile ICC, ICM oraz metadane EXIF.

Zaletą JPEG jest przede wszystkim bardzo niski rozmiar plików. JPEG jest też bardziej „odporny” na skomplikowaną kompozycję dlatego nadaj się do wszelkich zdjęć. JPEG można zakodować z opcją progresywności „progressive”, polega to na tym, że podczas ładowania zdjęcia na stronach internetowych najpierw widzimy mało szczegółowe plamki i jest ono w miarę ściągania wyostrzane do pożądanego zdjęcia.

Wadą JPEG jest stratność jego kompresji. Jakby się tak zastanowić to teoretycznie patrzymy tak naprawdę na coś w rodzaju przybliżenia zdjęcia a nie na oryginał. JPEG nie obsługuje przezroczystości.

Zastosowanie w internecie:

• zdjęcia
• skomplikowane grafiki
• skomplikowane grafiki rastrowe z przejściami tonalnymi

Przykłady (możesz samodzielnie porównać rozmiar ściągając zdjęcia):

JPEG: Jakość zdjęcia 80%:

Rezultat kompresji JPEG

1. Wnętrze: rozmiar: 24,5KB
2. Owoce: rozmiar: 26KB
3. Architektura: rozmiar: 39KB
4. Portret (studio): rozmiar: 12,9KB
5. Fotografia produktowa: rozmiar: 10,2KB
6. Logo (grafika): rozmiar: 9,76KB

Nawet przy jakości 80% widać gołym okiem charakterystyczne dla JPEG ziarnistości, prostokąty na jednolitych powierzchniach oraz takie jakby „ziarenka” w pobliżu krawędzi a także zniekształcenia kolorów.

Porównanie 1:1 PNG vs. kompresja JPEG Stopień jakości: 10% (dla wyolbrzymienia efektu):

Zwróć szczególną uwagę na: podłogę pomieszczenia oraz przestrzeń pomiędzy szklankami.

Jak widać, nie warto znacznie obniżać jakości. Zdjęcia zostały znacznie pogorszone w stosunku do jakości JPEG 80% a zaoszczędziliśmy zaledwie pojedyncze kilobajty.

Format GIF

GIF (Graphics Interchange Format) – jest formatem do bezstratnej kompresji obrazu. Wiele programów nie wykorzystuje w pełni potencjału tego formatu, dlatego można spotkać się z tym, że zapisując zdjęcie do formatu GIF, obniżana jest rozdzielczość barw do 256 kolorów. Co de facto jest kompresją stratną (prawda jest taka że, jest to ograniczenie dla jednego bloku obrazu i wynika ze złej implementacji). GIF obsługuje dwustanową przezroczystość – nie obsługuje kanału alfa tak jak PNG (piksel jest przezroczysty albo nie). Do 2006 roku był obciążony patentami ze względu na wykorzystywanie algorytmu LZW.

Zaletą GIF jest fakt, że pozwala wykonać lekkie animacje, których podstawą jest grafika rastrowa oraz obsługuje przezroczystość. Animacje wykonane w GIF mają bardzo szerokie wsparcie ze strony przeglądarek ponieważ jest to format bardzo rozpowszechniony.

Wadą GIF jest mniejsza wydajność kompresji w porównaniu do formatu PNG, wiele programów obniża rozdzielczość barw do 256 kolorów.

Zastosowanie w internecie:

• modne ostatnio cinemagraph oraz animowane memy

Przykłady  (możesz samodzielnie porównać rozmiar ściągając zdjęcie):

Rezultat kompresji GIF:

1. Wnętrze: rozmiar: 63,8KB
2. Owoce: rozmiar: 55,2KB
3. Architektura: rozmiar: 62,5KB
4. Portret (studio): rozmiar: 43,6KB
5. Fotografia produktowa: rozmiar: 16KB
6. Logo (grafika): rozmiar: 5,5KB

Format WebP

Format WEBP to coś dla fanów idealnej optymalizacji zdjęć na stronę WWW. Jest formatem graficznym, rozwijanym przez Google. WebP pozwala na kompresję statycznych jak i animowanych obrazów. Jako jedyny format z pośród prezentowanych potrafi zapisywać w trybie stratnym i bezstratnym.

WebP jest formatem, który ma się stać otwartym standardem dla grafiki w Internecie. Google już od 2013 roku w swoich serwisach (Google Play, YouTube) używa tego formatu.

W wielkim skrócie, WebP łączy zalety PNG z zaletami GIF pozbywając się wad obydwu będąc dodatkowo bardziej wydajnym w kompresji stratnej w porównaniu z JPG!

Zaletą WebP jest obsługa przezroczystości z kanałem Alfa, możliwość animacji, lepsza wydajność kompresji w porównaniu do JPG porównując faktyczną jakość obrazu.

Wadą WebP jest niestety brak szerokiego wsparcia ze strony przeglądarek ponieważ jest to format stosunkowo niedawno opracowany bo w 2010 roku i niektórzy widocznie zazdroszczą tego formatu 😉 . Mała ilość programów graficznych obsługujących zapis do WebP też może zniechęcać (PhotoShop ma natywne wsparcie a GIMP wymaga instalacji dodatkowej wtyczki).

Na szczęście, wsparcie jest coraz szersze (nawet Jabłko coś już eksperymentuje z wprowadzaniem WebP) oraz istnieją wygodne konwertery online (link na końcu artykułu). W ostateczności, problem braku kompatybilności możemy rozwiązać za pomocą strategii stopniowego ulepszania czyli progressive enhancement. Czytaj więcej. Przykład dla WebP będzie wyglądał tak:

<picture> 
	<source type="image/webp" srcset="obrazek-300.webp 300w, obrazek-600.webp 600w, obrazek-800.webp 800w"> 
	<source srcset="obrazek-300.png 300w, obrazek-600.png 600w, obrazek-800.png 800w">
	<img src="obrazek.png" alt="Obrazek"> 
 </picture>

Przykłady  (możesz samodzielnie porównać rozmiar i jakość ściągając zdjęcie):

Rezultat kompresji WebP:

WebP dosłownie pozamiatał JPEG, zdjęcia dodatkowo nie mają charakterystycznych dla JPEG artefaktów, szczegóły przy normalnym użytkowaniu można uznać za porównywalne.

1. Wnętrze: rozmiar: 15,6KB
2. Owoce: rozmiar: 15,7KB
3. Architektura: rozmiar: 29KB
4. Portret (studio): rozmiar: 6,4KB
5. Fotografia produktowa: rozmiar: 5,5KB
6. Logo (grafika): rozmiar: 3,14KB

Formaty nowej generacji

Istnieją także inne formaty nowej generacji takie jak JPEG 2000 lub JPEG XR, o których możesz przeczytać w specjalnym artykule: formaty graficzne nowej generacji.

Po drugie: dobór wymiarów

Po formacie i kompresji przyszła pora na wymiary. Częstym błędem jest dołączanie zarówno zbyt dużych jak i zbyt małych zdjęć.

Dołączanie zbyt wielkich zdjęć

Dołączanie zbyt wielkich zdjęć jest bardzo szkodliwe i spowodowane najczęściej niewiedzą lub niestety lenistwem. Mimo, że wiele CMSów posiada już wbudowany mechanizm skalowania takich zdjęć, warto przed wysłaniem je sobie zmniejszyć. Ma to same zalety:

• zdjęcia będą wierniej odwzorowywać kolory, ponieważ wiele CMSów wytraca profil ICC przy skalowaniu zbyt dużych zdjęć (wina leży po stronie samplingu podczas używania np.funkcji imagecopyresampled() przez programistów w PHP)
• dodawanie zdjęcia będzie trwało krócej a praca w CMSie będzie łatwiejsza
• zdjęcia będą się szybciej ładować, w wyniku czego strona jest lepiej zoptymalizowano a w wyniku czego osiąga lepsze pozycje w wyszukiwarce!
• paradoksalnie, zdjęcie wygląda lepiej bo przeglądarka gorzej skaluje zdjęcia „na bieżąco” niż dowolny program graficzny
• oszczędzasz swój i użytkowników transfer jeżeli którykolwiek z was używa internetu mobilnego lub LTE
• ułatwiasz prace modernizacyjne i optymalizacyjne bo nawet jak CMS skaluje zdjęcia oryginały są przechowywane na serwerze co komplikuje życie przy przenoszeniu strony oraz wykonywaniu kopii zapasowych
• zdjęcia są mniej atrakcyjne dla tych co nielegalnie kopiują zdjęcia z twojej strony – np co za problem jeszcze raz wykorzystać zdjęcie stockowe, które zostało dołączone gdzieś w oryginale

Dołączanie zbyt małych zdjęć

Dołączanie do artykułów zbyt małych zdjęć to wręcz katastrofa dla wrażeń użytkownika. W dobie urządzeń elektronicznych, które posiadają ekran co najmniej Full HD a coraz częściej także 4K nie ma nic gorszego jak rozmazane, powiększone zdjęcie 🙂

Elastyczne / responsywne zdjęcia (Responsive Images)

Mechanizm elastycznych zdjęć to krytyczna metoda optymalizacyjna w czasach tworzenia stron wykorzystujących podejście Responsive Web Design. Polega to na dołączeniu do atrybutu img kilku wariatów obrazka za pomocą atrybutu srcset:

<img
   width="320"
   height="320"
   src="adres-url-obrazka-320x320.jpg"
   srcset="
      obrazek-486x486.jpg 486w,
      obrazek-640x640.jpg 640w,
      obrazek-1200x120.jpg 1200w,
      obrazek-1600x1600.jpg 1600w"
   sizes="(max-width: 486px) 100vw, 486px">

Zgodnie z podejściem mobile-first, w atrybucie src jest zamieszczony adres url grafiki o najmniejszym rozmiarze. Wraz ze wzrostem szerokości ekranu przeglądarka ładuje coraz większe zdjęcia. Serwując w danym momencie najmniejsze, które jednak zapewni najlepsze wrażenia wizualne. W ten sposób na komórce załaduje się  rozmiar 320×320 a na dużym laptopie 1600×1600. Dodatkowe rozmiary nie opóźniają wczytywanie się zdjęć na mniejszych urządzeniach (pomijając dodatkowe kilka znaków kodu HTML, które są pobierane przy renderowaniu strony).

Po trzecie: kod i semantyka

Atrybuty wymiarów, czyli width i height

Przeglądarka ładując zdjęcie nie wie jaki ono będzie miało rozmiar. Informując ją o tym unikasz „skakania” strony podczas kiedy kolejne zdjęcia się w pełni ściągają. To bardzo dobra praktyka pod kątem user experience oraz kolejny sygnał jakościowy dla wyszukiwarki.

Atrybut alt

To dzięki atrybutom alt wyszukiwarka jest o czym jest dane zdjęcie. W wyniku czego jest większe prawdopodobieństwo, że twoja strona pojawi się w graficznych wynikach wyszukiwania Google Images oraz w tych „zwykłych”:

Semantyczne nazwy plików

Podczas kiedy większość CMSów i systemów sklepowych nadaje nazwy z pieczątką daty typu „29387465.jpg” warto nadawać plikom zrozumiałe i naturalnie brzmiące nazwy. Np.  realizacja-domku-jednorodzinnego-we-wroclawiu-1.jpg

Ten prosty trik ma same zalety, podobne do tych, które niesie ze sobą stosowania atrybutu alt. Nie dość, że łatwiej jest zarządzać zdjęciami bezpośrednio na serwerze (bo można je sobie wyszukać po jakimś słowie kluczowym), to jeszcze przeglądarka pozycjonuje ten plik i cały artykuł na podobne frazy. Wiadomo, nie zalecam upychania słów kluczowych, aby artykuł nie posiadał znamion spamu ale warto wiedzieć, że opłaca się odpowiednio nazwać plik.

Przykład poprawnego kodu dla zdjęcia wklejonego na stronę czy sklep internetowy:

<img src="ścieżka/do-pliku/ze-zdjęciem/przyklad-poprawnego-zdjecia-1.jpg" alt="Przykład poprawnie wklejonego zdjęcia" width="160" height="160">

Opóźnienie ładowania zdjęć (lazy-load)

Chcemy przyspieszać a nagle coś opóźniamy? Tak! Lazy-load to technika wykorzystująca możliwość manipulacji obiektami DOM w JavaScript. Wykorzystuje ona fakt, że na ekranie nie widzimy od razu całej strony internetowej a jedynie jej wycinek – taki jaki mieści się na ekranie bez przewijania. Zdjęcia, których nie widać od razu mogą ściągnąć się dopiero po załadowaniu kluczowych elementów strony (takich jak fonty, style lub skrypty wpływające na wygląd nagłówka strony).

Czytaj więcej jak zaprogramować lazy-load.

CSS Sprites

Sprity CSS to stara technika optymalizacji zdjęć (używanych najczęściej jako tło) na stronach internetowych polegająca na tym, że jeden plik graficzny zawierał w prostokątach kilka grafik, które za pomocą manipulacji CSS były wycinane i umieszczane we właściwym rozmiarze.

Ta karkołomna technika ma wiele wad i nie ma sensu jej stosować w czasach HTTP/2.

Po czwarte: serwer

Kiedy umieszczamy na stronie www zdjęcie (a także pliki CSS albo skrypty JS) odwołując się do zewnętrznych zasobów warto skorzystać z kilku sztuczek, które spowodują dużo szybsze ładowanie się zawartości. O czym mowa?

Pamięć podręczna

Pamięć podręczna powoduje, że raz załadowane zdjęcie jest przechowywane na komputerze i ilekroć chcemy je wyświetlić nie pobieramy go na nowo ze strony tylko ładujemy wprost ze swojego dysku lokalnego. Przyznasz, że sprytnie jest to rozwiązane?

Jeżeli mamy serwer Apache a nasz hosting obsługuje .htaccess to wystarczy dodać do niego kod:

ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"

Dzięki temu informujemy przeglądarkę, by pobrała zdjęcie na serwer i nawet nie sprawdzała czy plik uległ zmianie przez równy miesiąc. Zdjęcia są zasobami statycznymi tzn. umieszczając je raz na stronie internetowej nie spodziewamy się, że będą ulegać dynamicznym zmianom.

Serwowanie statycznych zawartości

Dodatkowo, zasoby takie powinny być serwowane z serwerów multimediów, a ściślej z domen, które nie ustawiają domyślnie cookie zasada z YSlow: „Serve Static Content From a Cookieless Domain”. Jeżeli kiedykolwiek analizowaliście stronę w takich narzędziach jak GTMetrix, YSlow albo PingDom, to wiecie doskonale, że analizatory krzyczy o coś takiego i to zwykle z tego powodu nie mamy „stówy”. Rozwiązania mamy trzy:

1. Stworzyć własną domenę do przechowywania multimediów
2. Wykorzystać gotowe usługi takie jak CloudFlare
3. Wykorzystać usługę do przechowywania plików statycznych, np. S3 od Amazona i stamtąd serwować zdjęcia

Pierwsze rozwiązanie może być dość kosztowne, ponieważ wymaga w miarę dobrze konfigurowalnego serwera, którym nie wszyscy dysponujemy dlatego pominiemy ten punkt. Drugie rozwiązanie polega na zintegrowaniu naszego serwisu z CloudFlare – tutaj niczego nie trzeba robić, wszystko dzieje się automatycznie wystarczy wykupić usługę i przekierować DNSy na CloudFlare. Od tej pory pliki statyczne będą ładowane z serwerów należących do sieci CDN.

Trzecie rozwiązanie z S3 mimo, że jest dość pracochłonne, pozwala w miarę niskim kosztem cieszyć się z dobrodziejstw S3.

Dlaczego to takie ważne?

Wysyłanie dodatkowych danych cookie dla załadowania każdego zdjęcia to zmarnowany transfer i tym samym wydłużenie czasu potrzebnego na załadowanie. Zdjęcie wnętrza wysłałem na S3 i na zwykły serwer. Widać różnicę, to niby kilka milisekund ale pamiętaj że dotyczy to każdego pojedynczego zdjęcia i pliku z zasobami statycznymi:

Zdjecie serwowane ze „zwykłego” serwera trwa średnio 160ms natomiast z serwera plików 90ms:

Oczywiście, wysyłając pliki za pomocą S3 Management Console pamiętaj o ustawieniu nagłówków Cache-Control i Expires, bo w S3 nie mamy żadnego pliku .htaccess 😉 i aby przy okazji działań optymalizacyjnych nie zapomnieć o skorzystaniu z pamięci podręcznej przeglądarki, o którym pisałem wyżej (bo jest to o wiele ważniejszy punkt):

Jeżeli chcesz automatycznie wysyłać pliki na serwer S3 skorzystaj z mojego poradnika: Integracja Amazon S3 za pomocą AWS SDK w PHP. Jak już sięgamy po takie środki, warto zintegrować nasz S3 z usługą Amazon CloudFront. Mamy wtedy worek na dane i CDN w jednym miejscu.

Wydawałoby się, że umieszczenie zdjęcia na stronie internetowej nie powinno być za bardzo skomplikowane. Wręcz przeciwnie, ten przykład świetnie ilustruje jak bardzo interdyscyplinarna wiedza jest potrzebna nawet dla tak niepozornych zadań.

Nowy protokół HTTP/2

Nowy protokół HTTP/2 dodaje wiele funkcji, które wpływają na szybkość działania stron i wiele z nich dotyczy zdjęć. Zasoby nie są już kolejkowane, dzięki temu nie ma potrzeby stosować już techniki CSS Sprites czy oszczędzać każde pojedyncze zapytanie HTTP. Czytaj więcej o tym jak zainstalować, jak włączyć i jakie zalety ma HTTP/2 w osobnym artykule.

Podsumowanie

Prędkość działania strony oraz wrażenia użytkownika zależą w wielkim stopniu od tego w jaki sposób zoptymalizowano zdjęcia, grafiki i wszelkie ilustracje. Mam nadzieję że po przeczytaniu artykułu będziesz wiedzieć, że warto zmniejszyć zdjęcie przed wysłaniem go na serwer oraz kiedy stosować PNG a kiedy JPG z jakim stopniem kompresji. Nie bez znaczenia jeszcze są atrybuty, i kwestie związane z serwerem, które ułatwiają życie zarówno użytkownikom twojej strony jak i wyszukiwarkom internetowym.

Źródła:

• https://pl.wikipedia.org/wiki/Dyskretna_transformacja_kosinusowa,
• https://pl.wikipedia.org/wiki/Portable_Network_Graphics,
• https://pl.wikipedia.org/wiki/JPEG,
• https://pl.wikipedia.org/wiki/WebP,

Narzędzie online do konwersji zdjęć do formatu WebP:

• https://image.online-convert.com/convert-to-webp