Obrazy HTML a obrazy tła CSS: kiedy używać którego | We.Inc
Wybierz między <img> a background-image, pisz tekst alt, zapobiegaj przesunięciom układu, buduj srcset i sizes, ładuj leniwie i serwuj WebP lub AVIF za pomocą <picture>.
Obrazy w HTML i obrazy tła w CSS
Używaj <img>, gdy obraz jest treścią: zdjęciem produktu, wykresem, portretem. Nadaj mu tekst alt, szerokość i wysokość. Używaj CSS background-image, gdy obraz jest dekoracją za tekstem. Dodaj srcset i sizes, aby telefony pobierały mniejsze pliki, oraz loading="lazy" dla obrazów poniżej pierwszego ekranu, nigdy dla obrazu hero.
<img> czy background-image?
Pytanie
<img>
Czy obraz niesie znaczenie?
Tak, z tekstem alt
Nie, tylko dekoracja
Czy wyszukiwarki powinny go indeksować?
Tak
Rzadko wychwytywane
Responsywne pliki
srcset i sizes
image-set() lub media queries
Leniwe ładowanie
loading="lazy"
Wymaga skryptu
Przycięcie, by wypełnić pole
object-fit: cover
background-size: cover
Drukowany domyślnie
Tak
Zwykle nie
Tabela decyzyjna, generator srcset pokazujący, który plik pobrałby telefon lub laptop, oraz edytowalne przykłady każdego wzorca: tekst alt, stałe wymiary, leniwe ładowanie, szybki obraz hero, przycinanie przez object-fit obok background-size, nowoczesne formaty z <picture> i responsywne tła z image-set().
Zacznij od tabeli decyzyjnej, aby wybrać między <img> a tłem CSS.
Jeśli używasz <img>, wpisz szerokości swoich obrazów w generatorze srcset i wybierz układ. Skopiuj wygenerowany znacznik.
Przesuwaj suwaki szerokości ekranu i gęstości pikseli, aby zobaczyć, który plik przeglądarka wybrałaby na każdym urządzeniu.
Skopiuj z przykładów każdy inny potrzebny wzorzec; wszystkie renderują się na żywo obok swojego kodu.
Zawsze ustawiaj atrybuty width i height na rzeczywisty rozmiar obrazu w pikselach. CSS nadal może go przeskalować; atrybuty pozwalają przeglądarce zarezerwować właściwe miejsce, zanim plik dotrze.
Największy obraz na pierwszym ekranie oznacz fetchpriority="high" i zostaw go z ładowaniem natychmiastowym. Leniwe ładowanie tego obrazu opóźnia największe renderowanie na stronie.
Na czysto dekoracyjnych obrazach zostaw pusty alt (alt=""), aby czytniki ekranu je pomijały, zamiast całkiem pomijać alt, przez co niektóre czytniki odczytują nazwę pliku.
Eksportuj zdjęcia w dwóch lub trzech szerokościach, na przykład 480, 960 i 1600 pikseli. Więcej rozmiarów rzadko pomaga, a spowalnia buildy.
Najczęściej zadawane pytania
Czy background-image szkodzi SEO?
Wyszukiwarki znacznie pewniej indeksują obrazy w elementach <img> niż te ustawione w CSS. Jeśli chcesz, aby obraz pojawiał się w wyszukiwarce grafik lub opisywał Twoją treść, umieść go w <img> z dobrym tekstem alt. Tła dekoracyjne nic nie tracą na tym, że są w CSS.
Co powinien mówić tekst alt?
Opisz krótkim zdaniem to, co obraz pokazuje i co ma znaczenie w danym kontekście. Przy zdjęciu produktu może to być produkt i jego kolor; przy wykresie główny wniosek. Pomiń zwroty typu obraz przedstawiający. Jeśli obraz jest linkiem, opisz, dokąd prowadzi link.
Czym różni się srcset z w od srcset z x?
Deskryptory szerokości (480w, 960w) podają rzeczywistą szerokość każdego pliku i pozwalają przeglądarce wybrać na podstawie atrybutu sizes i gęstości pikseli ekranu. Deskryptory gęstości (1x, 2x) pasują do obrazów zawsze wyświetlanych w jednym stałym rozmiarze, na przykład logo.
Czy nadal używać loading="lazy", jeśli korzystam z frameworka?
Natywne leniwe ładowanie działa we wszystkich obecnych głównych przeglądarkach, więc dla większości obrazów wystarczy zwykły atrybut. Komponenty obrazów we frameworkach często dodają go za Ciebie; sprawdź, czy nie ładują leniwie także obrazu hero.
Czy potrzebuję zarówno WebP, jak i AVIF?
Nie zawsze. Oba formaty są obsługiwane przez obecne główne przeglądarki. AVIF jest często mniejszy dla zdjęć, ale wolniej się koduje. Element <picture> ze źródłem AVIF, źródłem WebP i fallbackiem JPEG obsłuży każdego, ale sam WebP z fallbackiem JPEG to rozsądny, prostszy wybór.
Treść czy dekoracja
Pytanie, które rozstrzyga większość decyzji o obrazach, brzmi: czy odwiedzający straciłby informację, gdyby obraz się nie załadował. Zdjęcie zespołu na stronie o nas, zrzut ekranu w tutorialu i zdjęcie produktu w sklepie niosą znaczenie, więc należą do HTML z tekstem alt.
Rozmyta tekstura za nagłówkiem, wzór w stopce czy zdjęcie budujące tylko nastrój mogą żyć w CSS. Dzięki temu HTML pozostaje czysty, a obraz możesz podmieniać w zależności od rozmiaru ekranu bez dotykania znaczników. Jeśli na obrazie leży tekst, upewnij się, że nadal da się go przeczytać, gdy obrazu brakuje, ustawiając również kolor tła.
Jak przeglądarka wybiera z srcset
Przy deskryptorach szerokości przeglądarka najpierw odczytuje sizes, aby dowiedzieć się, jak szeroko obraz zostanie narysowany, na przykład 100vw na telefonach i 50vw na szerszych ekranach. Mnoży to przez współczynnik pikseli urządzenia i wybiera najmniejszy plik, który jest co najmniej tak szeroki. Przeglądarki mogą też wybrać mniejszy plik przy wolnym łączu albo większy, który już mają w cache.
Poprawne sizes ma większe znaczenie niż dodawanie kolejnych szerokości. Jeśli sizes mówi 100vw, a obraz na desktopie wypełnia tylko jedną trzecią ekranu, przeglądarka pobiera plik trzy razy za szeroki.
Przesunięcia układu i obraz hero
Gdy ładuje się obraz bez wymiarów, wszystko pod nim przeskakuje w dół. Atrybuty width i height pozwalają przeglądarce z góry obliczyć proporcje, co usuwa ten przeskok i poprawia Cumulative Layout Shift.
Obraz hero jest zwykle elementem Largest Contentful Paint. Ładuj go natychmiast, nadaj mu fetchpriority="high", serwuj go z własnej domeny lub szybkiego hostingu obrazów i nie ukrywaj go za skryptem, który ustawia go później.
Kompletny <img>
alt, width, height i leniwe ładowanie
Atrybuty podają rzeczywisty rozmiar; CSS czyni obraz płynnym. Dzięki width i height pole jest zarezerwowane, zanim plik się załaduje. Obrazy w demie to małe wbudowane pliki SVG.
Obraz hero: ładowany natychmiast i z wysokim priorytetem
Użyj tego dla jednego dużego obrazu na górze strony. Wszystko poniżej pierwszego ekranu dostaje zamiast tego loading="lazy".
Zasady tekstu alt
Tekst alt według typu obrazu
Obraz
Zdjęcie produktu
Opisz przedmiot i istotny szczegół: Dębowy stolik z dwiema szufladami
Wykres lub diagram
Podaj wniosek: Sprzedaż podwoiła się między marcem a czerwcem
Obraz będący linkiem
Nazwij cel: Strona główna
Wzór dekoracyjny lub separator
Pusty: alt=""
Zdjęcie z takim samym podpisem obok
Pusty lub krótka etykieta, aby nie był czytany dwa razy
Tekst wewnątrz obrazu
Ten sam tekst
object-fit: cover obok background-size: cover
Oba przycinają obraz, aby wypełnił pole bez rozciągania. object-position i background-position wybierają, która część pozostaje widoczna.
To samo przycięcie na dwa sposoby
Po lewej jest <img> z object-fit; po prawej div z tłem. Wyglądają tak samo; tylko lewy ma tekst alt i leniwe ładowanie.
Obrazy tła w CSS
Tło za tekstem z kolorem zapasowym
Ciemny gradient nakładki utrzymuje czytelność białego tekstu na dowolnym zdjęciu, a kolor tła pojawia się, jeśli obraz się nie załaduje.
Responsywne tła z image-set()
image-set() pozwala przeglądarce wybierać według gęstości pikseli lub typu pliku. Dla starszych przeglądarek zostaw na początku zwykłą linię url().
WebP i AVIF z <picture>
Nowoczesne formaty z fallbackiem JPEG
Przeglądarka używa pierwszego <source>, którego typ obsługuje. <img> w środku niesie tekst alt, rozmiar i plik zapasowy i to jego stylizujesz.
Pełna szerokość na każdym ekranie
Pełna szerokość na telefonach, połowa od 768px
Siatka kart: 1, 2 lub 3 kolumny
Kolumna treści ograniczona do 720px
Generator srcset i sizes
Eksportowane szerokości (px)
Ścieżka pliku bez szerokości
Rozszerzenie
Jak szeroko rysowany jest obraz?
Wpisz co najmniej jedną szerokość.
Kopiuj
Który plik pobrałoby urządzenie?
Mały telefon
Duży telefon
Tablet
Laptop
Laptop z ekranem Retina
Szerokość ekranu: {vw}px
Gęstość pikseli: {dpr}x
Obraz jest rysowany na szerokość {slot}px, więc przeglądarka potrzebuje około {px} pikseli urządzenia i zwykle pobrałaby
na razie nic
(największy plik, mniejszy niż idealny: rozważ wyeksportowanie szerszego)
Przeglądarki mogą wybrać mniejszy plik przy wolnym łączu albo większy, który mają już w cache; tutaj pokazany jest typowy wybór.