Wyświetlaj obrazy o prawidłowych wymiarach

Katie Hempenius
Katie Hempenius

Zdarza się każdemu: zapominasz zmniejszyć rozmiar obrazu przed dodaniem go do strony. Obraz wygląda dobrze, ale marnuje dane użytkowników i pogarsza skuteczność strony.

Narzędzie Lighthouse ułatwia rozpoznawanie obrazów o nieprawidłowym rozmiarze. Przeprowadź audyt skuteczności (Lighthouse > Opcje > Skuteczność) i sprawdź wyniki audytu Właściwe rozmiary obrazów. W dzienniku kontroli są wymienione wszystkie obrazy, które należy zmienić.

Określanie prawidłowego rozmiaru obrazu

Dobieranie rozmiaru obrazów może być pozornie skomplikowane. Z tego powodu udostępniliśmy 2 podejścia: „dobre” i „lepsze”. Poprawiają one skuteczność, ale zrozumienie i wdrożenie „lepszego” podejścia może trochę potrwać. Jednak przyniesie Ci też większe korzyści w postaci poprawy skuteczności. Najlepszy wybór to taki, który czujesz się komfortowo.

Krótka uwaga na temat jednostek CSS

Do określania rozmiaru elementów HTML, w tym obrazów, są dostępne 2 typy jednostek CSS:

  • Jednostki bezwzględne: elementy stylizowane za pomocą jednostek bezwzględnych będą zawsze wyświetlane w tym samym rozmiarze niezależnie od urządzenia. Przykłady prawidłowych bezwzględnych jednostek CSS: px, cm, mm, in.
  • Jednostki względne: elementy stylizowane za pomocą jednostek względnych będą wyświetlane w różnych 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 razy rozmiar czcionki).

Podejście „Dobrze”

W przypadku obrazów o rozmiarze określonym na podstawie…

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

Warto sprawdzić dane analityczne (np. z Google Analytics), aby dowiedzieć się, których rozmiarów wyświetlania najczęściej używają użytkownicy. Informacje o wyświetlaczach wielu popularnych urządzeń znajdziesz też na stronie screensiz.es. – Jednostki bezwzględne: rozmiar obrazu dopasowuje się do rozmiaru, w jakim jest wyświetlany.

W panelu „Elementy” w DevTools możesz sprawdzić, w jakim rozmiarze wyświetla się obraz.

Panel elementu Narzędzi deweloperskich

Podejście „Lepsze”

W przypadku obrazów o rozmiarach bezwzględnych i względnych użyj atrybutów srcset i sizes, aby wyświetlać różne obrazy na ekranach o różnej gęstości. Przeczytaj przewodnik na temat obrazów elastycznych.

„Gęstość wyświetlacza” odnosi się do faktu, że różne wyświetlacze mają różne gęstości pikseli. Jeśli wszystkie inne parametry są takie same, wyświetlacz o dużej gęstości pikseli będzie wyglądać ostrzej niż wyświetlacz o niskiej gęstości.

Dlatego, jeśli chcesz, aby użytkownicy mogli oglądać jak najostrzejsze obrazy niezależnie od gęstości pikseli na ich urządzeniu, musisz udostępnić kilka wersji obrazu.

Umożliwiają to techniki obrazów elastycznych, które pozwalają wyświetlać wiele wersji obrazu, a urządzenie może wybrać ten, który najlepiej mu odpowiada.

Obraz, który działa na wszystkich urządzeniach, będzie niepotrzebnie duży na mniejszych urządzeniach. Techniki elastycznego formatowania obrazów, w szczególności atrybuty srcsetsizes, umożliwiają określenie wielu wersji obrazu, a urządzenie samo wybierze rozmiar, który będzie dla niego najlepszy.

Zmienianie rozmiaru obrazów

Niezależnie od wybranego podejścia, możesz użyć ImageMagick, aby zmienić rozmiar obrazów. ImageMagick to najpopularniejsze narzędzie wiersza poleceń służące do tworzenia i edytowania obrazów. Większość osób może zmieniać rozmiary obrazów znacznie szybciej, korzystając z CLI niż z edytora graficznego.

Zmniejsz rozmiar obrazu do 25% rozmiaru oryginału:

convert flower.jpg -resize 25% flower_small.jpg

Przeskaluj obraz, aby mieścił się w ramach „200 pikseli na szerokość i 100 pikseli na wysokość”:

# 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 może być użycie skryptu lub usługi do zautomatyzowania tego procesu. Więcej informacji na ten temat znajdziesz w przewodniku dotyczącym obrazów dostosowanych do urządzeń mobilnych.

Unikaj przesunięć układu przez określenie wymiarów

W tym przewodniku omawiamy wymiary obrazów w kontekście zmniejszania liczby pobieranych niepotrzebnych bajtów, ale warto pamiętać, że rezerwowanie odpowiedniej ilości miejsca na obrazy w układzie to kolejny kluczowy element minimalizowania metryki Kumulowana zmiana układu strony. Przy wyświetlaniu obrazów w kodzie HTML pamiętaj o użyciu odpowiednich atrybutów width i height, aby przeglądarka wiedziała, ile miejsca w układzie obrazu:

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

Bez tych atrybutów lub ich odpowiedników w kodzie CSS przeglądarka nie wie, ile miejsca zajmie obraz, dopóki nie zostanie on załadowany. Spowoduje to przesunięcia układu w dokumencie, co może być frustrujące dla użytkowników, gdy treści przesuwają się po rozpoczęciu ich czytania. Może to spowodować utratę miejsca w tekście przez użytkowników lub „ominięcie” przez nich docelowego miejsca docelowego kliknięcia i kliknięcie czegoś innego podczas wczytywania strony.

Alternatywą dla jawnego podawania szerokości i wysokości jest użycie właściwości CSS aspect-ratio obrazu. Ma to podobny wpływ na rozmiar elementu jak atrybuty width i height w tym sensie, że kontener zachowa spójny format obrazu. Różnica polega jednak na tym, że może to spowodować użycie innego formatu niż ten, w którym dostarczono obraz. Dlatego warto użyć ustawienia object-fit, aby upewnić się, że obraz nie zostanie zniekształcony w tym 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 nic nie pominięto.