Tag: obrazek

Co to właściwie znaczy „lazy load”? – Aby szybciej załadować stronę, ładowanie obrazków pozostawiamy na sam koniec, a właściwie na początek, ale już po załadowaniu całej strony. Brzmi może dziwaczenie, ale działa i mocno przyspiesza działanie witryny.

Z angielskiego „lazy load” – całe szczęście WordPress w wersji 5.4 wprowadził leniwe ładowanie do standardu z wykorzystaniem, zrozumiałego dla nowoczesnych przeglądarek, atrybutu loading="lazy", więc pozostaje nam przypilnowanie aby wszystkie wystąpienia obrazków miały zdefiniowaną długość (width) oraz wysokość (height) bo tylko wtedy atrybut loading będzie użyty.

Można oczywiście pokusić się o jeszcze agresywniejsze (choć nadal leniwe) ładowanie obrazków. Najmocniejszą, znaną mi metodą to wygenerowanie malutkiego podglądu 5×4 px pliku oraz zapisanie go jako meta, aby potem produkując stronę umieścić ten mikroskopijni plik, zakodowany metodą base64 jako źródło obrazka w HTML.

Gotowy plik obsługujący taką formą publikuję w moim repozytorium mu-wtyczek, który jest dostępny na gicie: iWorks WordPress MU Plugins, jako plik: iworks-aggresive-lazy-load.php

Jeżeli chcesz z niego skorzystać, to pobierz go i wrzuć do katalogu:

wp-content/mu-plugins

Co da wystarczająco dobrą integrację, natomiast do pełnej potrzeba dodatkowo pracy przy plikach motywu.

Wielkość przycinania

Niby tak prosta sprawa. WordPress pozwala ustawić 3 wielkości. Dodatkowo wtyczki i motyw za pomocą funkcji add_image_size()mogą dodawać dodatkowe rozmiary.

W celu sprawdzenia wszystkich zadeklarowanych wymiarów można skorzystać z poniższego kodu:

Optymalizacja w tym momencie polega na eliminacji wielkości leżących blisko siebie. Na przykład, jeżeli zostały użyte wymiary 600×400 oraz 620×400 – warto przejrzeć gdzie występują i zastąpić jeden z nich drugim – tak, żeby mieć tylko jeden z nich.

Wielkość (jakość)

Następną właściwością plików graficznych jest ich jakość. Szczególnie dotyczy to plików rastrowych. Więcej na ten temat można przeczytać w relacji z WordCampa: Obrazki – typy, optymalizacja, metody.

W skrócie – im wyższa jakość tym większy plik obrazka. Warto więc się zastanowić jaką jakość chcemy mieć. Jakość określamy liczbą od 1 do 100 – im większa liczba, tym wyższa jakość.

Do globalnej zmiany tego parametru służy filtr wp_editor_set_quality – ale jest to rozwiązanie dość toporne, traktujące wszystkie pliki tak samo, co da dokładnie … średni efekt.

Lepszym rozwiązaniem jest zastosowanie wtyczki z grupy automatycznej optymalizacji obrazków – takie wtyczki potrafią dobrać optymalny stopień kompresji w zależności od tego co przedstawia dany obrazek. Inaczej traktują wykresy, inaczej zdjęcia grupy ludzi.

Jest wiele wtyczek, które realizują takie zadanie, zarówno płatnych jak i darmowych, więc polecę jednego rozwiązania. Najczęściej używam: Imsanity oraz ShortPixel.

Leniwe ładowanie

Leniwemu ładowaniu poświęcam osobny wpis:

Szybki WordPress – obrazki – leniwe ładowanie

CDN

CDN – Content Delivery Network – czyli rozproszone dostarczanie plików graficznych z wielu centrów dancyh.

Jest to metoda którą warto stosować, jeżeli witryna ma większy zasięg niż jeden kraj, jeden region geograficzny – w przypadku witryny skierowanej na jeden rynek – np. polski, zasadność użycia jest niska i trzeba to rozważać indywidualnie.

Ikony i znaki

Temat ikon zostanie poruszony innym razem, natomiast znaki i stałe elementy graficzne warto konwertować na wektorową wersję, na plik SVG – dzięki czemu zachowamy doskonałą jakość przy minimalnym rozmiarze.

Na koniec

Po zmianie wszystkich wymiarów warto skorzystać z wtyczki, która przemieli nam obrazki, tak żeby wszystko powstało o nowa w takich wymiarach jak potrzebujemy.

Polecam wtyczkę: odnawianie miniaturek.