Dlaczego samo zmniejszenie obrazu w CSS nie wystarcza
Wyobraź sobie zdjęcie produktu zapisane w pliku o szerokości 1800 pikseli. Na komputerze może wypełniać szeroką kolumnę, ale na telefonie zajmuje tylko 340 pikseli szerokości. CSS potrafi dopasować jego wygląd do ekranu, lecz samo wizualne zmniejszenie nie sprawia, że przeglądarka pobierze mniejszy plik. Nadal może pobrać oryginał, nawet jeśli pokaże go jako niewielką miniaturę.
Rozwiązaniem jest przygotowanie kilku wersji tego samego obrazu i opisanie ich w atrybucie srcset. Dzięki temu przeglądarka może wybrać wariant, biorąc pod uwagę szerokość miejsca na obraz oraz gęstość pikseli ekranu. To nie znaczy, że telefon zawsze dostanie najmniejszy plik: ekran o wysokiej gęstości może uzasadniać wybór większej wersji. Celem jest zapewnienie wyboru, a nie wymuszenie jednego rozmiaru dla każdego urządzenia.
srcset: przygotuj warianty i podaj ich rzeczywiste szerokości
Załóżmy, że do zdjęcia produktu przygotowujesz pliki produkt-400.webp, produkt-800.webp i produkt-1200.webp. Opis srcset może brzmieć: srcset="produkt-400.webp 400w, produkt-800.webp 800w, produkt-1200.webp 1200w". Litera w oznacza szerokość pliku w pikselach, a nie szerokość, z jaką obraz zostanie pokazany na stronie. Każdy zadeklarowany wymiar powinien odpowiadać rzeczywistemu plikowi. Zachowaj też src z adresem jednej wersji obrazu jako podstawowe źródło.
Warianty powinny przedstawiać tę samą treść i mieć takie same proporcje, jeśli zastępują się nawzajem w jednym obrazie. Nie trzeba tworzyć pliku dla każdej możliwej szerokości. Kilka sensownie dobranych rozmiarów zwykle pozwala ograniczyć różnicę między potrzebnym a pobranym obrazem bez nadmiernego mnożenia plików. Wybór szerokości oprzyj na układzie witryny: miniatura w siatce kart potrzebuje innych wariantów niż zdjęcie otwierające artykuł.
sizes: opisz miejsce obrazu w układzie strony
Gdy w srcset używasz oznaczeń w, dodaj sizes. Ten atrybut mówi przeglądarce, jak szerokie miejsce obraz prawdopodobnie zajmie przy różnych szerokościach okna. Nie jest poleceniem ustawiającym rozmiar obrazu na stronie; za ten rozmiar odpowiada układ CSS. Jeśli sizes nie odzwierciedla układu, przeglądarka może wybrać plik większy, niż potrzeba.
Przykładowy zapis dla obrazu zajmującego prawie całą szerokość małego ekranu i około jedną trzecią szerokości większego okna to sizes="(max-width: 600px) 90vw, 33vw". Przeglądarka czyta warunki od lewej strony i korzysta z pierwszego pasującego rozmiaru; ostatnia wartość działa jako domyślna. Jednostka vw odnosi się do szerokości okna przeglądarki. Jeżeli kolumna na dużym ekranie ma stałą szerokość, warto opisać ją w sizes w pikselach zamiast używać przybliżenia 33vw.
Dopasuj atrybuty do wyglądu i zachowania strony
Sprawdź osobno typowe miejsca użycia obrazów: kartę produktu, ilustrację w treści i szeroki baner. Każde z nich może potrzebować innego sizes, nawet gdy korzysta z podobnego zestawu plików. Zwróć uwagę na odstępy, maksymalną szerokość kontenera i momenty, w których siatka zmienia liczbę kolumn. Na telefonie obraz w karcie może zajmować prawie całą szerokość okna, a na laptopie tylko fragment jednej kolumny.
Zadbaj również o stabilny układ podczas ładowania. Podanie wymiarów width i height zgodnych z proporcjami obrazu pomaga przeglądarce wcześniej zarezerwować dla niego miejsce; CSS nadal może skalować go responsywnie. Dla obrazów znajdujących się daleko poniżej pierwszego ekranu można rozważyć leniwe ładowanie. Nie stosuj go automatycznie do głównego obrazu widocznego od razu po otwarciu strony, ponieważ może opóźnić jego wyświetlenie.
Krótka lista kontroli: czy przeglądarka pobiera właściwy plik?
Otwórz stronę przy kilku szerokościach okna i sprawdź obraz w narzędziach deweloperskich przeglądarki. W panelu sieciowym zobacz, który plik został pobrany i ile danych przesłano. Porównaj go z miejscem zajmowanym przez obraz w układzie. Testuj także na ekranie o innej gęstości pikseli, jeśli masz taką możliwość. Pamiętaj, że pamięć podręczna może wpływać na obserwacje, więc przy porównywaniu wariantów warto wykonać ponowne ładowanie z wyłączoną pamięcią podręczną.
Przed publikacją skontroluj cztery rzeczy: czy szerokości podane w srcset są prawdziwe, czy sizes odpowiada faktycznemu układowi, czy pliki mają rozsądną wagę oraz czy obraz nie powoduje przeskakiwania treści podczas ładowania. Jeśli na małym ekranie nadal pobierany jest duży plik, zacznij od sprawdzenia wartości sizes i dostępnych wariantów. Dopiero potem oceniaj pozostałe elementy strony wpływające na szybkość i wygodę korzystania z niej.
