Najważniejsze wskazówki dotyczące skuteczności w internecie

Użyj atrybutu srcset, aby automatycznie wybrać odpowiedni rozmiar obrazu.

Sam Dutton

Według danych w archiwum HTTP plik przeciętna strona mobilna waży ponad 2,6 MB, a ponad 2/3 tych danych waga to obrazy. To świetna okazja do optymalizacji!

Średnia liczba bajtów na stronie mobilnej według typu treści

Podsumowanie

  • Nie zapisuj obrazów, których rozmiar nie przekracza ich rozmiaru.
  • Zapisz różne rozmiary każdego obrazu i użyj srcset aby przeglądarka mogła wybrać najmniejszy atrybut. Wartość w informuje przeglądarkę o szerokości każdej wersji:
<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Zapisywanie obrazów w odpowiednim rozmiarze

Możesz przyspieszyć działanie witryny i ograniczyć ilość danych za pomocą obrazów, które które pasują do rozmiaru interfejsu. Inaczej mówiąc, zadbaj o to, szerokości i wysokości.

Przyjrzyj się poniższym ilustracjom.

Wyglądają one prawie tak samo, ale jeden plik ma więcej niż 10 razy. większy od drugiego.

Little Puss i Lias: dwa dziesięciotygodniowe pręgowane kocięta.
Zapisana szerokość 1000 pikseli, rozmiar pliku 184 KB
Little Puss i Lias: dwa dziesięciotygodniowe pręgowane kocięta.
Zapisana szerokość 300 pikseli, rozmiar pliku 16 KB

Pierwszy obraz jest znacznie większy, ponieważ został zapisany wraz z wymiarami. jest znacznie większy od rozmiaru wyświetlacza. Oba obrazy są wyświetlane ze stałym i szerokości 300 pikseli, warto więc użyć obrazu zapisanego rozmiaru.

W przypadku reklam o stałej szerokości użyj obrazów zapisanych o tych samych wymiarach co rozmiar interfejsu.

Ale co, jeśli rozmiar wyświetlacza się różni?

W świecie, w którym jest wiele urządzeń, obrazy nie zawsze wyświetlają się w jednym, stałym rozmiarze.

Elementy graficzne mogą mieć szerokość procentową lub należeć do układów elastycznych której rozmiar obrazu dopasowuje się do rozmiaru ekranu.

...a co z urządzeniami wymagającymi dużo pikseli, takimi jak wyświetlacze Retina?

Pomóż przeglądarce wybrać odpowiedni rozmiar obrazu

Czy nie byłoby wspaniale, gdyby można było udostępnić obrazy w różnych rozmiarach, pozwala przeglądarce wybrać rozmiar najlepiej dopasowany do urządzenia i rozmiaru wyświetlacza. Niestety, catch-22, jeśli chodzi o podczas pracy nad tym, jaki obraz jest najlepszy. Przeglądarka powinna używać jak najmniejszej obrazu, ale nie może poznać jego szerokości, jeśli go nie pobierzesz do sprawdzenia.

Z pomocą przychodzi tu srcset. Zapisujesz obrazy w różnych rozmiarach, a potem podaj przeglądarce szerokość każdej wersji:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

Wartości w pokazują szerokość każdego obrazu w pikselach. Przykład: small.jpg 500w informuje przeglądarkę, że plik small.jpg to 500 pikseli szerokości ekranu. Dzięki temu przeglądarka może wybrać najmniejszy możliwy obraz, w zależności od typu ekranu i rozmiaru widocznego obszaru – bez konieczności pobierać obrazy, aby sprawdzić ich rozmiar.

Poniżej możesz zobaczyć, jak działa srcset. Jeśli korzystasz z laptopa lub na komputerze, zmień rozmiar okna przeglądarki i ponownie otwórz tę stronę. Następnie w panelu Sieć w narzędziach przeglądarki sprawdź, który obraz został użyty. (trzeba to zrobić w oknie incognito lub prywatnym, w przeciwnym razie oryginalny plik obrazu zostanie zapisany w pamięci podręcznej).

