Wprowadzenie
Jeśli Twoja strona ładuje się wolno, bardzo często winne są niezoptymalizowane i za duże obrazy w WordPressie. Zwykle, użytkownicy wrzucają zdjęcia do biblioteki WordPressa bez zwracania uwagi na ich wagę lub wymiary. W rezultacie, każdy odwiedzający stronę jest zmuszony do dłuższego oczekiwania na stronę, gdy jego przeglądarka pobiera plik ważący nawet kilka megabajtów.
Na szczęście w większości przypadków nie potrzebujesz pomocy grafika, aby poprawnie przygotować obrazy, ani pomocy programisty, aby strona ładowała się szybciej. Wystarczy podążać kilkoma prostymi zasadami, które pomogą zoptymalizować obrazy na Twojej stronie internetowej, które znajdziesz poniżej.
Kiedy za duże obrazy w WordPressie są problemem?
O zbyt dużym obrazie mówimy w sytuacji, gdy plik ma większe wymiary albo wagę niż to, czego realnie potrzebuje strona w miejscu, w którym ten obraz się wyświetla.
Piksele (px) to „rozdzielczość” obrazka (np. 6000×4000 px). Waga (KB/MB) to ilość miejsca na dysku jaką zajmuje obrazek. Ten sam obrazek o wymiarach 1500×1000 px może ważyć 2 MB (megabajty) lub 100 KB (kilobajty), a to 20-krotna różnica ilości danych, jakie będzie musiał pobrać użytkownik zanim zobaczy Twój obrazek lub przeczyta wpis!
W skrócie: obraz ma być taki, jak trzeba (wymiary) i tak lekki, jak się da (waga).
Najpierw zmniejsz wymiary (px)
Zastanów się: gdzie ten obraz ma się wyświetlać? Inny plik ma sens w nagłówku strony, a inny w treści wpisu.
Kilka praktycznych wskazówek dla wymiarów obrazów w WordPressie:
- obraz w treści wpisu: 1200–1600 px szerokości,
- baner/sekcja na całą szerokość: do 1920 px (zwykle nie ma potrzeby więcej, nie warte zwiększonej wagi),
- miniatury lub siatki wpisów (np. lista wpisów w archiwum): często wystarczy 600–900 px.
Jeśli miejsce w którym planujesz umieścić obraz ma 900 px szerokości, to grafika 1600 px daje zapas pod większe ekrany i to zwykle wystarcza. Przesadnie duże wymiary nie sprawią, że grafika będzie ostrzejsza, a jedynie będzie ważyć więcej.
Dobierz format do grafiki
Format to typ (tzw. rozszerzenie) pliku. Nie wybieraj go „z przyzwyczajenia”, zastanów się jaki cel ma Twoja grafika i w jakim miejscu się znajdzie na stronie. W większości wypadków:
- .jpg – najlepszy i najpopularniejszy format dla zdjęć. Ma sensowną wagę i dobrze wygląda po kompresji.
- .png – dobry dla zrzutów ekranu i grafik z tekstem (zwykle jest mniej skompresowany, więc na ogół waży więcej, ale za to ma bardziej wyraźne szczegóły).
- .webp – często najlepszy kompromis: mniejsza waga przy podobnej jakości (zarówno dla zdjęć, jak i zrzutów). Umożliwia dużą swobodę kompresji, bardzo często niezauważalną dla oka przy znacznym zmniejszeniu wagi.
- .svg – ikony i proste logo. Lekki i ostry w każdej skali, ale traktuj to jako temat „trochę bardziej zaawansowany”, dotyczy tzw. „grafik w krzywych”.
Redukcja wagi obrazka
Wymiary to jedno, ale to waga najczęściej zabija szybkość.
Przydatne wskazówki dot. wagi obrazków:
- zdjęcia i grafiki: 100–300 KB,
- większy baner (tzw. hero image): 300–600 KB,
- zrzuty ekranu: 150–400 KB (czasem więcej, jeśli jest dużo drobnego tekstu lub kolorów).
Jeśli zastanawiasz nad dalszą redukcją wagi kosztem jakości, to zwykle da się to rozwiązać inaczej: zmniejsz wymiary jeszcze trochę i dopiero wtedy kompresuj (np. w internetowych narzędziach do kompresji grafik). To najczęściej daje lepszy efekt niż brutalne zjeżdżanie z jakością. Upewnij się też, czy używasz odpowiedniego formatu obrazu opisanego w pkt 2.
Przy wstawianiu obrazka wybierz właściwy rozmiar
WordPress po wgraniu obrazu zwykle tworzy kilka jego wersji (miniatur). Problem zaczyna się wtedy, gdy we wpisie blogowym wstawisz obraz o pełnej rozdzielczości (pełny rozmiar) i każesz stronie ładować największą wersję, mimo że na ekranie i tak będzie mała.
- Wejdź w edycję wpisu i kliknij obraz, następnie kliknij ikonę „ołówka” (edytuj).
- W otwartym panelu (szczegóły obrazka) znajdziesz ustawienie „Rozmiar”.
- Wybierz sensowną opcję: najczęściej „Średni” / „Duży”, a nie „Pełny rozmiar” (z wyjątkiem sytuacji, w której Twoja grafika przygotowana jest na wymiar).
- Pamiętaj o kliknięciu „Aktualizuj”.
