 Witam serdecznie. Dzisiaj opowiem o optymalizacji obrazków, ale bardziej o stony praktycznej. Na początku musimy zdać sobie sprawę z tego, że optymalizacja obrazków jest jednym z etapów optymalizacji całej witryny internetowej. Część osób, która się do mnie zgłasza, liczy, że w sytuacji, kiedy ma słaby hosting, źle zoptymalizowany motyw, mnóstwo wtyczek, liczy na to, że zoptymalizowanie obrazków sprawi cuda. Nie sprawi, bo to jest proces złożony. Jednak jest to etap bardzo ważny. Ta prezentacja jest dopełnieniem prezentacji, którą miałem przyjemność wygłosić w tym roku w Gliwicach. Tam opowiedziałem o tym, o strony bardziej teoretycznej, porównując różnego rodzaju formaty obrazków. Dzisiaj tą wiedzę teoretyczną przełożymy na praktykę i zrobimy z tego rodzaju case study. Zaczynajmy. Zastanawiałem się, w jaki sposób najlepiej pokazać optymalizację obrazków i użyłem do tego celu gotowego motywu Newsmatic. Motyw ten umożliwia importowanie demo i tak też uczyniłem wybierając w wersję blog. Z tego względu, że są tam różnego rodzaju rozmiary obrazków. To jest istotne, bo gdybym wziął na przykład domyślny motywór pressach, gdzie mamy duże obrazki, to efekty optymalizacji byłyby bardzo duże. Chcemy pokazać to na przykładzie takim w miarę uniwersalnym, który ma zastosowanie na większości litry. To, co jest bardzo istotne, to fakt, że obrazki w tym demo są już bardzo mocno zoptymalizowane i są to obrazki w formacie JPG, a obrazki w formacie JPG ważą mniej w przypadku ubiegów graficznych, takich jak zdjęcia niż na przykład Piki.png. I samą stronę uruchomiłem na swoim serwerze dedykowanym, tak aby wyeliminować wąskie galbów w postaci słabej jakości hostiny. Więc na początek sprawdźmy, ile waży nasza strona internetowa. 1,72 MB, z czego 3, 4 to są same obrazki. Także tutaj widzimy, że potencjał do redukcji wagi jest duży, aczkolwiek musimy zdobyć sobie sprawę, że to wcale nie jest ciężka strona. Widziałem w życiu wiele stron, w którym obrazki ważą po 5 czy 10 MB. Jak będziemy te obrazki optymalizować? W tym celu wykorzystamy wtyczkę mojego autorstwa, z której aktualnie korzysta ponad 300 000 osób. Jak to wszystko zrobić? Na początku w katalogu wtyczek wpisujemy nazwę Konwerter for Media, instalujemy wtyczkę, przechodzimy do ustawień i naszym oczom ujrzy się panel ustawień, który mamy kilka opcji. W 99% przypadków nie musimy tych opcji modyfikować, ponieważ są tak stworzone, aby osoba nawet nietychniczna poradziła sobie bez tracenia czasu na konfigurację. Jeśli chcemy, możemy zmienić strategię konwertowania. Domyślna, czyli optymalna, zakłada redukcję wagi obrazka bez widocznej dla oka utraty jakości. Obrazki możemy konwertować do formatu WebP lub to formatu Avif, albo do obu tych formatów. Możemy też wybrać katalogi, z których obrazki będą optymalizowane. Domyślnie jest to katalog Apple, czy biblioteka multimedia, ale mamy też do wyboru inne katalogi. Domyślna aktywowana jest opcja, która sprawia, że nowo publikowane obrazki są konwertowane automatycznie. Czyli to, co musimy zrobić jako użytkownik, to de facto zainstalować wtyczkę, skonwertować istniejące obrazki, a wszystko później będzie się działo samo. Na stronie ustawień widzimy też listę plików, które możemy optymalizować. Wyspodziłem na katalog i razem z ilością plików. Pewnie część z Was zwróci o uwagę na to, że mamy bardzo dużo podobnych plików o podobnej nazwie. To jest standardowy mechanizm WordPressa, który sprawia, że kiedy przesyłamy jeden plik do biblioteki multimedia, automatycznie generowane są mniejsze rozmiary tego obrazka, dzięki czemu nasz motyw w miejscu, gdzie nie potrzebujemy dużego rozdzielczościowo zdjęcia, może załadować obrazek o mniejszym rozmiarze. Jednym przyciskiem uruchamiamy optymalizację i zbiorczą wszystkich naszych obrazków. Wspomniałem, że wtyczka obsługuje dwa formaty plików. Pierwszym z nich jest format webp, który powstał w 2010 roku. Został stworzony i rozwijany przez Google. Aktualnie ponad 95% przeglądarek wspiera ten format. Ze statysty użytkowników mojej wtyczki wynika, że pliki od PNG i PNG skondertowane do formatu webp ważą około 46% mniej niż ich oryginalne wersje. Drugi format, czyli format Aviv, powstał 10 lat później. Jest oparty o open source kodek, dzięki czemu jest rozwijany przez wiele niezależnych film, po raz pierwszy wykorzystał ten format Netflix. Aktualnie ponad 83% przeglądarek ten format wspiera i tutaj różnica po skonferatowaniu plików i od PNG i PNG do tego formatu to jest 70% mniej. Porównując te dwa formaty, przede wszystkim zyskujemy wyższy poziom kompresji, na poziomie około 45% mniej. Przy zachowaniu tej samej lub lepszej jakości obrazu to szczególnie widać w miejscach, gdzie mamy różną grę światów na zdjęciu. I kiedy uruchomiliśmy cały proces, czekamy odpowiednią ilość czasu, mamy podsumowanie i tak naprawdę to jest wszystko, co musieliśmy zrobić. Ale case study nie byłoby pełne, gdybyśmy nie sprawdzili efektów naszych działań i to będzie ta dłuższa część tej prezentacji. Wspomniałem o tym, że fyszka obsługije różne formaty, ale pewnie część z Was ucie o uwagę na to, że przy żadnym formacie nie powiedziałem, że jest wpierany przez 100% przeglądarek. I to jest prawda. Czy jest to problem? Nie, ale postaram się tak w miarę nie technicznie wytłumaczyć, jak to działa. Kiedy nasza przeglądarka próbuje pobrać obrazek wysyła na główek exec, w którym jako przedstawia się, jakie formaty obsługuje. Wtedy selber wie, że aha, ty obsługujesz taki format, to ci zwrócę taki i nie obsługujesz go, to zwrócę coś alternatywnego. W ten sposób, na początku sprawdzane jest, czy przeglądarka obsługuje format awiw. Jeśli tak, to otrzymuje odpowiednik oryginalnego obrazka w formacie awiw. Jeżeli nie, to sprawdzany, czy przeglądarka obsługuje format webp. Jeżeli tak, to otrzymujemy odpowiednik oryginalnego obrazka w formacie webp. Jeżeli nie mamy obsługi ani jednego, ani drugiego formatu, to wtedy ładowany jest oryginalny plik. Co to nam daje? Gdybyśmy użyli tylko i wyłącznie plików webp na naszej stronie, tylko i wyłącznie plików awiw, to istnieje ryzyko, że na starczy w przeglądarkach obrazek nie będzie działało w ogóle. Kiedy mamy taki mechanizm działania, zawsze obrazek będzie działał. Jak możemy sprawdzać efekty optymalizacji? Pierwszy sposób, jest troszkę bardziej techniczny, ale nadal postaram się go przedstawić prosto. Są narzędze dewelaperskie, które są dostępne w każdej przeglądarce. Ja to pokazuję na przypadku Google Chrome, ale w innych przeglądarkach jest to bardzo podobne do siebie. Na początku wyłączamy cache, ponieważ chcemy pobrać pliki z serwera, a nie z pamięci podręcznej. I tutaj pokazuje ograniczenie prędkości internetu do 10 megabitów. Musimy zdawać sobie sprawę z tego, że kiedy dysponujemy światłowodem i internetem prędkości 500 megabitów, to czystana będzie ważyła 10,20 i tak załaduje się szybko. Ale nie wszędzie mamy do dyspozycji światłowód, także tam przyda się lżejsza strona i mamy wybrany profil 10 megabitów i możemy przejść do zakładki z obrazkami, tak aby na liście załadowanych plików były widoczne tylko obrazki, no bo o nich mowa. Aby modyfikować wartość tego nagłówka XSEC, o którym wspomniałem, potrzebujemy rozszerzenia do Google Chrome, rozszerzenia modheader. Teraz w jaki sposób to funkcjonuje. Na początku zasymulujemy przeglądarkę, która nie wspiera ani formatu WP, ani formatu AV, czyli taką bardzo starą przeglądarkę. Możemy ten test też wykonać przed instalacją wtyczki, i wtedy nie potrzebujemy rozszerzenia modheader. Podajemy nagówek accept informując serwer, że obsługujemy dowolny typ obrazka. Dowolny typ nie oznacza obsługi WP ani AV, ponieważ te formaty muszą być jawnie wskazane w tym nagłówku. Mamy ustawione, i tak naprawdę odświeżamy naszą witrynę i widzimy 26 załadowanych plików w łącznej wadze 1,3 MB i czas załadowania tej strony to jest 1,8 s. Przypominam przy zablokowaniu prędkości internetu do 10 MB na sekundę. Teraz zróbmy drugi test, czyli taką przeglądarkę starszą, ale nie bardzo starą, która wspiera tylko format WP. Do wartości nagówka accept jawnie wskazujemy obsługę w formatu WP. I ponownie odświeżamy strony, widzimy 26 załadowanych plików. Coś się włączył. Widzimy ponownie 26 załadowanych plików, o łącznej wadze 1 MB. To co istotne to wtyczka nie zmienia adresów URL do obrasku, tylko zmienia się typ pliku, który jest zwracany. Tutaj widzimy w kolumnie type, format WP. Więc zredogowaliśmy uwagę obrasków od 30 MB i mamy z wywrócenie czasu ładowania do 1,4 s., czyli blisko 40 s. Na tym przykładzie widzimy, że mając dobrze zaoptymalizowany plik IOP po ich konwersji do formatu WP zyskujemy ponad 20% mniej. Na koniec symulujemy przeglądarkę która wspiera wszystkie z tych formatów i odświeżamy okno przeglądarki. Teraz już rozszerzeniem od header nie jest nam potrzebny, więc możemy wyłączyć albo odinstallować całkiem. Odświeżamy witrynę i ponownie 26 załadowanych plików, które tym razem ważą niecały 0,6 MB. W kolumnie type widzimy format AGIF i trzeba załadowania stony spadł do 1 s., czyli zyskujemy blisko 80 s. Na tym przykładzie. A więc sama waga obrasków spadła nam o 60% względem oryginalnych plików, które jak przypominam, były już zoptymalizowane. Dla osób, które nie chcą używać deftoolsów możemy też użyć narzędzia GT Matrix. Pierwszy test wykądujemy przed instalacją wtyczki albo, gdy jest ona wyłączona. Warto powtórzyć testy, ponieważ zwracają one czasami błędne wyniki, także jak ryzykujemy kilka testów, wyciągniemy średnią to mamy bardziej miarodajne porównanie. Pistujemy domenę i odgrychamy test. W tą myślnej zakładce, która jest pokazana na początku, wystarczy przestrolować w dół i widzimy sekcję ze szczegółami witryny. Waga stron 1,72 MB 1,3 to obrazki. To co istotne to lista wszystkich requestów. To jest jakby lista wszystkich plików, które są załadowane podczas przytywania witryny. To jest bardzo istotne, aby ta liczba jest taka sama, ponieważ czasami jest tak, że na przykład test za szybko się zakończył, ta lista plików jest mniejsza, więc ten wynik jest niemiarodajne. Zrobiliśmy jeden test, teraz mamy już wtyczkę zainstalowaną, obrazki są skonwertowane, możemy zrobić test drugi. Widzimy, że liczba plików to jest nadal 52. Waga fontów plików CSS, gdzie jest jest taka sama, bo ich jakby modyfikowaliśmy, czyli też jest miarodajne, ale zmieniła się waga obrazków. Były wyniki są takie same jak w DevTools'ach, to jest po prostu alternatywny sposób testowały. Ile więc waży strona po całej optymalizacji? Z 1,7 MB zeszliśmy do niecałego MB po konwersji obrazków, które wcale nie były w złym stanie. Z tego musimy zdawać sobie sprawy. Tak, na koniec kilka symulacji, ponieważ jakby w samym demo mieliśmy obrazki, które były fajnie zoptymalizowane i to działało całkiem nieźle, ale tak nie zawsze jest. Kiedy robimy stronę dla klientów, staramy się do pieścia, żeby ta strona była super fajna, taka naprawdę leciutka, we wszystkich testach 100x100, ale potem przychodzi edytor, który pracuje nad tą stroną, publikuje nowe treści i już niekoniecznie jakby ta optymalizacja z testów jest realizowana. To są wrzucane zdjęcia z telefonu, z aparatu, z internetu. Nikt się tym nie przejmuje, więc ta strona po dłuższym czasie egzystencji spada w tych wynikach. Pierwszą symulacją jest pobranie zdjęć z internetu i przepuściłem je przez narzędzie tajnie PNG, które jest darmowe, dość popularne, które umożliwia kompresję plików JPG i PNG. Te zdjęcia następnie wrzuciłem do biblioteki multimedriów i wymieniłem te wszystkie, które mieliśmy w demo, więc jakby liczba plików jest taka sama, ale to już są inne zdjęcia. I oryginalnie takie zdjęcia ważą nic ponad 2 MB. Kiedy jest konwertujemy do formatu WebP zyskujemy 20%, kiedy jest konwertujemy także do formatu Avif, zyskujemy ponad 60%. Simulacja druga, te same zdjęcia, ale zamiast tajniej PNG użyłem narzędzia, które ogranicza ich rozdzielczość do maksymalnych wymiarów 2000x2000 pikseli. Nie jako też jakby powodując kompresję, bo to jest jednak kolejne przetworzenie tego samego obrazka. W tym przypadku obrazki ważą 2,7 MB, a ich skonwertowanie do formatu WebP pozwala do 40%, a do formatu Avif ponad 70%. W symulacji numer 3 łączymy to, co robiliśmy w poprzednich dwóch, czyli najpierw zmniejszamy rozdzielczość obrazków, a potem przerzucamy je przez tajniej PNG. I tutaj waga obrazków to jest 1,7 MB. Kiedy skonwertujemy do formatu Avif zyskujemy blisko 1,4 wagi. Kiedy skonwertujemy także do Avif zyskimy ponad 60%. I symulacja 4, czyli przypadek klienta, który odebrał stronę i o optymalizacji obrazków nigdy nie słyszał. Czyli pobiera zdjęcia z Internetu, wrzuca z telefonu bezpośrednio, jakby nie myśli o tym, że wypadałoby optymalizować. Jakby też przypomnę to, co było wcześniej, czyli WordPress generuje mniejsze rozmery obrazków, czyli jak wrzucamy obrazek o jakieś potężnej rozdzielczości to to nie oznacza, że on wyląduje na naszej stronie, wyląduje obrazek, który już będzie zmniejszony przez WordPressa domyśli. Chyba, że mam bardzo straszny modów, no to wtedy nie, ale to są takie przypadki skrajne. Czyli jakby to są teraz te same zdjęcia tylko o optymalizacji obrazków wcześniej nie słyszeliśmy. No i tutaj waga to już jest blisko 8 MB. Czyli jest to już naprawdę dużo. Nawet przy w miarę szybkim czynęcie to będzie odczuwalne. Kiedy jest, konwertujemy do formatu WebP. Zyskujemy jedną trzecią wagę, kiedy do formatu Aviv ponad 70%. Wartości procentowe są do siebie dość podobne w poszczególnych symulacjach, ale tutaj zwrócicie proszę uwagę na różnice w megabajtach, bo jest ona znacząca i to będzie miało wpływ na szybkość naszej stronie. Pytanie tak na koniec, czy obrazki zawsze mogą ważyć mniej. Myślę, że tak, aczkolwiek każdy musi to sprawdzić na własnym przykładzie. Jakby musimy zdawać sobie sprawę z tego, że w momencie, kiedy posiadamy już obrazki, które są dobrze zoptymalizowane, to formaty nowej generacji, z racji tego, że są po prostu dużo nowsze i stworzone lepiej oferują większe możliwości, także warto z tego skorzystać. Na samej prezentacji było dużo zrzutów ekranu, które są z mojej strony formą instrukcji dla was, dlatego prezentację udostępniam, abyście mogli w zaciszu domowym powtórzyć to samo, co ja zrobiłem na demo, tylko teraz na własnej stronie. Dziękuję bardzo. Dzień dobry. Dziękuję. Kiedy zalecasz akcesy, to pokazują te cztery symulacje na końcu, bo ja używałem dokładnie tych samych obrazków i widzimy, że kiedy one były najpierw zmniejszone ich rozdzielczość, potem użytej tajni PNG, a potem jeszcze wtyczka, to są najlepsze efekty. Tylko pytanie, czy to chcemy, czy nie? Tylko pytanie, czy to chcemy, bo jednak użycie dwóch narzędzi wcześniej oznacza utratę jakość. Także opowiedź na twoje pytanie tak, warto je optymalizować przed publikacją i potem jeszcze użyć formatów nowej generacji. Okej. Dzień dobry. Cześć. Jak i sposób podmieniasz termulele? Wstajęmy zanurę do laska, ale w ten sposób samych adresów nie zmieniam. To jest niewidoczne przekierowanie realizowane poprzez reguły w kliku Hata Access albo poprzez reguły w konfiguracji Endings. Jakby zmienia się typ, adres URL się nie zmienia. Dzięki czemu nie ma problemu z tyczkami keszującymi, jeżeli byśmy np. nie tak, że wchodzimy z przeglądarki, i nasz, i zmieniamy adres URL, nasza wtyczka do kesz zapisze w skieszowanym HTML-u ten link, to kiedy wejdzie kolejna osoba, która nie ma obcinki tego formatu, miałaby nie działające obrazki. A kiedy adres URL są takie same, to bez względu, gdzie tego jakby adres URL użyjemy na stronie albo i poza stroną, to to będzie zawsze działać prawidłowo. Dopowiem też jeszcze, że jakby konfiguracja jest generowana automatycznie, bo takie są możliwości techniczne w przypadku serwerów Endings. W fakłów tyczki jest instrukcja, jak to należy zrobić, ponieważ z poziomu PHP'a my nie mamy jakby technicznej możliwości zmieniać konfiguracji serwerów. Jest, jest usługatyczne. Jedno konfiguracja, a jak w przypadku kompresji, czy w formatach istotniowych czy do czystość obrazków lub dużych gradientów, które przechodzą przez obok obrazków. W przypadku czystości nie ma żadnych problemów, to jest obsługiwane. W przypadku gradientów wiem, że są przypadki, w których w formacie webp widzimy delikatną utratę jakości, w formacie awi tego nie widać. I tu mówię ciągle o ustawieniach tych domyślnych tyczki, bo jeśli ktoś na przykład, nie wiem, jest fotografem zwraca uwagę na każdy piksel, to zawsze może sobie ustawić nieco lepszą jakość, kosztem wyższej wagi. Ale tutaj o pewne twoje pytanie, do takich celów lepszy jest format awi w ma sobie z tym radzi lepiej. Dzięki. Witamy. Cześć. W ten sposób, że jeżeli przepadek obsługuje format awi to wierzę awi, i że nie to nie powinna, i że nie to tylko obrazek, który jest wymyślany. Tak to działa do myśl. Dokładnie tak jak powiedziałbyś. W tej wyszczonej jedynie takiego klienta, który ma milion bez skala, ale dodał, jak jakaś liczba coś pomiszała z panem. Wydanie, czy masz czystość o obsługi dla pan z panem. Miałem przypadek osoby, która miała 27,5 miliona obrazków. Także jest to możliwe. Tylko jakby przez panel ustawiny twórzki, to będzie trwało długo. Do tego lepiej użyć WPCL i tutaj mamy Marcina, który podpowie każdemu, jak z tego skorzystać. Więc używając polecenia w konsoli, możemy to zrobić szybciej, niż przez okno przeglądarki. Ale bez problemu ta ilość obrazków będzie przetworzona. Także, co tym ma ci czyścić, jest już na warsztat. Jeszcze niech wydarzam, jest, jest, jest, mam czerwce takie, że mam twojej aplikacji od tego dnia i mam takie pytanie, bo mam wtyczkę jak w drugą? Większość wtyczek, która kompresuje pliki JPD czy PNG napisuje oryginalne pliki. Więc jakby to oznacza utratę jakości a zarazem, w momencie, kiedy tę wtyczkę odinstalujemy no to nasze oryginalne już nie są oryginalami. Tutaj jakby działa to tak, że to są tworzone dwa osobne pliki, więc oryginalne są nieruszone. Wzięty będzie ten plik nowszy, z tego względu, że ta wtyczka, bo zakładam, że korzystać w jakiejś popularnej wtyczki, ona używa huków wordpressowych w momencie, kiedy zmodyfikuje plik powinna użyć akcji moja wtyczka to wyłapuje i ten obrazek kompresuje. Także jakby wzięty pod uwagę będzie ten plik już zoptymalizowany przez inną wtyczkę. Czy warto robić jedno i drugie? To już zależy tak naprawdę od Ciebie czy chcesz tą jakość tracić na tym pierwszym etapie, czy chcesz te swoje oryginalne pliki jakby ich jakość tracić, no bo musimy zobaczyć sobie sprawę z tego, że format AWI UEP czyli ten słabszy, ale ma naprawdę duże wsparcie, więc tak naprawdę oryginalne pliki są bardzo rzadko tak. Super, wyczękaliśmy bardzo, bardzo ci dziękuję. Ja ciebie przyjadę, że tutaj jest wtyczka z tego systemu, ale przyjadę, że zuptymalizowaliś kulibisma, która używa się. Zajęć te zuparania, która używa się. Światownie. Światownie. To jest odpowiedni moment, to jest kulibisma zmniejszający przytela specjalnie. To są tam pewne zadliki typograficzne, z oprogramiem, a tu są zobaczenie, zapytowałem, a teraz zapytowałem szabę D. To jest opracja? Tak. Jeszcze raz czytałem, to jest ok. Wtedy tak.