 Ja temat optymalizacji obrazków dzisiaj postaram się rozwinąć. Wczoraj był na sesji Q&A, dzisiaj w troszeczkę szerszej formie. Ale na początku zadajmy sobie pytanie, dlaczego szybka strona jest nam w ogóle potrzebna? Pewnie każdy z nas ma w głowie taką sytuację, że wszedł na stronę, ta strona załadowała się bardzo szybko. Jesteśmy pozytywnie nastawieni i ogólnie chcemy na niej pozostać. Także szybka strona powoduje, że ludzie są zadowoleni, będąc na tej stronie. To też wiąże się z mniejszym procentem odrzuceń. Statystyki pokazują, że dłuższy czas ładowania strony powoduje, że więcej osób rezygnuje z zaczekaniem do czasu jej załadowania. Te dwa czynniki mają wpływ na pozycjonowanie strony internetowej. Mianowicie strona, która jest źle zoptymalizowana pod kątem wydajności, jest gorzej pozycjonowana przez Google, czyli nasza strona może znaleźć się w rankingu nieco niżej. Jak wygląda proces ładowania strony internetowej? Oczywiście opowiem o tym w dużym skrócie, bo nie starczyłoby nam czasu, mimo że mamy delikatny zapas. Na początku w pasku adresu wpisujemy domenę, serwę, zwraca nam kod HTML i przeglądarka zaczyna pobierać zasoby. PIC, CSS, JavaScript, obrazki i innego rodzaju inne multimedia. Na podstawie tych zasobów nasza przeglądarka renderuje finalną stronę, którą my widzimy w oknie przeglądarki. Skupmy się na tym drugim etapie, czyli pobieraniu zasobów. Co możemy zrobić, żeby to pobieranie zasobów było procesem krótszym? Możemy wybrać porządny serwer. Wśród naszych sponsorów mamy kilka takich firm, także każdy znajdzie coś dla siebie. Patrząc na drugą stronę, czyli prędkość internetu użytkowników naszego serwisu, na to nie mamy za bardzo wpływu. Trzeba mieć na uwadze to, że wiele osób korzysta z internetu w wersji mobilnej, gdzie internet jest słaby. Wiele osób korzysta na terenach mniej uzorybalizowanych, gdzie też ten internet jest o wiele wolniejszy. Co możemy zrobić jeszcze? Im mniej zasobów trzeba będzie pobierać, tym tak naprawdę ten proces będzie krótszy. I na to jako właściciele naszej strony internetowej mamy bardzo duży wpływ. Na potrzeby tej prezentacji przeanalizowałem 5 tysięcy stron internetowych na całym świecie, na WordPressie, od blogów poprzez strony internetowe, firm i różnego rodzaju sklepy. Z mojej analizy wynika, że blisko 40% wagi stron internetowych stanowią tylko obrazki. Na kolejnych miejscach jest kod JavaScript, CSS, kod HTML, fonty i innego rodzaju inne multimedia. Same pieki CSS i JavaScript oczywiście możemy optymalizować. Niemniej jednak jest to trudne, szczególnie dla osób nietechnicznych. Z uwagi na to, że strony na WordPressie często zbudowane są przy użyciu wielu wtyczek i w oparciu gotowej motywy. Te rozwiązania pomimo tego, że są proste w implementacji, jednak niosą ze sobą wiele konsekwencji takich jak nadmiar plików CSS i JavaScript. Natomiast optymalizacja obrazków jest procesem, który może zrobić dzisiaj każdy bez względu na poziom wtajemniczenia technicznego. Jakie formaty znamy, które są najpopularniejsze? Najstarszym formatem jest format GIF, który umożliwia bestratną kombresję obrazu. Standardowo pliki GIF ograniczone są do 256 kolorów. Oczywiście jest możliwe rozszerzenie tej palety, ale wtedy plik GIF waży na tyle dużo, że jego użycie raci sens. Najpowszechnie używane formatem jest format JPG, który wykorzystuje niedoskonałość naszej percepcji wzroku poprzez ujednoliconie sąsiadujących ze sobą pikseli. Kiedy dwa piksele mają taki sam kolor, to uwaga finalnie pliku może być mniejsza. Format ten nie nadaje się do plików, przy których zależy nam na jakość obrazu, ponieważ tekst oraz linie nie są ostre. Do takich zastosowań idealnie jest format PNG. Format ten radzi sobie znacznie lepiej z takimi elementami. Niemniej jednak pliki PNG są kilkukrotnie cięższe od plików JPG. Dlatego używanie plików PNG do zdjęć raczej nie ma za bardzo sensu. Trzymając te trzy formaty możemy pójść okrok do przodu. Oczywiście, że tak. W 2010 roku Google zaprezentował format webp. Format webp poprzez kilkanaście lat bytności w naszych przeglądarkach zyskał wsparcie ponad 97% przeglądarek. Mówiłem o 5 tysiącach stron, które przeanalizowałem. Z tych stron pobrałem obrazki, które znajdują się na stronach głównych tych serwisów. Te obrazki skonwertowałem do formatu webp. Przy użyciu jakości 85% to jakość jest bardzo istotna, ponieważ przy niej potencjalna różnica w jakości jest niezauważalna dla oka. I co się okazuje? Obrazki w formacie webp są o blisko 46% rzeszesze od obrazków w formacie JPG i PNG. Czyli 40% wagi strony to są obrazki, a my jesteśmy w stanie 46% z tego zredukować poprzez użycie formatu webp. Trzymając formatu webp to już jest wszystko, co możemy osiągnąć. Oczywiście, że nie. 10 lat później Netflix po raz pierwszy ogłosił użycie formatu Aviv. Format Aviv w porównaniu do formatu webp różni się tym, że jest zbudowany przy użyciu opensource-owych kodeków, przez co może być rozwijany przez wiele niezależnych firm. Format webp jest stworzony i rozwijany przez Google, także inne firmy mają na to mniejszy wpływ. Aktualnie format Aviv jest wspierany przez ponad 83% przeglądarek. Pewnie zapytacie, co z tymi się domnastoma, tym się nie martwmy, o tym opowiem kilka slajdów później. Te same obrazki, które skonwertowałem do formatu webp, skonwertowałem także do formatu Aviv. I tutaj różnica jest już o wiele większa. Te obrazki są o 70% lżejsze, czyli 40% wagie strony stanowią obrazki. My jesteśmy w stanie z tego 70% zedukować bez utraty jakości zdjęcia, czyli mniej więcej 30% wagii strony. Możemy bez problemu uciąć w bardzo prosty sposób. Dlaczego format Aviv jest lepszy od formatu webp? Przede wszystkim z uwagi na wyższy poziom kompresji obrazu. Obrazki w formacie Aviv są około 45% lżeś od obrazków w formacie webp, przy zachowaniu takiej samej lub lepszej jakości. Co do zasady, obrazki w formacie webp nie różnią się jakością, także ciężko oczekiwać, żeby Aviv było jeszcze lepsze. Bywają pewne niuanse, aczkolwiek można założyć, to jest ta sama jakość. Różnicą jest przede wszystkim znacznie mniejsza waga. I teraz jak możemy z tych formatów korzystać w naszym WordPressie? Oczywiście możemy obrazki optymalizować ręcznie przed publikacją ich Bibliotece Multimedia. Niemniej jednak każdy z nas szuka rozwiązań prostych. Chcemy, żeby wszystko się działo za nas, żeby działo się automatycznie. I tego samego oczekujemy od naszych stron. Dlatego moim zdaniem najlepszym rozwiązaniem jest użycie wtyczki. I dlaczego użycie wtyczki? Przede wszystkim dlatego, że wtyczka umożliwia dostęp do kilku formatów. Czyli jeden obrazek może być skonwertowany zarówno do formatu webp, jak i do formatu Aviv. Kiedy ręcznie optymalizujemy obrazki, wybieramy jeden format, którego korzystamy. Wtyczka to też jest proste rozwiązanie. Wiele osób, szczególnie nie technicznych, nie ma wiedzy na temat optymalizacji obrazków. Nie zna na dobrych rozwiązań, nie wie, w jaki sposób to zrobić. Wtyczka jedyne, czego potrzebuje, to jej zainstalowania i kliknięcia jednego przycisku. Po kliknięciu tego jednego przycisku wszystkie obrazki są optymalizowane automatycznie. Wtyczka jest też wygodnym rozwiązaniem, ponieważ raz zainstalowana pozwala o sobie zapomnieć, ponieważ wszystkie obrazki później są optymalizowane automatycznie w tle. Jakiej wtyczki użyć? Na rynku dostępnych jest kilka wtyczek, które umożliwiają optymalizację obrazu. Różnią się tym, że jedne dają dostęp tylko do formatu WebP, inne dają dostęp do formatu WebP oraz do formatu Aviv. Jedne są darmowe, inne płatne, jedne prostsze, w obstytku drugie bardziej zaawansowane. Ale którą wybrać? Na to nie ma jednej odpowiedzi, każdy ma swoje preferencje. Ja przed tym pytaniem stanąłem, które lata temu, kiedy również szukają wtyczki dla siebie i nie znalazłem żadnej, która spełniałaby moje oczekiwania. Dlatego jako programista napisałem swoją. Konwerter Formidia o tej wtyczce MOVA dzisiaj wykorzystywana jest na ponad 300 tysiącach stron internetowych na całym świecie. Obsługuje zarówno format WebP jak i format Aviv. To na czym mi zależało, kiedy przeglądałem inne wtyczki, to to żeby wtyczka była prosta w obsłudze dla każdego bez względu na to czy się znamy, czy się nie znamy na tym temacie. Jak działa wtyczka? Po jej zainstalowaniu jedyne co jako użytkownicy musimy zrobić to przejść do ustawień i uruchomić jednym kliknięciem zbiorom optymalizacji obrazków. Wszystkie obrazki będą zaoptymalizowane automatycznie, a te przyszłości publikowane będą konwertowane w tle. Wspomniałem, że żaden format ani WebP, ani Aviv tak naprawdę nie ma wsparcia 100% przeglądarek. Powiedziałem też, że to nie stanowi problemu. Powiem mi, jaki sposób działa wtyczka, albo jak moim zdaniem powinna działać wtyczka, która obsługuje kilka formatów. Rozwiązałem to w taki sposób, że wtyczka... Kiedy wchodzimy na stronę, przeglądarka próbuje pobrać obrazek. Wtedy wysyła na główek akcept, w którym informuje, jakie formaty graficzne wspiera. Wtedy wtyczka sprawdza, czy przeglądarka obsługuje format Aviv. Jeżeli obsługuje format Aviv, to wyświetlany jest odpowiednik oryginalnego obrazka w formacie Aviv, bo jest to nalżejszy format. Jeżeli natomiast jesteśmy jedną z tych 17% przeglądarek, wtedy sprawdzane jest, czy przeglądarka obsługuje format WebP. Jeżeli obsługuje, to otrzymuje odpowiednik oryginalnego obrazka w formacie WebP. Jeżeli natomiast jest to bardzo stara przeglądarka, która nie wspiera ani WebP, ani Aviv, nie musimy się tym martwić, ponieważ wtedy otrzymamy oryginalny obrazek w formacie JPG, PNG lub też GIF. Co to oznacza? Przede wszystkim to, że bez względu na to, z jakiej przeglądarki korzystamy, obrazek zawsze będzie działał. Gdybyśmy sformatowali wszystkie obrazki tylko do formatu WebP albo tylko do formatu Aviv, istnieje ryzyko, że na bardzo starych przeglądarkach to nie będzie działać, albo na klientach pocztowych. Przy takim modelu działania zawsze otrzymamy obrazkę, który jest możliwy najleższy i przede wszystkim działający. Słowem podsumowania. Zoptymalizowane obrazki oznaczają mniejszą wagę naszej strony. Natomiast mniejsza waga naszej strony oznacza szybsze jej wczytywanie. Używając najnowocześniejszych formatów obrazków, jesteśmy w stanie średnio 30% wagi strony zredukować, a to na pewno przełoży się najszybsze wczytywanie. A jakie są korzyści szybszej strony, to myślę, że każdy z nazwie chociażby z perspektywy użytkownika Internetu. Dziękuję bardzo.