Każdy z nas to zna – zapomniałeś(-aś) zmniejszyć obraz przed dodaniem go do strony. Obraz wygląda dobrze, ale marnuje dane użytkowników i pogarsza skuteczność strony.
Identyfikowanie obrazów o nieprawidłowym rozmiarze
Lighthouse ułatwia identyfikowanie obrazów o nieprawidłowym rozmiarze. Uruchom audyt skuteczności (Lighthouse > Opcje > Skuteczność) i poszukaj wyników audytu Obrazy o odpowiednim rozmiarze. Audyt zawiera listę obrazów, których rozmiar należy zmienić.
Określanie prawidłowego rozmiaru obrazu
Określanie rozmiaru obrazu może być zaskakująco skomplikowane. Dlatego przedstawiamy 2 podejścia: „dobre” i „lepsze”. Oba poprawią skuteczność, ale zrozumienie i wdrożenie podejścia „lepszego” może zająć trochę więcej czasu. Przyniesie ono jednak większe korzyści w postaci poprawy skuteczności. Najlepszym wyborem jest podejście, które możesz wdrożyć bez problemu.
Krótka uwaga na temat jednostek CSS
Istnieją 2 typy jednostek CSS, które służą do określania rozmiaru elementów HTML, w tym obrazów:
- 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 jednostek bezwzględnych 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 długości względnej. Przykłady prawidłowych jednostek względnych CSS: %, vw (1vw = 1% szerokości widocznego obszaru), em (1,5 em = 1,5-krotny rozmiar czcionki).
Podejście „dobre”
W przypadku obrazów, których rozmiar jest określany na podstawie:
- Jednostek względnych: zmień rozmiar obrazu tak, aby pasował do wszystkich urządzeń.
Może się okazać, że przydatne będzie sprawdzenie danych analitycznych (np. Google Analytics), aby zobaczyć, jakich rozmiarów wyświetlacza najczęściej używają Twoi użytkownicy. Alternatywnie możesz skorzystać z witryny screensiz.es, która zawiera informacje o wyświetlaczach wielu popularnych urządzeń. - Jednostek bezwzględnych: zmień rozmiar obrazu tak, aby odpowiadał rozmiarowi, w jakim jest wyświetlany.
Aby określić rozmiar wyświetlanego obrazu, możesz użyć panelu Elementy w Narzędziach deweloperskich.
Podejście „lepsze”
W przypadku obrazów o rozmiarach bezwzględnych i względnych użyj srcset
i sizes
atrybutów, aby wyświetlać różne obrazy na wyświetlaczach o różnej gęstości pikseli.
Przeczytaj przewodnik dotyczący obrazów elastycznych.
„Gęstość pikseli” oznacza, że różne wyświetlacze mają różną gęstość pikseli. Przy innych takich samych parametrach wyświetlacz o dużej gęstości pikseli będzie wyglądał ostrzej niż wyświetlacz o małej gęstości pikseli.
Dlatego, jeśli chcesz, aby użytkownicy widzieli obrazy w jak najlepszej jakości niezależnie od gęstości pikseli na ich urządzeniu, musisz udostępnić kilka wersji obrazu.
Techniki dotyczące obrazów elastycznych umożliwiają to, ponieważ pozwalają na utworzenie listy kilku wersji obrazu, a urządzenie może wybrać obraz, który najlepiej pasuje do jego parametrów.
Obraz, który działa na wszystkich urządzeniach, będzie niepotrzebnie duży na mniejszych urządzeniach. Techniki dotyczące obrazów elastycznych, a konkretnie srcset i sizes, pozwalają określić kilka wersji obrazu, a urządzenie może wybrać rozmiar, który najlepiej pasuje do jego parametrów.
Zmienianie rozmiaru obrazów
Niezależnie od wybranego podejścia może się okazać, że przydatne będzie użycie narzędzia ImageMagick do zmiany rozmiaru obrazów. ImageMagick to najpopularniejsze narzędzie wiersza poleceń do tworzenia i edytowania obrazów. Większość osób może zmieniać rozmiar obrazów znacznie szybciej za pomocą interfejsu wiersza poleceń niż za pomocą edytora graficznego.
Zmień rozmiar obrazu do 25% rozmiaru oryginału:
convert flower.jpg -resize 25% flower_small.jpg
Skaluj obraz tak, aby mieścił się w obszarze o wymiarach 200 px szerokości i 100 px wysokości:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Jeśli będziesz zmieniać 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 Obrazy elastyczne.
Unikanie przesunięć układu przez określanie wymiarów
W tym przewodniku omawiamy wymiary obrazów w kontekście zmniejszania ilości pobieranych niepotrzebnych bajtów, ale warto pamiętać, że rezerwowanie odpowiedniego miejsca na obrazy w układzie jest kolejnym ważnym elementem minimalizowania wartości wskaźnika skumulowanego przesunięcia układu na stronie. Podczas wyświetlania obrazów w HTML używaj odpowiednich atrybutów width i height, aby przeglądarka wiedziała, ile miejsca w układzie ma zarezerwować na obraz:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Bez tych atrybutów lub równoważnych rozmiarów CSS przeglądarka nie wie, ile miejsca zajmie obraz, dopóki się nie wczyta. Spowoduje to przesunięcia układu w dokumencie, co może być frustrujące dla użytkowników, gdy treść przesunie się po rozpoczęciu jej przeglądania. Może to spowodować, że użytkownicy stracą miejsce podczas czytania lub „przegapią” zamierzony cel kliknięcia i klikną coś innego, czego nie chcieli, podczas wczytywania strony.
Alternatywą dla podawania szerokości i wysokości jest użycie właściwości CSS aspect-ratio property na obrazie. Ma to podobny wpływ na rozmiar elementu jak atrybuty width i height, ponieważ kontener zachowa stały współczynnik proporcji. Różnica polega jednak na tym, że może to spowodować użycie innego współczynnika proporcji niż ten, w którym obraz jest udostępniany, dlatego prawdopodobnie będziesz musiał(-a) użyć ustawienia object-fit, aby obraz nie był zniekształcony w tym konkretnym widoku 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Zweryfikuj
Gdy zmienisz rozmiar wszystkich obrazów, ponownie uruchom Lighthouse, aby sprawdzić, czy niczego nie pominąłeś(-aś).