Generator srcset

Generator srcset: responsywny HTML obrazu z sizes | We.Inc

Darmowy generator srcset. Podaj nazwę obrazu, wyeksportowane szerokości i szerokość, w jakiej się wyświetla, a otrzymasz responsywny HTML img z srcset, sizes, width i height.

Generator srcset

Podaj bazową nazwę obrazu, szerokości, w jakich go wyeksportowano, i szerokość, w jakiej wyświetla się na stronie, a otrzymasz kompletny znacznik img z srcset, sizes, width, height i leniwym ładowaniem. Telefony pobiorą wtedy mały plik, a duże ekrany ostry, co jest jednym z najprostszych sposobów na szybsze ładowanie strony z wieloma obrazami.

Wyeksportuj obraz w kilku szerokościach i nazwij pliki z szerokością na końcu, na przykład hero-480.webp, hero-800.webp i hero-1200.webp.
Wpisz nazwę bazową (hero albo ścieżkę, np. images/hero), wybierz format i wypisz szerokości. Kolejność i duplikaty nie mają znaczenia.
Opisz szerokość wyświetlania w polu sizes, na przykład '(max-width: 768px) 100vw, 50vw' dla obrazu, który wypełnia telefony i połowę większych ekranów.
Ustaw proporcje, aby width i height trafiły do znacznika, i skopiuj HTML na stronę.

Zwykle wystarczą trzy do pięciu szerokości. Każda kolejna to następny plik do wyeksportowania i przechowywania, przy coraz mniejszej oszczędności.
Dodaj szerokość około dwa razy większą niż największy rozmiar wyświetlania, aby obrazy były ostre na ekranach o dużej gęstości. Obraz wyświetlany w szerokości 600 pikseli potrzebuje dla takich ekranów pliku o szerokości 1200 pikseli.
Nie włączaj leniwego ładowania dla głównego obrazu na górze strony. Powinien zacząć się pobierać od razu; leniwe ładowanie jest dla obrazów niżej.
Jeśli sizes jest błędne, przeglądarka wybierze zły plik. Zanim je wpiszesz, zmierz, jak szeroki jest obraz przy kilku szerokościach ekranu.

Najczęściej zadawane pytania

Co robią srcset i sizes?

srcset wymienia pliki z ich rzeczywistą szerokością, zapisaną jako 'plik 800w'. sizes mówi przeglądarce, w jakiej szerokości obraz zostanie wyświetlony. Przeglądarka mnoży szerokość wyświetlania przez gęstość pikseli ekranu i pobiera najmniejszy plik, który ma co najmniej tyle szerokości. Przy sizes='50vw' na ekranie o szerokości 1000 pikseli i gęstości 2x potrzebuje 1000 pikseli i wybiera plik 1200w, jeśli następny mniejszy to 800w.

Po co dodawać width i height?

Pozwalają przeglądarce zarezerwować właściwe miejsce, zanim obraz dotrze, więc tekst pod nim nie przeskakuje podczas ładowania. Narzędzie zapisuje największą szerokość i wysokość zgodną z proporcjami; CSS taki jak max-width: 100%; height: auto; nadal pozwala obrazowi się zmniejszyć, by się zmieścił.

Który plik jest używany jako src?

Ten o największej szerokości. Przeglądarki, które rozumieją srcset, przy wyborze ignorują src, a rzadka przeglądarka, która go nie rozumie, pokaże ostry zamiast rozmytego obrazu.

Jaką wartość sizes podać dla obrazu na pełną szerokość?

Użyj 100vw. Dla obrazu w kolumnie treści, która kończy się na 800 pikselach, użyj '(max-width: 800px) 100vw, 800px', co oznacza: na ekranach do 800 pikseli szerokości obraz zajmuje całą szerokość ekranu, a w pozostałych przypadkach ma 800 pikseli.

Czy to narzędzie zmienia rozmiar moich obrazów?

Nie. Zapisuje HTML dla plików, które już wyeksportowano. Każdą szerokość wyeksportuj kompresorem obrazów lub w programie graficznym.

Deskryptory szerokości a deskryptory gęstości

srcset przyjmuje dwa rodzaje opisu. Deskryptory szerokości (480w, 800w) podają rzeczywistą szerokość każdego pliku w pikselach i działają razem z sizes, co pasuje do obrazów zmieniających rozmiar wraz z układem. Deskryptory gęstości (1x, 2x) określają, którego pliku użyć na zwykłych ekranach i na ekranach o dużej gęstości, i pasują do obrazów o stałym rozmiarze, takich jak logo.
Mieszanie obu w jednym srcset jest niedozwolone, a deskryptory szerokości bez sizes sprawiają, że przeglądarka zakłada, iż obraz wypełnia całą szerokość ekranu. Ten drugi błąd jest częsty i po cichu wysyła duże pliki każdemu odwiedzającemu, dlatego deskryptory w zawsze łącz z rzetelną wartością sizes.

Jak sprawdzić, czy ładuje się właściwy plik

Otwórz stronę w przeglądarce na komputerze, otwórz narzędzia deweloperskie i obejrzyj listę obrazów w zakładce sieci, a potem zwęż okno i przeładuj stronę. Przy wąskich szerokościach powinien ładować się mniejszy plik. Niektóre przeglądarki zatrzymują już pobrany większy plik zamiast pobierać mniejszy, więc testuj w oknie prywatnym lub z wyłączoną pamięcią podręczną.
Jeśli zawsze ładuje się największy plik, najpierw sprawdź sizes: brak wartości lub zbyt duża wartość to typowa przyczyna. Potem sprawdź, czy liczby w srcset zgadzają się z rzeczywistą szerokością plików; plik o nazwie hero-800, który naprawdę ma 1600 pikseli szerokości, i tak pobierze się w rozmiarze 1600.

Nazwa bazowa lub ścieżka obrazu

images/hero

Pliki powinny mieć postać <nazwa>-<szerokość>.<format>.

Format

WebP

AVIF

JPG

PNG

Wyeksportowane szerokości (piksele)

Sizes

(max-width: 768px) 100vw, 50vw

Tekst alternatywny

Lada piekarni ze świeżym chlebem

Proporcje: szerokość

Proporcje: wysokość

Leniwe ładowanie (nie dla pierwszego obrazu na stronie)

Podaj co najmniej jedną szerokość w pikselach, oddzielając je przecinkami, na przykład 480, 800, 1200.

Generator srcset