Przewodnik dla początkujących po responsywnych obrazach: jak je poprawić

W tym samouczku dotyczącym responsywnych obrazów omówiono techniki CSS, funkcje HTML i niektóre narzędzia, które warto wziąć pod uwagę. Wszystko to powinno dać dobry przegląd tego, jak zacząć pracę z responsywnymi obrazami w swoich projektach już dziś.

Spis treści:

• Responsywne obrazy ze zwykłym CSS
• Responsywne obrazy z srcset i sizes
• Używanie srcset z deskryptorem gęstości pikseli
• Korzystanie z elementu <picture>
• Narzędzia i usługi pomagające w responsywnych obrazach

Responsywne obrazy ze zwykłym CSS

Najprostszy sposób, aby dowolny obraz na stronie internetowej był responsywny, nie wymaga zapytań o media ani dodatkowego kodu HTML. Możesz powiększyć lub zmniejszyć dowolny obraz w zależności od rozmiaru okna za pomocą kilku linii HTML i CSS.

Po pierwsze, mój kod HTML będzie zawierał atrybuty width i height :

Najlepszą praktyką jest uwzględnienie wartości width i height w kodzie HTML. Gwarantuje to, że przeglądarka rezerwuje niezbędne miejsce na obraz i nie następuje ponowne wczytywanie strony podczas ładowania obrazu.

Oprócz tego użyję następującego CSS:

 img { max-width : 100% ; height : auto; }
 Język kodu: CSS ( css )

Te wartości zastąpią mój kod HTML. Właściwość max-width jest ustawiona na 100% , aby zapewnić wypełnienie wymaganej przestrzeni, maksymalnie do 1000px (wartość z HTML). Wartość height auto zapewnia, że ​​wysokość obrazu zachowuje proporcjonalne wymiary obrazu do jego naturalnej szerokości i wysokości. Jeśli usunę linię height: auto , obraz pozostanie na wysokości określonej w HTML, niezależnie od szerokości – co zwykle nie jest tym, czego chcę.

Możesz wypróbować ten prosty przykład za pomocą następującego CodePen. Jeśli chcesz przetestować responsywność, najlepiej otworzyć demo w nowym oknie.

I zauważ, że w moim przykładzie naturalne wymiary obrazu to 2000px x 1333px, ale wybieram wyświetlanie go w maksymalnej rozdzielczości 1000px.

Teoretycznie mógłbym zrobić powyższe dla każdego obrazu na mojej stronie, a byłby to podstawowy i akceptowalny sposób włączenia responsywnych obrazów do moich projektów. Ale idealnie, chciałbym przenieść to na wyższy poziom i uzyskać kontrolę nad rozdzielczością obrazu i innymi czynnikami, aby poprawić wydajność i pomóc w SEO, co omówię w kolejnych sekcjach.

Responsywne obrazy z srcset i sizes

W powyższym prostym przykładzie CSS ładuję obraz o rozmiarze około 1,44 MB — nawet po użyciu kompresji bezstratnej w celu zmniejszenia rozmiaru. To nie jest straszne samo w sobie, gdy ogląda się je na komputerze stacjonarnym, ale z pewnością nie jest to rozmiar, który chciałbym ładować na małym urządzeniu, takim jak smartfon. Tutaj przydają się atrybuty srcset i sizes .

Atrybut srcset umożliwia określenie wielu rozmiarów obrazu w jednej wartości. Będą to obrazy, do których przeglądarka lub urządzenie będzie mieć dostęp w określonych okolicznościach. Atrybut srcset sizes przeglądarkę, który z obrazów wybrać.

Oto przykład, który używa wielu wersji obrazu leopard.png z poprzedniego przykładu:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Język kodu: HTML, XML ( xml )

Jeśli nigdy wcześniej nie widziałeś srcset i size sizes może to wydawać się mylące na pierwszy rzut oka. Podzielę to wszystko na części, więc stosunkowo łatwo to ogarnąć.

Podział atrybutu srcset

Atrybut srcset akceptuje listę oddzielonych przecinkami jednego lub więcej ciągów. Każdy ciąg zawiera:

• Adres URL wskazujący na obraz
• Jeden z następujących opcjonalnych deskryptorów (oddzielonych spacją):
  • Deskryptor szerokości
  • Deskryptor gęstości pikseli

W moim przykładzie dołączyłem deskryptor szerokości, który jest najczęściej widywany. Dołączyłem trzy różne wersje obrazu: dużą wersję o wysokiej rozdzielczości, jedną o szerokości 800 pikseli i drugą o szerokości 480 pikseli.

