Najlepszy format obrazu dla WordPress to WebP dla zdjęć i grafik, z JPG i PNG jako automatycznymi kopiami zapasowymi oraz SVG dla logo i ikon. WordPress obsługuje ogromną część Internetu, a obrazy są zwykle najcięższą rzeczą na każdej obsługiwanej przez niego stronie, więc format, który przesyłasz, bezpośrednio wpływa na szybkość ładowania Twojej witryny i jej pozycję w rankingu. WordPress obsługuje wiele za Ciebie, generując wiele rozmiarów każdego przesłanego pliku, ale nie wybierze idealnego formatu, jeśli go nie skonfigurujesz. W tym przewodniku opisano, jakiego formatu użyć, jak WordPress przetwarza obrazy oraz ustawienia i wtyczki, które zapewniają szybkość witryny WordPress.

Dlaczego format obrazu ma tak duże znaczenie w WordPress

Na typowej stronie WordPress obrazy stanowią większość bajtów pobieranych przez odwiedzającego. To znaczy format obrazu jest największym czynnikiem wpływającym na szybkość strony, a szybkość strony jest bezpośrednio uwzględniana w podstawowych wskaźnikach internetowych, które Google wykorzystuje jako sygnał rankingowy. Motyw może być oszczędny, a hosting szybki, ale strona wypełniona dużymi plikami JPG nadal będzie się indeksować. Wybór wydajnego formatu i umożliwienie WordPressowi udostępniania wersji o odpowiednim rozmiarze to optymalizacja o największym wpływie, jaką może przeprowadzić większość witryn, i kosztuje ona nic poza niewielką konfiguracją.

Jak WordPress obsługuje przesyłanie obrazów

Kiedy przesyłasz obraz, WordPress nie tylko go przechowuje. To automatycznie generuje kilka kopii o zmienionym rozmiarze, miniatura, średni, duży i pełny, dzięki czemu może wyświetlać rozmiar odpowiedni do każdego kontekstu. Tworzy również responsywne znaczniki srcset, dzięki czemu przeglądarki wybierają odpowiedni rozmiar dla każdego urządzenia. Jest to potężne rozwiązanie, ale działa na podstawie wszystkiego, co prześlesz, więc oryginał o rozdzielczości 5000 pikseli tworzy rozdęte kopie w każdym rozmiarze. Przesłanie oryginału o rozsądnych rozmiarach i efektywnie skompresowanego oznacza, że każda wygenerowana wersja również jest szczupła.

WebP: nowoczesna wersja domyślna

WebP to format, który należy standaryzować. Tworzy pliki 25 do 35% mniejszy niż JPG przy tej samej jakości, obsługuje przezroczystość taką jak PNG i jest teraz obsługiwana przez każdą aktualną przeglądarkę. WordPress obsługuje przesyłanie plików WebP od wersji 5.8, a przy odpowiedniej wtyczce może automatycznie wyświetlać wersje WebP istniejących plików JPG i PNG, powracając do oryginału w dowolnej przeglądarce, która nie może ich wyświetlić. Przeniesienie biblioteki multimediów do WebP to często największa pojedyncza korzyść, jaką może osiągnąć witryna WordPress.

JPG i PNG jako rozwiązania awaryjne

WebP nie oznacza porzucenia starszych formatów. JPG pozostaje bezpiecznym rozwiązaniem w przypadku zdjęć, a PNG w przypadku grafik wymagających przezroczystości, a dobra wtyczka optymalizacyjna zachowuje oryginały, więc każda przeglądarka nie obsługująca WebP nadal otrzymuje działający obraz. W praktyce przesyłasz plik JPG lub PNG jak zwykle, a wtyczka generuje i udostępnia obok niego plik WebP, dostarczając mniejszy plik tam, gdzie to możliwe. Zapewnia to oszczędności WebP bez ryzyka kompatybilności, dlatego jest to zalecana konfiguracja, a nie tylko WebP.

SVG dla logo i ikon

