Obrazy responsywne to obrazy, które dostosowują się do różnych cech urządzenia, na którym są wyświetlane. Prawidłowo wykonane obrazy responsywne mogą poprawić wydajność witryny i poprawić komfort użytkowania.
W tym artykule dowiesz się, jak tworzyć responsywne obrazy w HTML za pomocą srcset i pierwiastek Obrazek. Zweryfikować Możesz kodować w podróży: najlepsze aplikacje do edycji HTML na Androida.
Szybkie linki
Dlaczego warto używać obrazów responsywnych?
Kiedy inżynierowie oprogramowania tworzyli strony internetowe, nie zastanawiali się nad tym, jak przeglądarki będą obsługiwać responsywne obrazy. W końcu użytkownicy często korzystali z internetu tylko z komputerów stacjonarnych lub laptopów. Oczywiście, dziś to już nieprawda.
ا لـ Statista Ponad 90 procent użytkowników internetu na świecie przegląda sieć za pomocą telefonów komórkowych. Większość stron internetowych zawiera obrazy, a te obrazy są jednym z mierników wydajności sieci. Aby poprawić wydajność, musisz zoptymalizować obrazy, dostosowując je do potrzeb użytkowników. Sprawdź Najpopularniejsze narzędzia do tworzenia stron internetowych, z których korzysta każdy profesjonalista.
Jak tworzyć responsywne obrazy w HTML
Responsywny projekt stron internetowych oznacza, że nie tylko układy stron mogą się zmieniać w zależności od charakterystyki używanego urządzenia, ale także treść. Na przykład, na ekranach o wysokiej rozdzielczości (2x), grafika o wysokiej rozdzielczości jest również wymagana, aby zapewnić ostrość. Obraz o proporcjach 50% może działać dobrze tylko w przeglądarce o szerokości 800 pikseli, ale będzie miał znaczący wpływ na wąski telefon, a problem z przepustowością będzie nadal występował, gdy rozmiar zostanie zmniejszony, aby dopasować się do mniejszych ekranów.
Przedmiot charakteryzuje się img Ponieważ ułatwia pobieranie, dekodowanie i wyświetlanie treści, nowoczesne przeglądarki obsługują wiele formatów obrazów. Osadzanie obrazów działających na różnych urządzeniach niczym nie różni się od osadzania obrazów na komputerach stacjonarnych, a do stworzenia dobrego wrażenia wystarczy zaledwie kilka drobnych zmian.
Możesz obsługiwać obrazy responsywne z dwóch perspektyw — albo wyświetlając ten sam obraz w różnych rozmiarach, albo wyświetlając różne obrazy w zależności od charakterystyki wyświetlania. Możesz użyć Lub Te dwie opcje inaczej obsługują obrazy responsywne, ale wszystkie wyświetlają jeden obraz z pewnych alternatyw, w zależności od zestawu reguł.
Korzystanie z srcset
Funkcja ta pozwala na: Standardowy HTML pozwala na określenie tylko jednego pliku graficznego. Jeśli chcesz wyświetlać inny obraz w zależności od rozmiaru urządzenia, użyj srcset.
składnia:
Funkcja ta pozwala na: srcset Dzięki udostępnieniu dodatkowych plików źródłowych przeglądarka wybierze obraz, który będzie wyglądał optymalnie przy danym rozmiarze ekranu.
Składa się z srcset Składa się z trzech części: nazwy pliku obrazu, która określa ścieżkę do obrazu źródłowego, obszaru oraz wewnętrznej lub rzeczywistej szerokości obrazu.
Używanie srcset z rozmiarami
Problem z używaniem srcset Nie możesz kontrolować, który obraz przeglądarka wybierze do wyświetlenia. Połączenie atrybutów srcset i sizes rozwiązuje ten problem. Rozmiary określają zestaw warunków multimediów, które wskazują optymalny rozmiar obrazu.
Teraz możesz nadpisać tag. Powyżej jak następuje.
Rozmiary składają się z warunku multimediów, w tym przykładzie (max-width: 600px), który reprezentuje szerokość obszaru widoku, odstępu oraz szerokości slotu (480px) określającej przestrzeń, którą obraz wypełniłby, gdyby warunek multimediów był prawdziwy.
W tym przypadku przeglądarka najpierw sprawdzi wyświetlacz urządzenia i porówna go z parametrami multimediów. Jeśli warunek jest spełniony, sprawdzi wyświetlacz slotu i załaduje z niego obraz. srcset Obraz o tej samej szerokości lub większy.
Zwróć uwagę, że uwzględniasz również src Zawiera obraz w celach referencyjnych dla przeglądarek, które nie obsługują srcset i rozmiarów.
Pozwalam ci srcset Również poprzez renderowanie obrazów w różnych rozdzielczościach przy użyciu deskryptorów x.
W tym przykładzie, jeśli urządzenie ma rozdzielczość 1 pikseli na arkusz CSS lub większą, przeglądarka załaduje obraz cute-cat-highXNUMX.jpg.
Atrybut srcset poprawia działanie elementu img, ułatwiając udostępnianie wielu plików graficznych dla różnych funkcji urządzenia. Podobnie jak image-set, natywna funkcja CSS, pozwala srcset Przeglądarka wybierze najlepszy obraz w oparciu o funkcje urządzenia, np. użyje obrazu 2x na wyświetlaczu 2x, a w przyszłości prawdopodobnie obrazu 1x na urządzeniu 2x, gdy korzystasz z sieci o ograniczonej przepustowości.
Piksele sprzętowe i programowe
Problem z tym rozwiązaniem polega na tym, że obrazy reagują jedynie na gęstość pikseli urządzenia. Jest to stosunek pikseli sprzętowych do pikseli programowych (CSS). Piksel urządzenia to rzeczywisty punkt świetlny na ekranie, podczas gdy piksel programowy (CSS) to jednostka miary. Gęstość pikseli określa rozdzielczość urządzenia.
Dostarczając responsywne obrazy, nie bierz pod uwagę tylko rozdzielczości; rozmiar ekranu również ma znaczenie. W przeciwnym razie możesz przesyłać niepotrzebnie duże lub pikselowate obrazy.
Używać
Funkcja Jest to element HTML, który opakowuje wiele elementów. który zawiera różne pliki źródłowe i elementy Podczas gdy robisz Obrazy są responsywne, oferując różne rozmiary tego samego obrazu, co pozwala na: Rzeczywista zmiana wyświetlanego obrazu.
składnia:
Rozważmy sytuację, w której masz duży obraz w orientacji poziomej. Obraz wyświetla się proporcjonalnie na komputerze, ale drastycznie zmniejsza się na urządzeniach mobilnych, przez co elementy obrazu wydają się małe. Brak reakcji obrazu negatywnie wpływa na komfort użytkowania. Korzystanie z motywu Możesz ustawić w przeglądarce opcję przełączenia na tryb zbliżenia podczas korzystania z urządzenia mobilnego.
Podobnie jak w pierwszej metodzie atrybut zawiera Atrybut multimediów, którego można użyć do podania stanu multimediów. Na przykład przeglądarka wyświetli „cute-cat-480w.jpg”, jeśli szerokość pola widzenia wynosi 639 pikseli lub mniej. Atrybut zachowuje srcset Z ścieżką do pliku obrazu, który chcesz wyświetlić i wybrać src Domyślny obraz.
Powrót do formatu obrazu WebP
Inną rzeczą związaną z tą funkcją Zaletą jest to, że zapewnia on kopię zapasową dla nowoczesnych formatów obrazów, takich jak WebP. Obrazy WebP charakteryzują się wysoką wydajnością, często niewielkim rozmiarem i zapewniają szybkie działanie w sieci. Dlatego warto zdecydować się na ich używanie na swoich stronach internetowych. Wyzwaniem, z którym możesz się spotkać, jest to, że nie wszystkie przeglądarki obsługują obrazy WebP. Dzięki temu atrybutowi Ten problem nie wystąpi, ponieważ Twoja przeglądarka może załadować alternatywny obraz, jeśli nie obsługuje formatu WebP.
Dlaczego warto tworzyć obrazy front-end w HTML, a nie CSS?
CSS oferuje zaawansowane opcje obsługi responsywnych obrazów. Dlaczego z nich nie skorzystać? Przeglądarki internetowe wstępnie ładują obrazy przed analizą kodu CSS. Dlatego zanim JavaScript witryny wykryje obszar wyświetlania, aby wprowadzić odpowiednie zmiany w obrazach, oryginalne obrazy są wstępnie ładowane. Z tego powodu najlepiej obsługiwać responsywne obrazy za pomocą HTML.
Dąż do uzyskania najlepszej możliwej jakości obrazu.
Widziałeś, jak można tworzyć responsywne obrazy w HTML, używając و W tym artykule responsywne renderowanie obrazu zazwyczaj polega na uwzględnieniu rozmiaru i rozdzielczości obrazu w odniesieniu do rozmiaru ekranu. Nieprawidłowe wykonanie może negatywnie wpłynąć na jakość obrazu. Upewnij się, że wybierzesz obraz, który zapewnia optymalną użyteczność przy minimalnym wykorzystaniu zasobów. Sprawdź Jak otwierać i konwertować zdjęcia HEIC na Androidzie.
