Jak wyświetlać skalowane obrazy w WordPressie (element w GTmetrix)

Musisz wyświetlać skalowane obrazy w WordPress?


Oznacza to po prostu, że musisz zmienić rozmiar dużych obrazów, aby były mniejsze.

GTmetrix mówi, które obrazy muszą zostać przeskalowane oraz o prawidłowych wymiarach, do których należy je przyciąć lub zmienić ich rozmiar. Następnie zmień rozmiar (skaluj) obraz i zastąp stare obrazy nowymi.

Podaj skalowane obrazy

Ponieważ GTmetrix pokazuje tylko niezoptymalizowane obrazy dla testowanej pojedynczej strony, zacznij od skalowania sitewide obrazy obrazy, które pojawiają się na wielu stronach (twoje logo, obrazy z paska bocznego i stopki). Następnie uruchom pozostałe strony za pomocą GTmetrix i skaluj na nich poszczególne obrazy.

Czy mogę użyć wtyczki do automatycznego skalowania obrazów?
Raczej nie. Możesz ustawić maksymalną szerokość + wysokość w większości wtyczek do optymalizacji obrazu. Ale różne obszary witryny wymagają określonych wymiarów (obrazy muszą być odpowiednio skalowane).

Utwórz ściągę wymiarów obrazu.
Najlepszym sposobem uniknięcia błędów wyświetlania skalowanych obrazów jest poznanie wymiarów każdego obszaru witryny (suwaki, widżety, logo, obrazy blogów o pełnej szerokości itp.). Następnie utwórz arkusz danych wymiaru obrazu z listą wymiarów każdego obszaru. Jeśli postępujesz zgodnie ze swoimi ściągaczami wymiarów obrazu i zmieniasz rozmiar zdjęć przed przesłaniem, nigdy nie powinieneś ponownie wyświetlać błędów obrazu skalowanego.

1. Znajdź obrazy ponadgabarytowe w GTmetrix

Uruchom stronę za pomocą GTmetrix i wyświetl błędy wyświetlania skalowanych obrazów na karcie PageSpeed. Rozwiń ich rekomendacje, a zobaczysz prawidłowe wymiary, do których należy zmienić rozmiar każdego obrazu. Pamiętaj, że GTmetrix wyświetla błędy tylko dla testowanej pojedynczej strony.

Podaj skalowane obrazy GTmetrix

Możesz też ręcznie sprawdź, czy obrazy są skalowane. Najpierw kliknij prawym przyciskiem myszy i skopiuj adres obrazu.

Skopiuj adres obrazu

Następnie wklej adres URL obrazu do nowej karty przeglądarki. Jeśli porównasz obraz wyświetlany w witrynie z adresem URL obrazu, zobaczysz, że zauważalnie różni się rozmiar. Oznacza to, że obraz musi zostać przeskalowany. Porównując dwa warianty obrazu obok siebie, możesz zobaczyć, jak duży jest rzeczywiście obraz (i dlaczego strona, na której się znajduje, ładuje się bardzo wolno).

Obraz skalowany a nieskalowany

2. Zmień rozmiar zdjęć, aby poprawić wymiary

Pobierz stary obraz i otwórz go w wybranym narzędziu do edycji obrazu (używam GIMP). Zmień rozmiar i / lub przytnij obraz do wymiarów zalecanych przez GTmetrix. Wiele narzędzi do edycji obrazów pozwala kompresować obrazy i usuwać je Dane EXIF dzięki czemu obraz ładuje się jeszcze szybciej.

Skalowanie obrazu GIMP

Możesz także przycinać i zmieniać rozmiar zdjęć bezpośrednio w WordPress:

Skalowanie obrazu w edytorze multimediów WordPress

3. Zastąp stary obraz nowym

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

Nieskalowany obraz widżetu

Skalowany obraz widżetu

4. Ponownie przetestuj stronę w GTmetrix

Ponownie przetestuj stronę w GTmetrix i nie powinieneś już podawać skalowanych błędów obrazu.

100% Podaj skalowane obrazy

5. Podaj skalowane obrazy na urządzeniu mobilnym

Wyświetlanie skalowanych obrazów jest inne na urządzeniach mobilnych.

Jeśli zarejestrujesz się, aby założyć darmowe konto GTmetrix, możesz przetestować swoje prędkość strony mobilnej na Androida. Możliwe, że zobaczysz więcej wyświetleń skalowanych błędów obrazu, jeśli Twoja witryna nie używa obrazy adaptacyjne, co oznacza automatyczne zmienianie rozmiaru obrazów na urządzeniach mobilnych (zwykle odbywa się to za pomocą wtyczki).

Krok 1: Uruchom witrynę za pomocą testu Android GTmetrix:

GTmetrix Mobile Test

Wyświetlaj skalowane obrazy na urządzeniach mobilnych

Krok 2: Znajdź wymiary swojego tła mobilnego dostarczone przez GTmetrix:

Maksymalna szerokość tła

Krok 3: Zainstaluj wtyczkę Adaptive Images z ShortPixel lub Obrazy adaptacyjne.

Adaptacyjne obrazy ShortPixel

Krok 4: Ustaw wymiary podane przez GTmetrix jako maksymalna szerokość tła.

