Jak optymalizować obrazy dla WordPressa

Do artykułu WordPress przygotuj odpowiednią kopię, dodaj ją do biblioteki mediów i wybierz w bloku Obraz. Ustaw rozdzielczość, dodaj tekst alternatywny i sprawdź stronę na telefonie. Pełny rozmiar wybiera pełnowymiarową wersję załącznika, którą WordPress mógł już pomniejszyć. Nie zmienia jedynie szerokości bloku. Dokumentacja WordPress wyjaśnia różnicę względem pierwotnie przesłanego pliku.

Przygotuj przed wysłaniem

Trzymaj oryginał poza folderem publikacji. Ustal, czy będzie to szeroka okładka, ilustracja artykułu czy mała karta: zwykle wymagają obrazów o różnych wymiarach. Przytnij zbędne fragmenty obrazu i dobierz wymiary do największego planowanego wyświetlania.

Dla ilustracji wyświetlanej na szerokości 600 pikseli warto porównać wersję o szerokości 1200 pikseli na ekranie o dużej gęstości pikseli. To punkt wyjścia dla tego miejsca na stronie, nie wymóg WordPressa. Sprawdź wynik i porównaj wielkość pliku z mniejszą kopią.

Użyj kadrowania do kompozycji i zmiany rozmiaru do wymiarów końcowych. Zachowaj proporcje przy wpisywaniu szerokości i wysokości, chyba że celowo zmieniasz kształt.

Wybierz obsługiwany format

Wypróbuj WebP dla zdjęć na własnej stronie. Zachowaj PNG, gdy piksele grafiki muszą pozostać niezmienione, i JPG, gdy wymaga go inny system. Przezroczystość nie wymusza PNG; WebP też ją obsługuje.

Przetestuj obraz w całej instalacji przed konwersją biblioteki. Oprogramowanie serwera do przetwarzania obrazów, wtyczki i motywy wpływają na obróbkę. Zobacz WordPress o rozmiarze i jakości. Unikaj wielokrotnej kompresji przez różne wtyczki bez sprawdzenia efektu.

Sprawdź obraz na stronie

Wstaw obraz do odpowiedniego wpisu lub strony i przejrzyj dostępne rozdzielczości. Nie wybieraj pełnego rozmiaru tylko dlatego, że brzmi lepiej. Wybierz wersję zapewniającą dość szczegółów w danym miejscu i sprawdź faktycznie dostarczany plik. Oficjalny poradnik bloku Obraz opisuje ustawienia.

Napisz tekst alternatywny według funkcji. Szczegół produktu wymaga innego opisu niż dekoracyjny separator. Nie twórz listy słów kluczowych ani kopii sąsiedniego akapitu.

Zweryfikuj opublikowaną stronę

1. Otwórz URL po wylogowaniu, również na wąskim ekranie.
2. Sprawdź kadr, ostrość i odstępy.
3. Otwórz wyświetlany obraz osobno, aby sprawdzić używaną wersję.
4. Sprawdź wymiary i rozmiar pobranego pliku. Panelu Network używaj dopiero do dokładniejszego badania ładowania lub żądania.
5. Jeśli pozostaje stary plik, sprawdź cache strony, wtyczki lub CDN i powtórz.

Stwórz powtarzalną rutynę

Zapisz typowe wymiary okładek, ilustracji i miniatur motywu. Stosuj opisowe nazwy i sprawdzaj widok mobilny przed publikacją. Zrewiduj ustawienia po zmianie motywu: obraz do wąskiej kolumny może nie pasować do pełnej szerokości.

Przykład: od oryginału do publikacji

Dla kolumny o szerokości 720 pikseli i oryginału 3600 × 2400 przygotuj kopie 720 × 480 oraz 1440 × 960 z tym samym kadrem. To przykłady, nie wymogi WordPressa. Porównaj w rozmiarze wyświetlania i wybierz większą tylko przy przydatnym zysku szczegółów. Zachowaj oryginał, a eksport nazwij opisowo przed przesłaniem.

Wstaw kopię do szkicu blokiem Obraz. Sprawdź osobno rozdzielczość i widoczną szerokość: zwężenie bloku nie gwarantuje mniejszego pobrania. Obejrzyj też obraz wyróżniający, który motyw może kadrować inaczej. Po publikacji sprawdź rzeczywiste żądanie na telefonie i komputerze, bez logowania.

Jeśli zamiennik nadal wygląda źle

Przy rozmyciu najpierw porównaj pobrane wymiary z rozmiarem wyświetlania. Jeśli pozostaje stary obraz, sprawdź żądany URL: inny adres może oznaczać stare odwołanie, ten sam problem z pamięcią podręczną. Jeśli błędna jest jedna miniatura, sprawdź właśnie ten wygenerowany wariant.

Przed masowymi zmianami skopiuj media i bazę danych oraz przetestuj jeden wpis. Ustal, który system kompresuje, i sprawdź działania wtyczek lub CDN. Zachowaj razem oryginał, wybrany eksport i końcowy URL, aby móc wrócić bez kolejnych stratnych konwersji.