Przewodnik dla początkujących po responsywnych obrazach w HTML

Obraz responsywny to obraz, który dostosowuje się do różnych cech urządzenia. Odpowiednio wykonane obrazy responsywne mogą poprawić wydajność i wygodę użytkownika witryny.

Z tego artykułu dowiesz się, jak tworzyć responsywne obrazy w HTML za pomocą zestaw źródłowy i element obrazu.

Dlaczego warto korzystać z responsywnych obrazów?

Kiedy inżynierowie oprogramowania tworzyli sieć, nie zastanawiali się, w jaki sposób przeglądarki poradziłyby sobie z responsywnymi obrazami. W końcu użytkownicy uzyskiwali dostęp do sieci tylko z komputerów stacjonarnych lub laptopów. Oczywiście dzisiaj tak nie jest.

Według Statystyka, ponad 90 procent światowej populacji internetu korzysta z internetu za pomocą telefonu komórkowego. Większość stron internetowych zawiera obrazy, które są jednym z mierników używanych do pomiaru wydajności sieci. Aby poprawić wydajność, musisz zoptymalizować obrazy, czyniąc je responsywnymi.

Jak tworzyć responsywne obrazy w HTML

Możesz podejść do responsywnych obrazów pod dwoma kątami — wyświetlając ten sam obraz w różnych rozmiarach lub wyświetlając różne obrazy zgodnie z charakterystyką wyświetlania. Możesz użyć lub. Te dwie opcje inaczej obsługują obrazy responsywne, ale wszystkie wyświetlają jeden obraz z podanych alternatyw w zależności od ustawionych reguł.

Związane z: Jak sprawić, by Twoja witryna była responsywna i interaktywna dzięki CSS i JavaScript?

Korzystanie z zestawu src

Standardowy HTML pozwala określić tylko jeden plik obrazu. Jeśli chcesz wyświetlić inny obraz w zależności od wielkości urządzenia, powinieneś użyć zestaw źródłowy.

Składnia:

zestaw źródłowy umożliwia dostarczenie dodatkowych plików źródłowych, a przeglądarka wybierze obraz, który wydaje się optymalny dla tego rozmiaru obrazu.

 src="słodki-kot.jpg"
 alt="Słodki kot">

zestaw źródłowy składa się z trzech części: Nazwa pliku obrazu, która określa ścieżkę do obrazu źródłowego, spację i wewnętrzną lub rzeczywistą szerokość obrazu.

Korzystanie z zestawu srcset z rozmiarami

Problem z używaniem zestaw źródłowy jest to, że nie masz kontroli nad tym, jaki obraz wybierze przeglądarka. Łączenie zestaw źródłowy z rozmiary rozwiązuje ten problem. rozmiary zdefiniuj zestaw warunków mediów, które wskazują na obraz o optymalnym rozmiarze.

Możesz teraz przepisać tag powyżej w następujący sposób.

size="(max-szerokość: 600px) 480px,
 800px"
 src="słodki-kot.jpg"
 alt="Słodki kot">

rozmiary składa się z warunku mediów, w tym przykładzie (max-width: 600px), który reprezentuje widoczny obszar szerokość, przestrzeń i szerokość szczeliny (480px) określające przestrzeń, którą obraz wypełni, jeśli warunek nośnika to prawda.

Związane z: Jak używać zapytań o media w HTML i CSS do tworzenia responsywnych stron internetowych?

Tutaj przeglądarka najpierw sprawdzi szerokość urządzenia i porówna ją z warunkami mediów. Jeśli warunek jest spełniony, sprawdzi szerokość szczeliny i załaduje obraz z zestaw źródłowy o tej samej szerokości lub kolejnej większej.

Pamiętaj, że dołączasz również src co zapewnia, że ​​obraz będzie wracał do przeglądarek, które nie obsługują zestaw źródłowy oraz rozmiary.

zestaw źródłowy umożliwia również wyświetlanie obrazów w różnych rozdzielczościach przy użyciu deskryptorów x.

 src="słodki-kot-niski.jpg"
 alt="Słodki kot">

W tym przykładzie, jeśli urządzenie ma rozdzielczość dwóch pikseli urządzenia na CSS lub więcej, przeglądarka załaduje obraz cute-cat-high1.jpg.