Maksymalna szerokość tła

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

GTmetrix Mobile Test

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

6. Zmień rozmiar obrazów na wielu stronach

Jeśli używasz tego samego obrazu na wielu stronach i musi on zostać przeskalowany, możesz zmienić rozmiar obrazu, skopiować go w formacie HTML, a następnie użyć wtyczki Better Search Replace, aby naprawić go na wielu stronach.

Krok 1: Zainstaluj Lepsze wyszukiwanie Zastąp wtyczkę.

Krok 2: Skopiuj kod HTML starego obrazu i wklej go w polu „Wyszukaj” we wtyczce Lepsze wyszukiwanie Zastąp. Możesz użyć Edytor tekstu WordPress aby zobaczyć HTML obrazu. Uwaga: Lepsze wyszukiwanie Zastąp zastąpi obraz tylko wtedy, gdy będzie zawierał dokładnie ten HTML, który wpiszesz we wtyczce.

Krok 3: Skopiuj kod HTML nowego obrazu i wklej go w polu „Zamień na”.

Podaj HTML ze skalowanym obrazem

Krok 4: Wybierz tabele (np. Posty), które chcesz przeskanować i odznacz suche skanowanie.

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

7. Utwórz arkusz z wymiarami obrazu

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

Przykład:

  • Obrazy suwaka: 1900 (w) x 400 (h)
  • Obrazy karuzelowe: 115 (w)
  • Obrazy widżetów: 414 (w)
  • Obrazy postów na blogu o pełnej przepustowości: 680 (w)
  • Wyróżnione zdjęcia: 250 (w) x 250 (h)
  • Obraz Yoast na Facebooku: 1200 (szer.) X 628 (godz.) – krok 11
  • Yoast Twitter OG obraz 1024 (szer.) X 512 (godz.) – krok 11

Prostokąt o szerokości 680 pikseli

Szerokość mojego bloga wynosi 680 pikseli, więc każde zdjęcie w tym poście zostało zmienione na 680 pikseli.

8. Wtyczki WordPress do wyświetlania skalowanych obrazów

Większość wtyczek do optymalizacji obrazu ma opcję zmiany rozmiaru obrazów, jednak nie jest to bardzo skuteczne, gdy próbuje się naprawić błędy w GTmetrix, ponieważ różne obszary witryny wymagają różnych wymiarów. Chodzi o to, aby Twoje zdjęcia nie były absolutnie ogromne. Jak mówi wtyczka Imagify, maksymalna szerokość nie powinna być mniejsza niż Twoja największa miniatura.

Smush

Zmień rozmiar obrazów Smush

Wyobraź sobie

Zmień rozmiar zdjęć Imagify

EWW Image Optimizer

Zmień rozmiar zdjęć EWWW

Inne optymalizacje obrazów

Napisałem pełny samouczek na temat optymalizacja obrazów w WordPress obejmujący:

  • Kompresowanie obrazów
  • Udostępnianie obrazów za pośrednictwem CDN
  • Zmiana rozmiaru GIF-ów
  • Usuwanie danych EXIF
  • Leniwe ładowanie zdjęć i filmów
  • Cloudflare Mirage, polski, ochrona Hotlink

Optymalizacje obrazu w GTmetrix

Szukasz więcej samouczków WordPress?
Oto inne samouczki, które napisałem:

  • Jak skonfigurować WP Rocket (zalecany plugin cache)
  • Cloudways vs. SiteGround (dwa najlepsze hosty, które polecam)
  • Jak uzyskałem 100% wyniki GTmetrix (WordPress Speed ​​Guide)

Mam też niesamowite wideo na temat optymalizacji prędkości WordPress:

Często Zadawane Pytania

&# x2705; Czy mogę użyć wtyczki do wyświetlania skalowanych obrazów?

Nie, różne sekcje Twojej witryny wymagają różnych wymiarów obrazu. Musisz skalować obrazy, aby dopasować je do tych unikalnych wymiarów.

&# x2705; Jaki jest najłatwiejszy sposób skalowania obrazu?

Pobierz obraz, przytnij / zmień jego rozmiar w programie takim jak Photoshop lub Gimp, a następnie zastąp stary obraz nowym.

&# x2705; Które obrazy powinienem najpierw zacząć skalować??

Zacznij od skalowania obrazów wyświetlanych na wielu stronach, takich jak logo, pasek boczny, obrazy, obrazy stopki i inne.

&# x2705; Gdzie znajdę prawidłowe wymiary obrazu?

GTmetrix informuje o prawidłowych wymiarach każdego obrazu po rozwinięciu elementu na karcie PageSpeed.

&# x2705; Jak w pełni zoptymalizować obraz?

Skaluj do odpowiednich wymiarów, skompresuj i usuń dane EXIF ​​za pomocą programu graficznego lub wtyczki, a następnie upewnij się, że określiłeś wymiary obrazu (ustaw szerokość i wysokość obrazu) w kodzie HTML.

Mam nadzieję, że ten samouczek był pomocny! Jeśli nadal wyświetlasz przeskalowane błędy obrazów w swojej witrynie WordPress, zostaw mi komentarz wraz ze swoim pytaniem, a pomogę ci w każdym razie mogę.

Twoje zdrowie,
Tomek

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map