Jeśli chodzi o logo i ikony interfejsu, SVG pokonuje każdy format rastrowy. To jest wektor, dzięki czemu pozostaje ostry jak brzytwa przy każdej gęstości ekranu z jednego małego pliku. WordPress domyślnie nie zezwala na przesyłanie plików SVG ze względów bezpieczeństwa, ponieważ plik SVG może zawierać skrypt, więc włączasz go za pomocą wtyczki, która czyści pliki podczas przesyłania. Po włączeniu logo wyświetlane jako SVG jest mniejsze i ostrzejsze niż jego odpowiednik w formacie PNG i nigdy nie wymaga generowania wielu rozmiarów. Zarezerwuj SVG dla logo, ikon i prostych grafik, nigdy zdjęć.

Wybór odpowiednich rozmiarów obrazu

WordPress generuje kilka rozmiarów, ale Ty kontrolujesz wymiary. Ustaw duży rozmiar, ale nie szerszy niż obszar zawartości, często około 1200 do 1600 pikseli, więc obrazy o pełnej szerokości nie są niepotrzebnie duże. Przesyłanie zdjęcia o rozdzielczości 4000 pikseli, gdy kolumna treści ma szerokość 800 pikseli, marnuje przepustowość nawet po zmianie rozmiaru WordPressa, ponieważ największa wygenerowana kopia jest nadal zbyt duża. Dopasuj rozmiary zarejestrowanych obrazów do rzeczywistego układu motywu, a każdy obraz wyświetlany w witrynie pozostanie proporcjonalny do miejsca, w którym się pojawia.

Wtyczki do kompresji i optymalizacji

Wtyczka optymalizacyjna automatyzuje cały potok. Popularne opcje kompresuj każdy przesyłany plik, generuj wersje WebP i usuwaj niepotrzebne metadane, a wszystko to bez dotykania obrazu ręką. Wiele z nich optymalizuje także zbiorczo istniejącą bibliotekę, konwertując zgromadzone przez lata pliki JPG i PNG do formatu WebP w jednym przebiegu. Niektórzy przenoszą przetwarzanie na własne serwery, aby oszczędzić Twój hosting. Niezależnie od tego, co wybierzesz, efekt jest taki sam: obrazy pojawiają się na stronie automatycznie skompresowane i w najlepszym formacie, co jest o wiele bardziej niezawodne niż pamiętanie o ręcznej optymalizacji każdego z nich.

Leniwe ładowanie obrazów

Leniwe ładowanie opóźnia obrazy do czasu, aż użytkownik przewinie w ich pobliżu, więc początkowe ładowanie strony powoduje pobranie tylko tego, co jest bezpośrednio widoczne. WordPress domyślnie umożliwia leniwe ładowanie na obrazach poniżej części strony, automatycznie dodając atrybut ładowania. Przyspiesza to zauważalnie pierwsze malowanie na stronach zawierających dużo obrazów. Jedynym wyjątkiem jest największy obraz w części widocznej na ekranie, często przedstawiający bohatera, który powinien ładować się szybko, aby nie opóźniać wskaźnika „Największa zawartość treściowa”. Większość wtyczek optymalizacyjnych pozwala wykluczyć ten obraz z leniwego ładowania za pomocą jednego ustawienia.

Usuwanie metadanych

Zdjęcia zawierają metadane, model aparatu, lokalizację GPS, profile kolorów, których strona internetowa rzadko potrzebuje i które dodają wagi. Usunięcie tych metadanych zmniejsza każdy plik bez widocznych zmian, a większość wtyczek optymalizacyjnych robi to w ramach kompresji. Usunięcie danych GPS zapewnia również prywatność, ponieważ prawdopodobnie nie chcesz publikować, gdzie zrobiono zdjęcie. Jeśli dokładność kolorów ma znaczenie, jedynymi metadanymi, które warto zachować, jest profil kolorów. W przeciwnym razie usunięcie go oznacza bezpłatne, niewidoczne zmniejszenie rozmiaru całej biblioteki.

Zalecana konfiguracja obrazu WordPress

Połącz to w całość, a konfiguracja będzie prosta. Zarejestruj rozmiary obrazów pasujące do układu motywu. Zainstaluj wtyczkę optymalizacyjną, która kompresuje przesyłane pliki, generuje i obsługuje WebP z rezerwami oraz usuwa metadane. Włącz oczyszczone SVG dla swojego logo i ikon. Zachowaj domyślne leniwe ładowanie WordPressa, ale ładuj obraz bohatera z zapałem. Następnie po prostu prześlij oryginały o rozsądnych rozmiarach, a potok zajmie się resztą. Dzięki temu każdy obraz w witrynie jest kompresowany, ma prawidłowy rozmiar i jest automatycznie wyświetlany w najlepszym formacie, a witryna pozostaje szybka w miarę powiększania się biblioteki.

