jak prawidłowo rozmiar obrazów w WordPress (PageSpeed Insights + element Gtmetrix)

jeśli uruchomiłeś swoją witrynę za pośrednictwem PageSpeed Insights lub GTmetrix, możesz zobaczyć zalecenie, aby prawidłowo rozmiar obrazów.

aby prawidłowo powiększyć obrazy w WordPress, rozwiń element w PageSpeed Insights i zobacz, które obrazy są zbyt duże. Zmień ich rozmiar do prawidłowych wymiarów (znalezionych w raporcie gtmetrix legacy). Na koniec zastąp stary obraz nowym. Ponownie przetestuj swoją witrynę i powinno być 100%.

poprawny rozmiar obrazów

ponieważ PageSpeed Insights pokazuje tylko nieoptymalizowane obrazy dla pojedynczej strony, którą testujesz, zacznij od zmiany rozmiaru obrazów w całej witrynie (logo, pasek boczny i zdjęcia stopki). Następnie uruchom inne strony za pomocą aplikacji PageSpeed Insights i zmień rozmiar zdjęć na nich.

Czy mogę użyć wtyczki do automatycznej zmiany rozmiaru obrazów?
raczej nie. Możesz ustawić maksymalną szerokość + wysokość w większości wtyczek optymalizacji obrazu. Ale różne obszary witryny wymagają określonych wymiarów (obrazy należy odpowiednio zmienić rozmiar).

Utwórz arkusz ściągawki wymiarów obrazu.
najlepszym sposobem na uniknięcie błędów rozmiaru obrazu jest poznanie wymiarów różnych obszarów witryny (suwaki, widżety, logo, obrazy bloga o pełnej szerokości itp.). Następnie utwórz arkusz ściągawki wymiaru obrazu z wymiarami każdego obszaru. Jeśli zastosujesz się do arkusza ściągawki wymiary obrazu i zmienisz rozmiar obrazów przed przesłaniem, nigdy nie powinieneś mieć błędów prawidłowego rozmiaru obrazu.

Znajdź zbyt duże obrazy w raportach Gtmetrix Legacy

raporty gtmetrix legacy pokazują prawidłowe wymiary dla dużych obrazów.

utwórz bezpłatne konto GTmetrix i przejdź do konta > domyślnie do starszych raportów > włącz.

Uruchom Stronę poprzez GTmetrix i zobacz sekcję „serwuj skalowane obrazy”. Rozwiń ich zalecenia, a zobaczysz prawidłowe wymiary, do których należy zmienić rozmiar tych obrazów.

Serve Scaled Images GTmetrix

możesz również ręcznie sprawdzić, czy obrazy są zbyt duże. Kliknij prawym przyciskiem myszy obraz > skopiuj adres obrazu.

Skopiuj adres obrazu

następnie wklej adres URL obrazu do nowej karty przeglądarki. Jeśli porównasz obraz pokazany na twojej stronie z adresem URL obrazu, zobaczysz zauważalną różnicę w ich rozmiarach. Oznacza to, że obraz musi być skalowany. Porównując dwa warianty obrazów obok siebie, możesz zobaczyć, jak duży jest rzeczywiście obraz (i dlaczego strona, na której się znajduje, Może ładować się wolno).

skalowany vs bez skalowania Obraz

Zmień rozmiar obrazów na poprawne Wymiary

Pobierz stary obraz i otwórz go w wybranym narzędziu do edycji obrazu (używam programu GIMP). Zmień rozmiar i / lub Przytnij obraz do wymiarów zalecanych przez GTmetrix. Niektóre narzędzia do edycji obrazów pozwalają kompresować obrazy i usuwać dane EXIF, dzięki czemu ładowanie obrazu jest jeszcze szybsze.

skalowanie obrazu GIMP

możesz również kadrować i zmieniać rozmiar obrazów bezpośrednio w WordPress:

skalowanie obrazu w edytorze mediów WordPress

Zastąp stary obraz nowym

Prześlij nowy obraz do WordPress, a następnie zastąp stary obraz nowym.

Bezskalowany Obraz widżetu

przeskalowany obraz widżetu

ponownie przetestuj stronę w GTmetrix

ponownie przetestuj stronę w Gtmetrix (lub PageSpeed Insights), a błąd powinien zostać naprawiony.

serwuj skalowane obrazy WordPress

prawidłowo rozmiar obrazów na urządzeniach mobilnych

prawidłowe rozmiary obrazów są różne na urządzeniach mobilnych.

jeśli zarejestrujesz konto premium gtmetrix, możesz przetestować swoją prędkość mobilną na Androidzie. Są szanse, że zobaczysz więcej serwuj przeskalowane błędy obrazu, jeśli Twoja witryna nie używa obrazów adaptacyjnych, co oznacza automatyczną zmianę rozmiaru obrazów dla urządzeń mobilnych (zwykle odbywa się to za pomocą wtyczki).

Krok 1: Uruchom swoją witrynę za pomocą testu Gtmetrix na Androida:

Gtmetrix Mobile Test

Wyświetlaj skalowane obrazy na urządzeniach mobilnych

Krok 2: Znajdź wymiary tła urządzenia mobilnego dostarczone przez GTmetrix:

Maksymalna szerokość tła

