Wyświetlaj obrazy o prawidłowych wymiarach

Katie Hempenius
Katie Hempenius

Wszyscy to spotkaliśmy – zapominasz zmniejszyć obraz przed dodaniem go do strony. Obraz wygląda dobrze, ale marnuje dane użytkowników i szkodliwy wpływ na wydajność strony.

Identyfikowanie obrazów o nieprawidłowych rozmiarach

Lighthouse ułatwia rozpoznawanie obrazów o nieprawidłowym rozmiarze. Przeprowadź audyt wydajności (Lighthouse > Opcje > Wydajność) i poszukaj wyników kontroli Obrazy o prawidłowym rozmiarze. Audyt zawiera wszystkie obrazy, których rozmiar należy zmienić.

Ustalanie prawidłowego rozmiaru obrazu

Określanie rozmiarów obrazów może wydawać się skomplikowane. Z tego względu wybraliśmy dwa podejścia: „dobre” i „lepsze”. Oba rodzaje poprawiają skuteczność, ale interpretowanie i wdrażanie lepszej metody może zająć więcej czasu. Przyniesie Ci to jednak jeszcze większą skuteczność. Najlepszy wybór to taki, który czujesz się pewnie i preferowany.

Krótka uwaga na temat jednostek usługi porównywania cen

Istnieją 2 typy jednostek CSS do określania rozmiaru elementów HTML, w tym obrazów:

  • Jednostki bezwzględne: elementy ze stylem opartym na jednostkach bezwzględnych są zawsze wyświetlane z tym samym rozmiarem, niezależnie od urządzenia. Przykłady prawidłowych, bezwzględnych jednostek CSS: px, cm, mm, in.
  • Jednostki względne: elementy, w których zastosowano jednostki względne, będą wyświetlane w zmiennych rozmiarach w zależności od określonej względnej długości. Przykłady prawidłowych, względnych jednostek CSS: %, vw (1vw = 1% szerokości widocznego obszaru), em (1,5 em = 1,5 raza rozmiaru czcionki).

Podejście „dobre”

Obrazy, których rozmiar zależy od...

  • Jednostki względne: zmień rozmiar obrazu na taki, który będzie działał na wszystkich urządzeniach.

Warto sprawdzić dane analityczne (np. Google Analytics), aby dowiedzieć się, które rozmiary wyświetlaczy są najczęściej używane przez użytkowników. Z kolei screensiz.es zawiera informacje o wyświetlaczach wielu popularnych urządzeń. – Jednostki bezwzględne: zmień rozmiar obrazu, aby pasował do rozmiaru, w którym jest wyświetlany.

Panel elementów w Narzędziach deweloperskich pozwala określić rozmiar obrazu.

Panel elementu DevTools

Lepsze podejście

W przypadku obrazów o rozmiarach zarówno bezwzględnych, jak i względnych, użyj atrybutów srcset i sizes, aby wyświetlać różne obrazy przy różnych gęstościach wyświetlania. Przeczytaj przewodnik po obrazach elastycznych.

„Gęstość wyświetlacza” odnosi się do tego, że różne wyświetlacze mają różną gęstość pikseli. Przy pozostałych parametrach wyświetlacz o dużej gęstości pikseli będzie ostrzejszy niż wyświetlacz o małej gęstości pikseli.

Dlatego jeśli chcesz, aby obrazy były ostre, niezależnie od gęstości pikseli na urządzeniach użytkowników, musisz tworzyć wiele wersji obrazów.

Jest to możliwe dzięki technikom tworzenia obrazów elastycznych, ponieważ umożliwiają wyświetlanie listy wielu wersji obrazów i wybieranie przez urządzenie obrazu, który najlepiej w nim odpowiada.

Obraz, który będzie się wyświetlać na wszystkich urządzeniach, będzie niepotrzebnie duży na mniejszych urządzeniach. Techniki elastycznych obrazów, w szczególności srcset i rozmiary, umożliwiają określenie wielu wersji obrazu i wybranie przez urządzenie odpowiedniego rozmiaru.

Zmiana rozmiaru obrazów

Niezależnie od tego, jaką metodę wybierzesz, do zmiany rozmiaru obrazów może Ci się przydać narzędzie ImageMagick. ImageMagick to najpopularniejsze narzędzie wiersza poleceń do tworzenia i edytowania obrazów. W przypadku interfejsu wiersza poleceń większość osób może zmienić rozmiar obrazów znacznie szybciej niż w przypadku edytora obrazów opartego na interfejsie GUI.

Zmień rozmiar obrazu na 25% oryginału:

convert flower.jpg -resize 25% flower_small.jpg

Przeskaluj obraz do rozmiaru „szerokości 200 pikseli na 100 pikseli”:

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

Jeśli chcesz zmienić rozmiar wielu obrazów, wygodniej będzie użyć skryptu lub usługi, aby zautomatyzować ten proces. Więcej informacji na ten temat znajdziesz w przewodniku po obrazach elastycznych.

Określ wymiary, aby uniknąć przesunięcia układu

Chociaż w tym przewodniku omawiamy wymiary obrazów w kontekście zmniejszania liczby pobieranych zbędnych bajtów, warto pamiętać, że zarezerwowanie odpowiedniej ilości miejsca na obrazy w układzie to kolejny kluczowy element minimalizowania wartości skumulowanego przesunięcia układu na stronie. Gdy wyświetlasz obrazy w kodzie HTML, używaj prawidłowych atrybutów width i height, aby przeglądarka wiedziała, ile miejsca w układzie obrazu powinna mieć:

<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">

Bez tych atrybutów lub ich odpowiedników w CSS przeglądarka nie jest w stanie określić, ile miejsca zajmie obraz, dopóki nie zostanie wczytany. Spowoduje to przesunięcie układu, co może być frustrujące dla użytkowników, gdy treść zostanie przeniesiona po rozpoczęciu jej używania. Może to sprawić, że podczas czytania użytkownik „pogubi się” w zamierzonym miejscu docelowym lub klikną coś innego, czego nie chcieli w trakcie wczytywania strony.

Zamiast podawać szerokość i wysokość, możesz do obrazu użyć właściwości aspect-ratio CSS. Ma to podobny wpływ na rozmiar elementu jak w przypadku atrybutów width i height, ponieważ kontener utrzymuje stały współczynnik proporcji. Różnica polega jednak na tym, że może to spowodować użycie innego współczynnika proporcji niż w obrazie, warto więc użyć ustawienia object-fit, aby mieć pewność, że obraz nie zostanie zniekształcony w tym wyraźnym widoku 16/9:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Zweryfikuj

Po zmianie rozmiaru wszystkich obrazów ponownie uruchom Lighthouse, aby sprawdzić, czy niczego nie brakuje.