Szybki WordPress – obrazki

Wpis jest jednym z cyklu:
Szybki WordPress – czyli co?

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

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.

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.

2 komentarze

  1. Dzieki za rzucenie ciekawego tematu, chociaz myslalam, ze czujesz niedosyt w temacie tego konkretnego artykulu. Ja specem od cache owanie nie jestem, a nie lubie pisac o czyms, w czym nie czuje sie biegle. Na tym blogu uzywam pluginu WP Super Cache i mi wystarcza. Natomiast ciekawa jestem w jakim celu chcesz cache owac tylko wybrane kategorie? Nie wiem tez, jaki jest Twoj poziom zaawansowania w WP. Marcin Pietrzak na ostatnim WordCampie pokazywal klasy cache ujace z core owej czesci WP. Jesli rowniez kodujesz, to mozesz zawsze sprobowac sam pobawic sie tymi funkcjami. Wowczas panujesz nad wszystkim od A do Z.

Możliwość komentowania jest wyłączona.

Jeżeli chcesz skomentować, napisz mail na adres marcin w domenie strony na której jesteś. Dodam twoj komentarz.