Krok 3: Zainstaluj wtyczkę Adaptive Images (polecam ShortPixel lub Adaptive Images).

ShortPixel Adaptive Images

Krok 4: Ustaw wymiary dostarczone przez GTmetrix jako maksymalną szerokość tła.

Maksymalna szerokość tła

Krok 5: Uruchom ponownie swoją witrynę za pomocą testu mobilnego GTmetrix, aby upewnić się, że nie ma błędów.

Test GTmetrix Mobile

Krok 5: skonfiguruj inne ustawienia w wtyczce Adaptive images (ShortPixel zawiera obsługę WebP, leniwe ładowanie obrazów, inteligentne kadrowanie i usuwanie danych EXIF). Te też mogą pomóc.

Zmień rozmiar obrazów na wielu stronach

jeśli używasz tego samego obrazu na wielu stronach/postach i trzeba go naprawić, możesz zmienić rozmiar obrazu, skopiować jego kod HTML, a następnie użyć wtyczki Better Search Replace, aby naprawić go na wielu stronach.

Krok 1: Zainstaluj wtyczkę Better Search Replace.

Krok 2: skopiuj kod HTML starego obrazu i wklej go do pola „Szukaj” w wtyczce Better Search Replace. Możesz użyć edytora tekstu WordPress, aby zobaczyć kod HTML obrazu. Uwaga: Better Search Replace zastąpi obraz tylko wtedy, gdy zawiera dokładny kod HTML wprowadzony we wtyczce.

lepsze wyszukiwanie Zamień dla obrazów

Krok 3: skopiuj kod HTML nowego obrazu i wklej go do pola „Zamień na”.

podaj skalowany obraz HTML

Krok 4: Wybierz tabele (np. posty) chcesz zeskanować i odznacz ” Uruchom jako suche skanowanie.”

Krok 5: kliknij „Szukaj / Zamień”, a wtyczka zastąpi stary obraz nowym.

Utwórz ściągawkę o wymiarach obrazu

jak wspomniałem wcześniej, powinieneś zmierzyć wymiary wszystkich obszarów witryny, aby móc zmienić rozmiar zdjęć przed ich przesłaniem. Możesz znaleźć te wymiary w GTmetrix (tylko jeśli masz poprawne błędy rozmiaru obrazu) lub możesz je również znaleźć w arkuszu stylów CSS Twojego motywu.

przykład:

  • obrazy suwaka: 1900(w) x 400(h)
  • obrazy karuzeli: 115(w)
  • obrazy widżetu: 414 (w)
  • Pełna szerokość zdjęcia na blogu: 680 (w)
  • polecane obrazy: 250 (w) x 250 (h)
  • Yoast Facebook og image: 1200(w) x 628(h) – step 11
  • Yoast Twitter og image 1024(w) x 512(h) – step 11

680 Szerokość piksela prostokąt

Szerokość mojego bloga to 680px, więc każdy pojedynczy obraz na tym poście został zmieniony na 680px.

wtyczki WordPress do prawidłowego rozmiaru obrazów

większość wtyczek do optymalizacji obrazów ma opcję zmiany rozmiaru obrazów, jednak nie jest to zbyt skuteczne podczas próby naprawy błędów w GTmetrix, ponieważ różne obszary witryny wymagały różnych wymiarów. Chodzi bardziej o upewnienie się, że Twoje zdjęcia nie są absolutnie ogromne. Jak mówi wtyczka Imagify, maksymalna szerokość nie powinna być mniejsza niż największa Miniatura.

Smush

Zmień rozmiar obrazów Smush

Imagify

Zmień rozmiar obrazów Imagify

EWW Image Optimizer

Zmień rozmiar obrazów EWWW

inne sposoby optymalizacji obrazów

napisałem pełny samouczek na temat optymalizacji obrazów w WordPress, który obejmuje:

  • kompresowanie obrazów
  • serwowanie obrazów z CDN
  • Zmiana rozmiaru GIFów
  • usuwanie danych EXIF
  • leniwe ładowanie obrazów + filmów
  • Cloudflare Mirage, Polish, Hotlink Protection

Optymalizacja obrazu GTmetrix

szukasz więcej samouczków prędkości?
tu są inne tutoriale, które napisałem:

  • Przewodnik prędkości WordPress (ten przewodnik trwał wiecznie)
  • jak skonfigurować WP Rocket (wtyczka cache polecam)

mam też niesamowity film na temat optymalizacji prędkości WordPress:

Często zadawane pytania

jak naprawić prawidłowo rozmiar obrazów?

Pobierz obraz, zmień jego rozmiar do poprawnych wymiarów podanych w raportach gtmetrix legacy, a następnie zamień stary obraz na nowy.

Czy mogę użyć wtyczki do prawidłowego rozmiaru obrazów?

Nie, różne sekcje witryny wymagają różnych wymiarów obrazu. Musisz przeskalować obrazy, aby pasowały do tych unikalnych wymiarów.

które obrazy powinienem najpierw zmienić rozmiar?

zacznij od skalowania obrazów pojawiających się na wielu stronach, takich jak logo, pasek boczny i obrazy stopki.

Gdzie znajdę prawidłowe wymiary obrazu?

raporty gtmetrix legacy informują o prawidłowych wymiarach każdego obrazu po rozwinięciu elementu na karcie PageSpeed.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.