Lias i Little Puss: dwa 10-tygodniowe szare pręgowane kocięta

Jak mogę utworzyć obraz o kilku rozmiarach?

Dla każdego obrazu, którego chcesz użyć, musisz udostępnić wiele rozmiarów dzięki srcset.

W przypadku jednorazowych obrazów, takich jak baner powitalny, możesz ręcznie zapisać różne rozmiary. Jeśli musisz zautomatyzować dużo obrazów, np. zdjęć produktów. Możesz to zrobić na 2 sposoby.

Włączanie przetwarzania obrazów w procesie kompilacji

W ramach procesu tworzenia możesz dodać kolejne etapy tworzenia elementów o różnych rozmiarach różnych wersji obrazów. Patrz: „Korzystanie z aplikacji Imagemin do kompresowania obrazów”. aby dowiedzieć się więcej.

Użyj usługi obrazów

Tworzenie i przesyłanie obrazów można zautomatyzować za pomocą usług komercyjnych, takich jak Cloudinary lub jego odpowiedniki typu open source, takie jak kciuka – który instalujesz i uruchamiasz samodzielnie.

Automatycznie przesyłasz zdjęcia w wysokiej rozdzielczości, a do usługi obrazów tworzy i dostarcza różne formaty i rozmiary obrazów w zależności od adresu URL . Otwórz na przykład ten przykładowy obraz w Cloudinary i spróbuj zmienić wartość w lub rozszerzenie pliku na pasku adresu URL.

Usługi graficzne mają też bardziej zaawansowane funkcje, takie jak możliwość automatyzacji „inteligentne przycinanie” dla różnych rozmiarów i automatycznie wyświetlać obrazy w formacie WebP. do przeglądarek obsługujących ten format zamiast plików JPEG – bez zmiany pliku .

Narzędzia deweloperskie w Chrome pokazujące nagłówek typu treści WebP dla pliku udostępnianego przez Cloudinary

Co zrobić, jeśli obraz nie wygląda dobrze w różnych rozmiarach?

W takim przypadku użyj elementu <picture>, by wskazać „kierunek sztuki”: dodając inny obraz lub przycięty obraz w różnych rozmiarach. Więcej informacji znajdziesz w ćwiczeniach z programowania poświęconych sztuce.

A co z gęstością pikseli?

Zaawansowane urządzenia mają mniejsze (bardziej gęste) piksele fizyczne. Na przykład plik wysokiej klasy telefony mogą mieć 2 lub 3 razy więcej pikseli w każdym wierszu i to tańsze urządzenie.

Może to mieć wpływ na rozmiar wymagany do zapisywania obrazów. Nie idziemy w krew Więcej informacji na ten temat można znaleźć w Ćwiczenie z programowania „Używaj deskryptorów gęstości”.

A jaki rozmiar ma wyświetlane zdjęcie?

sizes pomoże Ci jeszcze lepiej wykorzystać możliwości srcset.

W przeciwnym razie podczas wybierania elementu obraz ze strony srcset. Atrybut sizes informuje przeglądarkę o szerokości pojawia się element graficzny, więc przeglądarka może wybrać najmniejszy możliwy pliku graficznego, zanim przystąpi do obliczeń układu.

W poniższym przykładzie sizes="50vw" informuje przeglądarkę, że ten obraz zostanie jest wyświetlany na 50% szerokości widocznego obszaru.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

Możesz zobaczyć, jak to działa, na simpl.info/sizes i ćwiczenie z programowania „Określanie wielu szerokości przedziałów”.

A co z obsługą przeglądarek?

Typy srcset i sizes są obsługiwane przez ponad 90% przeglądarek na całym świecie.

Jeśli przeglądarka nie obsługuje srcset ani sizes, zostanie przełączony tylko atrybut src.

To sprawia, że srcset i sizes to świetne, stopniowe ulepszenia.

Więcej informacji

Zajrzyj do sekcji „Zoptymalizuj obrazy” z web.dev, aby dowiedzieć się więcej o optymalizacji obrazów. Więcej wskazówek możesz wypróbować bezpłatną „Elastyczne Obrazy w programie. Udacity.