Zauważ, że kiedy użyłem deskryptora szerokości w powyższym przykładzie, składnią jest wartość szerokości, po której następuje „w” (nie używaj wartości jednostki „px”!). Dla każdego deskryptora szerokości reprezentującego obrazy używam wewnętrznej szerokości obrazu w pikselach. Możesz uzyskać prawdziwy rozmiar dowolnego obrazu na kilka różnych sposobów – odwołując się do jego właściwości w systemie plików, edytorze zdjęć, a nawet w przeglądarce lub narzędziach programistycznych przeglądarki.

Podział atrybutu sizes

Atrybut sizes działa tylko razem z atrybutem srcset . Możesz używać samego srcset (patrz następna sekcja), ale najczęstszym sposobem użycia srcset jest użycie sizes .

sizes size akceptuje listę oddzielonych przecinkami jednego lub więcej ciągów. Każdy ciąg zawiera:

• Warunek mediów (podobny do zapytań o media używanych w CSS)
• Wartość określająca rozmiar „szczeliny”, jaką zajmie obraz

Wartość boksu może być długością bezwzględną, taką jak em lub px , lub jednostką względną w oknie widoku (np. vw ). Zauważ, że w moim przykładzie wartości slotów w atrybucie size nie odpowiadają dokładnie trzem deskryptorom sizes . Oto kod ponownie:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Język kodu: HTML, XML ( xml )

Fakt, że wartości przedziałów nie pasują dokładnie do deskryptorów szerokości, jest w porządku. W moim przypadku sizes mogę rozbić jako:

• Widok o szerokości 600 pikseli załaduje obraz 480 w z wartości srcset wewnątrz szczeliny o szerokości 480 pikseli.
• Widok o szerokości 1000px załaduje obraz 800w w gnieździe 800px.
• Domyślny obraz w pełnym rozmiarze (2000w) wypełni boks 1000px, jeśli poprzednie warunki dotyczące multimediów nie są spełnione.

Ostatni ciąg to sama wartość boksu, bez warunku multimediów. Jak wspomniano, zapewnia to, że przeglądarka będzie miała coś do wyświetlenia, jeśli żaden z warunków mediów nie zostanie spełniony, działając domyślnie.

Możesz zobaczyć przykładowy kod w akcji, korzystając z poniższego demo CodePen. Pamiętaj, że w tym przypadku będziesz musiał przetestować na czymś, co naśladuje różne urządzenia (np. DevTools w Chrome). Możesz również otworzyć stronę za pomocą różnych prawdziwych urządzeń, aby przeprowadzić prawdziwy test. Dla wygody umieściłem nakładkę tekstową na każdym z obrazów, dzięki czemu możesz zobaczyć, który ładuje się podczas przeglądania strony.

Zwróć uwagę, że po załadowaniu oryginalnego obrazu obraz nie zmienia rozmiaru po zmianie rozmiaru widocznego obszaru. srcset i sizes są przydatne do ładowania obrazów zgodnie z warunkami mediów przy pierwszym załadowaniu, ale nie pomogą w przełączaniu obrazów na podstawie zmiany rozmiaru ekranu. Później pokażę Ci inną funkcję responsywnych obrazów, która rozwiąże ten problem.

Używanie srcset z deskryptorem gęstości pikseli

Wcześniej wspomniałem, że atrybut srcset może być używany z deskryptorem gęstości pikseli. Ten deskryptor pozwala przeglądarce zdecydować, którego obrazu użyć, w oparciu o możliwości rozdzielczości urządzenia. Oto jak to wygląda:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Język kodu: HTML, XML ( xml )

Zwróć uwagę na kilka rzeczy. Po pierwsze, dla zwykłego atrybutu src używam najmniejszego obrazu, zapewniając podejście mobile-first. Następnie atrybut srcset zawiera kilka innych wersji obrazu, z rozdzielczością wskazaną przez deskryptory 1.5x i 2x. Obraz 480 nie zawiera deskryptora, ponieważ 1x jest implikowany. Na koniec zauważ, że nie ma sizes size, którego nie potrzebuję w tym przypadku. MDN wyjaśnia, w jaki sposób przeglądarka wybiera obraz:

Aby zrozumieć, jak działają deskryptory, pamiętaj, że jeden piksel urządzenia reprezentuje każdy piksel CSS. Tak więc 1x byłoby stosunkiem 1:1, 1,5x byłoby stosunkiem 1,5:1 i tak dalej. Możesz go wypróbować w CodePen poniżej, ale będziesz musiał użyć różnych urządzeń (lub użyć narzędzia, które je naśladuje), aby zobaczyć różnicę.

