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.
rozpoznawać obrazy o nieprawidłowych rozmiarach;
Lighthouse ułatwia identyfikację obrazów o nieprawidłowym rozmiarze. Przeprowadź audyt skuteczności (Lighthouse > Opcje > Skuteczność) i sprawdź wyniki audytu Właściwe rozmiary obrazów. W sprawdzonym pliku znajduje się lista obrazów, których rozmiar 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”. Oba te podejścia poprawiają skuteczność, ale zrozumienie i wdrożenie „lepszego” może zająć trochę więcej czasu. Jednak dzięki temu możesz też uzyskać większą poprawę skuteczności. Najlepszy wybór to ten, który możesz łatwo wdrożyć.
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 tak, aby pasował do wszystkich urządzeń.
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.
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. Przy wszystkich pozostałych stałych czynnikach wyświetlacz o wysokiej gęstości pikseli będzie wyglądać ostrzej niż wyświetlacz o niskiej gęstości pikseli.
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ą na wyświetlanie wielu 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 srcset i sizes, 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ń do tworzenia i edytowania obrazów. Większość osób może zmieniać rozmiary obrazów znacznie szybciej, korzystając z interfejsu wiersza poleceń niż z edytora graficznego.
Zmień 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. Podczas wyświetlania obrazów w HTML należy używać odpowiednich atrybutów width i height, aby przeglądarka wiedziała, ile miejsca w układzie należy przydzielić obrazowi:
<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żytkownika lub „ominięcie” przez niego docelowego miejsca kliknięcia i kliknięcie czegoś innego, czego nie zamierzał, 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 obraz nie był 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.