AVIF:

kolejny krok poza WebP

AVIF to najnowszy wydajny format i WordPress go również obsługuje. Kompresuje się nawet mniejszy niż WebP, często znowu o 20% mniejszy, przy tej samej jakości wizualnej, z obsługą przezroczystości i szerokiej gamy kolorów. Obsługa przeglądarek jest teraz szeroka, ale nieco w tyle za WebP, więc AVIF działa najlepiej z rezerwowym WebP lub JPG. Niektóre wtyczki optymalizacyjne mogą automatycznie generować AVIF wraz z WebP. W przypadku witryn, które wykorzystują ostatnie kilka kilobajtów każdego obrazu, warto włączyć format AVIF, choć na razie bezpiecznym formatem podstawowym pozostaje WebP.

Biblioteka multimediów i sprzątanie

Z biegiem czasu biblioteka multimediów WordPress zapełnia się nieużywanymi obrazami, starymi wersjami i duplikatami, które powodują nadmierne tworzenie kopii zapasowych i zaśmiecają administratora. Okresowe usuwanie nieużywanych nośników ułatwia zarządzanie biblioteką a Twoje kopie zapasowe są oszczędne. Wtyczki mogą identyfikować obrazy, które nie są dołączone do żadnego postu lub strony, jednak warto je przejrzeć przed usunięciem, ponieważ niektóre obrazy są wykorzystywane w sposób, którego skanowanie nie może wykryć. Uporządkowana biblioteka multimediów jest łatwiejsza w obsłudze, a po optymalizacji daje jasny obraz tego, ile miejsca faktycznie zajmują Twoje obrazy.

Regeneracja miniatur po zmianie motywu

Po zmianie motywu lub zmianie zarejestrowanych rozmiarów obrazów istniejące przesłane obrazy nadal będą miały swoje stare, wygenerowane rozmiary. Regeneracja miniatur odtwarza każdy rozmiar z oryginałów aby dopasować je do nowych wymiarów, co dedykowana wtyczka robi zbiorczo w całej bibliotece. Pomiń to, a obrazy w nowym motywie mogą wydawać się rozciągnięte lub wyświetlane w niewłaściwym rozmiarze. Jest to jednorazowy krok wykonywany po każdej zmianie rozmiarów obrazów, a jego uruchomienie zapewnia spójność całej biblioteki z rzeczywistym sposobem wyświetlania obrazów w bieżącym motywie.

Dostawa CDN dla obrazów

Sieć dostarczania treści przyspiesza dostarczanie obrazów, udostępniając pliki z serwera w pobliżu każdego odwiedzającego. CDN buforuje Twoje obrazy w lokalizacjach brzegowych na całym świecie, więc czytelnik znajdujący się daleko od Twojego hosta nadal szybko otrzymuje obrazy. Wiele wtyczek do optymalizacji i buforowania WordPress integruje CDN, a niektóre CDN specyficzne dla obrazu również konwertują i zmieniają rozmiar w locie, automatycznie obsługując format i wymiary. W przypadku witryny z globalną publicznością lub dużym ruchem sieć CDN eliminuje dostarczanie obrazów jako wąskie gardło i jednocześnie odciąża serwer początkowy.

Wyróżnione obrazy i podglądy społecznościowe

Obraz wyróżniony w każdym poście spełnia podwójną funkcję: pojawia się w motywie i, poprzez tagi Open Graph, jako podgląd po udostępnieniu posta. Ustaw polecane obrazy w rozmiarze odpowiednim dla podglądów społecznościowych, około 1200 na 630, dzięki czemu udostępnione linki będą dobrze wyglądać w kanale. Wtyczka SEO zwykle automatycznie mapuje wyróżniony obraz na tag Open Graph. Jeśli zrobisz to dobrze, każdy udostępniony post będzie wyświetlał czysty obraz o prawidłowym rozmiarze, a nie przyciętą miniaturę lub nic.

Testowanie wydajności obrazu

