Na pewno znasz to uczucie: trzeba skalować obraz w dół przed dodaniem go do stronę. Zdjęcie wygląda dobrze, ale szkodzi użytkownikom dane i szkodliwa strona skuteczność reklam.
Wykrywanie obrazów o nieprawidłowych rozmiarach
Narzędzie Lighthouse ułatwia rozpoznawanie obrazów o nieprawidłowym rozmiarze. Użycie Audyt wydajności (Lighthouse > Opcje > Skuteczność), wyniki kontroli Odpowiedni rozmiar obrazów. W ramach kontroli zostaną wymienione wszystkie obrazy, które zostały trzeba zmienić ich rozmiar.
Określanie właściwego rozmiaru zdjęcia
Rozmiary obrazów mogą być skomplikowane. Dlatego przygotowaliśmy 2 odpowiedzi podejścia: „dobre” i „lepsze”. Obie te metody poprawią wydajność, ale „lepszy” ich zrozumienie i wdrożenie może zająć trochę więcej czasu. Jednak i zapewni większy wzrost wydajności. Najlepszy wybór dla który czuje się Pan/Pani w wyborze.
Kilka słów o jednostkach CSS
Istnieją 2 typy jednostek CSS do określania rozmiaru elementów HTML: w tym obrazy:
- Jednostki bezwzględne: elementy z użyciem jednostek bezwzględnych zawsze będą wyświetlane w tym samym rozmiarze, niezależnie od urządzenia. Przykłady prawidłowych, bezwzględne jednostki CSS: px, cm, mm, in.
- Jednostki względne: elementy korzystające z jednostek względnych będą wyświetlane różne rozmiary w zależności od podanej długości. Przykłady prawidłowe, względne jednostki CSS: %, vw (1vw = 1% szerokości widocznego obszaru), em (1,5 em = 1,5 raza rozmiar czcionki).
Wyrażenie „Dobrze” Rozwiązanie
W przypadku zdjęć o rozmiarach opartych na...
- Jednostki względne: zmień rozmiar obrazu na taki, który będzie działał na wszystkich urządzeniach.
Warto sprawdzić swoje dane analityczne (np. dotyczące Analytics), aby sprawdzić, jakie rozmiary reklam displayowych są powszechnie używane przez użytkowników. Ewentualnie screensiz.es zawiera informacje dotyczące wyświetlania wielu popularnych urządzeń. – Jednostki bezwzględne: zmień rozmiar obrazu, aby pasował do rozmiaru, w którym jest wyświetlany.
Panel Elementy w Narzędziach deweloperskich może służyć do określania rozmiaru obrazu wyświetlany na:
„Lepszy” podejście
W przypadku obrazów o rozmiarze bezwzględnym i względnym użyj właściwości srcset.
i sizes
pozwalają wyświetlać różne obrazy w zależności od gęstości ekranu.
Przeczytaj poradnik dotyczący obrazów elastycznych.
„Układ interfejsu” odnosi się do tego, że różne wyświetlacze różnią się gęstości pikseli. Jeśli inne parametry są takie same, duża gęstość pikseli i wyglądają ostrzej niż na wyświetlaczu o niskiej gęstości pikseli.
Dlatego też musisz dodać wiele wersji obrazu, jeśli chcesz, aby użytkownicy są ostre, niezależnie od gęstości pikseli urządzenia użytkownika.
Jest to możliwe dzięki technikom tworzenia obrazów elastycznych, które umożliwiają wielu wersji obrazu i umożliwić urządzeniu wybór obrazu, który sprawdzi się w każdej sytuacji najlepsze w danym przypadku.
Obraz, który wyświetla się na wszystkich urządzeniach, będzie niepotrzebnie duży, na mniejszych urządzeniach. Techniki obrazów elastycznych, w szczególności srcset i rozmiary, pozwalają określić wiele wersji obrazu i pozwolić urządzeniu rozmiar, który będzie dla niego najlepszy.
Zmień rozmiar obrazów
Niezależnie od wybranej strategii zastosowanie może okazać się pomocne ImageMagick, aby zmienić rozmiar obrazów. ImageMagick to najpopularniejszy narzędzia wiersza poleceń, które pozwala tworzyć i edytować obrazy. Większość osób może zmieniać rozmiar obrazów przy użyciu interfejsu wiersza poleceń znacznie szybciej niż edytor obrazów oparty na GUI.
Zmniejsz rozmiar obrazu do 25% rozmiaru oryginału:
convert flower.jpg -resize 25% flower_small.jpg
Przeskaluj obraz tak, aby pasował do rozmiaru 200 piks. szerokości i 100 pikseli wysokości:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Jeśli zmieniasz rozmiar wielu obrazów, wygodniejsze może być użycie skrypt lub usługę do automatyzacji tego procesu. Więcej informacji na ten temat znajdziesz w Przewodnik po obrazach elastycznych.
Określ wymiary, by uniknąć przesunięć układu
W tym przewodniku omawiamy wymiary obrazu w kontekście ograniczania liczby pobieranych zbędnych bajtów. Warto jednak pamiętać, że zarezerwowanie odpowiedniej przestrzeni na obrazy w układzie to kolejny ważny element zminimalizowania wartości skumulowanego przesunięcia układu na stronie. 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 równoważnego rozmiaru CSS przeglądarka nie wie, ile miejsca zajmie wczytywany obraz. Spowoduje to przesunięcia układu dokumentu, co może być frustrujące dla użytkowników, gdy treści przesuwają się po tym, jak zaczną z nich korzystać. Może to doprowadzić do tego, że użytkownicy stracą przy tym miejsce podczas czytania lub „zapomnieli”. zamierzony cel działania i w końcu klikną coś innego podczas wczytywania strony.
Zamiast bezpośrednio podawać szerokość i wysokość, możesz użyć właściwości aspect-ratio CSS dla obrazu. Ma to podobny wpływ na rozmiar elementu co atrybuty width i height w tym sensie, że kontener zachowuje stały współczynnik proporcji. Różnica polega jednak na tym, że może to spowodować użycie innego współczynnika proporcji niż na zdjęciu, więc warto użyć ustawienia object-fit, aby mieć pewność, że obraz nie zostanie zniekształcony w tym jawnym widoku 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Zweryfikuj
Po zmianie rozmiarów wszystkich obrazów ponownie uruchom Lighthouse, aby sprawdzić, czy zmiany zostały wprowadzone coś przegapić.