Korzystanie z elementu <picture>

Jak dotąd omówione przeze mnie funkcje włączania responsywnych obrazów zakładają, że zawsze wyświetlam ten sam obraz, ale w różnych rozmiarach i rozdzielczościach. I chociaż używam CSS we wszystkich przykładach, aby zmienić szerokość obrazów, gdy użytkownik zmienia rozmiar przeglądarki, sam obraz nigdy się nie zmienia po załadowaniu strony.

Element <picture> to funkcja HTML, która umożliwia oferowanie alternatywnych wersji obrazu w oparciu o obecność określonych funkcji multimedialnych. Pozwala to również na przełączanie obrazów, gdy użytkownik zmienia rozmiar widocznego obszaru i zasadniczo pozwala na kierowanie grafiką na obrazach, pokazując odmiany tej samej sceny, ale przycięte lub powiększone w różny sposób w zależności od rozmiaru urządzenia.

Na przykład szerokie ujęcie z małym obiektem w środku byłoby odpowiednie dla większego urządzenia na komputerze stacjonarnym lub tablecie, ale mniejsze urządzenie, takie jak smartfon, mogłoby załadować ten sam obraz przycięty lub powiększony.

Oto przykładowy kod, który pozwoli mi na wykonanie pewnych ukierunkowań artystycznych na moim obrazie:

Zwróć uwagę na następujące informacje o kodzie:

• Element <picture> akceptuje wiele zagnieżdżonych elementów <picture> jako dzieci
• Każdy z elementów <source> wewnątrz <picture> używa atrybutu media do zdefiniowania warunku mediów, który wyzwala użycie tego obrazu źródłowego
• Element <picture> akceptuje zwykłe <img> element jako element podrzędny, który przeglądarka rozpoznaje jako awaryjny, jeśli nie obsługuje <picture>
• Brak atrybutów bezpośrednio w elemencie <picture <picture> ( <picture> akceptuje tylko globalne atrybuty HTML i nie ma żadnych własnych atrybutów)

Poniższy CodePen pokazuje to:

Jeśli otworzysz demo w nowym oknie, możesz zmienić rozmiar okna, aby zobaczyć zmianę obrazu. Zwróć uwagę, jak temat obrazu jest powiększany w miarę zmniejszania się okna przeglądarki. Jest to łatwy sposób na tworzenie responsywnych obrazów kierowanych grafiką, które wyglądają odpowiednio na dowolnym używanym urządzeniu. Oczywiście wymaga to trochę więcej pracy, ale warto, jeśli chcesz, aby Twoje obrazy były znaczące na dowolnym używanym urządzeniu.

Narzędzia i usługi pomagające w responsywnych obrazach

Dostępnych jest niezliczona ilość narzędzi, zarówno bezpłatnych, jak i komercyjnych, które pomogą we wdrażaniu responsywnych obrazów. A niektóre z nich pomogą ci uniknąć nawet konieczności pisania kodu, który omówiłem. Oto kilka, które mogą Ci się przydać:

Co ważne i wygodnie, wiele różnych usług może automatycznie tworzyć responsywne obrazy, oferując takie funkcje, jak różne rozmiary obrazów, interfejs API do generowania obrazów w locie i nie tylko.

Nawet sam WordPress ma wbudowaną obsługę responsywnych obrazów (od wersji 4.4).

Kolejnym narzędziem/usługą, na którą warto zwrócić uwagę, jest Optimole. Jest to zaawansowane narzędzie do optymalizacji i dostarczania obrazów, stworzone przez zespół odpowiedzialny za Themeisle. Ten nie tylko zmniejszy rozmiar dysku z obrazami bez uszczerbku na jakości wizualnej, ale także zadba o dostarczanie obrazów do odwiedzających witrynę za pośrednictwem obrazu CDN. Jednym z aspektów tej funkcji dostarczania obrazów jest to, że Twoje obrazy zostaną również zoptymalizowane pod kątem wyświetlania na różnych urządzeniach.

Dostępna jest darmowa wersja Optimole. Umożliwia do 5000 wizyt w witrynie miesięcznie i zapewnia wszystkie funkcje automatycznego skalowania, CDN i nie tylko.

Jakie masz doświadczenia z responsywnymi obrazami na stronach internetowych? Daj nam znać w komentarzach poniżej.

Układ i prezentacja autorstwa Chrisa Fitzgeralda i Karola K.