Po optymalizacji zmierz wynik. Narzędzia takie jak raporty PageSpeed Insights dotyczące problemów związanych z obrazem, oznaczanie zbyt dużych obrazów, brak nowoczesnych formatów i obrazów bez wymiarów, które powodują zmianę układu. Są one powiązane bezpośrednio z podstawowymi wskaźnikami internetowymi, więc ich porady odnoszą się do tego, co mierzy Google. Przeprowadzenie testu przed i po przejściu optymalizacji pokazuje dokładnie, o ile szybsza stała się strona, i wyróżnia każdy obraz, który nadal ją powstrzymuje. Potraktuj te raporty jako listę kontrolną pozwalającą wycisnąć resztę ciężaru ze zdjęć.

Typowe błędy w obrazach WordPress

Kilka nawyków po cichu spowalnia witryny WordPress. Przesyłanie obrazów z kamer w pełnej rozdzielczości, pomijanie kompresji i wyłączanie WebP są najczęstsze, każdy pozostawia duże pliki tam, gdzie zrobiłyby to małe. Inne obejmują zapomnienie o ustawieniu wymiarów obrazu, co powoduje zmianę układu, oraz użycie powolnej, bogatej w funkcje wtyczki, która dodaje więcej wagi niż oszczędza. Każdy z nich można łatwo naprawić za pomocą powyższej konfiguracji. Unikanie ich sprawi, że witryna WordPress będzie szybko się rozwijać, zamiast patrzeć, jak zwalnia z roku na rok w miarę zapełniania się biblioteki.

Jaki jest najlepszy format obrazu dla WordPress?

WebP dla zdjęć i grafiki, z kopiami zapasowymi w formacie JPG i PNG oraz SVG dla logo. Pliki WebP są od 25 do 35% mniejsze niż JPG przy tej samej jakości i obsługuje je każda obecna przeglądarka.

Czy WordPress obsługuje WebP?

Tak, od WordPressa 5.8. Możesz przesłać WebP bezpośrednio, a wtyczka optymalizacyjna może automatycznie wyświetlać wersje WebP istniejących plików JPG i PNG z kopiami zapasowymi.

Czy mogę przesyłać pliki SVG do WordPress?

Domyślnie nie, ze względów bezpieczeństwa. Wtyczka oczyszczająca pliki SVG podczas przesyłania umożliwia to bezpiecznie, dzięki czemu logo i ikony podawane jako SVG są mniejsze i ostrzejsze niż PNG.

Czy potrzebuję wtyczki do optymalizacji obrazu?

Jest to zdecydowanie zalecane. Wtyczka kompresuje przesyłane pliki, generuje WebP i automatycznie usuwa metadane, co jest znacznie bardziej niezawodne niż ręczna optymalizacja każdego obrazu.

Czy powinienem zmienić rozmiar obrazów przed przesłaniem do WordPress?

Tak. Przesyłaj nie szerszy niż obszar zawartości, często od 1200 do 1600 pikseli. Ogromny oryginał sprawia, że każdy rozmiar, który WordPress z niego generuje, jest również ponadwymiarowy.

Czy WordPress obsługuje AVIF?

Tak. AVIF kompresuje około 20% mniej niż WebP w tej samej jakości, a niektóre wtyczki optymalizacyjne generują ją automatycznie. Podaj go z rezerwowym WebP lub JPG, aby uzyskać pełną obsługę przeglądarki.

Czy powinienem używać CDN dla obrazów WordPress?

W przypadku witryny globalnej lub o dużym natężeniu ruchu – tak. CDN buforuje obrazy w lokalizacjach brzegowych na całym świecie, dzięki czemu odlegli goście szybko je dostaną, a obciążenie spadnie z Twojego serwera początkowego.

Dlaczego moje obrazy wyglądają nieprawidłowo po zmianie motywu?

Ponieważ istniejące przesłane pliki zachowują swoje stare, wygenerowane rozmiary. Regeneracja miniatur odtwarza każdy rozmiar z oryginałów aby dopasować wymiary nowego motywu.

Czy powinienem leniwie ładować obrazy WordPress?

Tak i WordPress domyślnie umożliwia leniwe ładowanie na obrazach poniżej zakładki. Kontynuuj, ale ładuj szybko główny obraz bohatera, aby nie opóźniał on największej zawartości w malowaniu.