Piksele sprzętowe i programowe

Problem z tym rozwiązaniem polega na tym, że obrazy reagują tylko pod względem gęstości pikseli urządzenia. Jest to stosunek pikseli sprzętowych do oprogramowania lub pikseli CSS. Piksel sprzętowy to rzeczywista kropka światła na ekranie, podczas gdy piksel oprogramowania lub piksel CSS jest jednostką miary. Gęstość pikseli określa rozdzielczość urządzenia.

Podczas renderowania responsywnych obrazów nie bierz pod uwagę tylko rozdzielczości; ważny jest również rozmiar wyświetlacza. W przeciwnym razie możesz niepotrzebnie ładować duże obrazy lub obrazy, które są zbyt pikselowe.

 src="słodki-kot-niski.jpg"
 alt="Słodki kot">

Za pomocą

to element HTML, który otacza kilka elementy zawierające różne pliki źródłowe i element. Dopóki sprawia, że ​​obrazy są responsywne, obsługując różne rozmiary tego samego obrazu, pozwala na faktyczną zmianę wyświetlanego obrazu.

Składnia:

Rozważ sytuację, w której masz duży obraz poziomy. Obraz jest wyświetlany i wygląda proporcjonalnie na pulpicie, ale na urządzeniach mobilnych znacznie się kurczy, przez co elementy na obrazie stają się malutkie. Nieresponsywny obraz przyczynia się do złych doświadczeń użytkownika. Z na urządzeniu mobilnym możesz nakazać przeglądarce przełączanie się na portret w zbliżeniu.

Podobnie jak w pierwszym podejściu, zawiera atrybut media, którego można użyć do podania warunku mediów. Na przykład przeglądarka wyświetli „cute-cat-480w.jpg”, jeśli szerokość widocznego obszaru wynosi 639 pikseli lub mniej. ten zestaw źródłowy przechowuje ścieżkę pliku obrazu, który chcesz wyświetlić i src określa obraz domyślny.

Związane z: 7 nowych funkcji CSS do stworzenia responsywnej strony internetowej

Powrót do formatu obrazu WebP

Kolejna rzecz, która dobrze sobie radzi, jest rozwiązaniem awaryjnym dla nowoczesnych formatów graficznych, takich jak WebP. Obrazy WebP mają wysoką wydajność, są małe i zapewniają szybkie korzystanie z Internetu. Możesz więc zdecydować się na ich wykorzystanie w swoich witrynach. Wyzwaniem, które możesz napotkać, jest to, że nie wszystkie przeglądarki obsługują obrazy WebP. Z, ten problem nie występuje, ponieważ Twoja przeglądarka może załadować alternatywny obraz, jeśli nie obsługuje WebP.

Po co tworzyć responsywne obrazy w HTML, a nie w CSS?

CSS oferuje solidne opcje obsługi responsywnych obrazów. Dlaczego więc tego nie wykorzystać? Przeglądarka wstępnie ładuje obrazy przed przeanalizowaniem CSS. Dlatego zanim JavaScript Twojej witryny wykryje szerokość widocznego obszaru, aby wprowadzić odpowiednie zmiany w obrazach, oryginalne obrazy zostały już wstępnie załadowane. Z tego powodu lepiej jest obsługiwać responsywne obrazy za pomocą HTML.

Dąż do uzyskania najlepszej możliwej jakości obrazu

Widziałeś, jak możesz tworzyć responsywne obrazy w HTML za pomocą > i w tym artykule. Wyświetlanie responsywnych obrazów zwykle wiąże się z uwzględnieniem rozmiaru obrazu i rozdzielczości obrazu w odniesieniu do rozmiaru wyświetlacza. Jeśli zrobisz to źle, jakość obrazu może ucierpieć. Upewnij się, że wybierasz obraz, który zapewnia optymalną użyteczność przy użyciu jak najmniejszej ilości zasobów.

Responsywne zasady projektowania stron internetowych

Projektanci stron internetowych od lat promują projektowanie responsywne, ale co to jest i jak może tworzyć doskonałe strony internetowe?

Czytaj dalej

O autorze