Wygeneruj srcset i sizes dla obrazu

Programiści front-end sięgają po to, gdy obraz ma być ostry na wielu ekranach bez pobierania zawsze największego pliku.

Wygeneruj srcset i sizes dla obrazu. Wynik pozostaje w przeglądarce i jest gotowy do sprawdzenia, skopiowania oraz dopasowania bez konta.

Jak używać

Wprowadź nazwę pliku obrazu, na przykład photo.jpg.
Wpisz maksymalną szerokość wyświetlania w pikselach.
Uruchom generator, aby utworzyć atrybuty srcset i sizes.
Skopiuj wygenerowany kod do swojego elementu obrazu.

Przykład

Integrator front-end przygotowuje baner, który musi pozostać ostry na telefonach i dużych ekranach. Wprowadza photo.jpg i maksymalną szerokość 1200 pikseli, a następnie generuje atrybuty. Kod jest wklejany do szablonu, aby przeglądarka mogła wybrać. Przygotowuje też pliki obrazów w szerokościach sugerowanych przez wynik.

Dane wejściowe

photo.jpg
1200

Ograniczenia i formaty

Narzędzie tworzy znacznik dla jednego obrazu; nie zmienia rozmiaru plików obrazów.
Warianty obrazu muszą istnieć w szerokościach sugerowanych w wyniku.
Ostateczny wybór zależy również od przeglądarki i gęstości ekranu.
Sprawdź ścieżki i nazwy plików przed opublikowaniem znacznika.
Wygenerowany kod nie zastępuje kontroli wizualnych na kilku urządzeniach.

Gdzie odbywa się przetwarzanie

Wpisane szczegóły są przetwarzane w Twojej przeglądarce w celu zbudowania responsywnego znacznika. Żaden plik obrazu nie jest przesyłany i żadne informacje nie są wysyłane na zewnątrz. Możesz skopiować wynik, gdy tylko się pojawi.

Częste pytania

Czy to narzędzie zmienia rozmiar mojego obrazu?

Nie, nie zmienia samego pliku obrazu. Generuje tylko atrybuty srcset i sizes na podstawie podanej nazwy i szerokości. Przygotuj różne wersje obrazu za pomocą osobnego narzędzia do zmiany rozmiaru.

Dlaczego wymieniono kilka szerokości?

Przeglądarka wybiera wersję najlepiej dopasowaną do ekranu i gęstości pikseli. Oferowanie kilku szerokości pomaga uniknąć wysyłania dużego pliku do małego urządzenia. Dokładne wartości wynikają z wprowadzonej maksymalnej szerokości.

Czy mogę użyć tego do obrazu tła CSS?

Atrybuty srcset i sizes są przeznaczone dla elementów obrazu, a nie teł CSS. W przypadku teł użyj zapytań medialnych lub adaptacyjnych technik CSS. Dopasuj metodę do sposobu wyświetlania obrazu.

Czy muszę wcześniej przygotować pliki obrazów w sugerowanych szerokościach?

Tak. Narzędzie nie zmienia rozmiaru obrazu; tworzy tylko znaczniki srcset i sizes. Warianty obrazu muszą istnieć w szerokościach sugerowanych w wyniku. Przygotuj je osobnym narzędziem do zmiany rozmiaru i sprawdź ścieżki oraz nazwy plików przed publikacją. Wygenerowany kod dotyczy jednego obrazu, więc powtórz czynność dla każdego potrzebnego pliku.

Czy wygenerowany kod zastępuje testy na urządzeniach?

Nie. Wygenerowany kod nie zastępuje kontroli wizualnych na kilku urządzeniach. Ostateczny wybór zależy także od przeglądarki i gęstości ekranu. Narzędzie przetwarza wpisane dane w przeglądarce, nie wysyła obrazu i pozwala od razu skopiować wynik. Sprawdź, czy wszystkie warianty są dostępne pod właściwymi adresami. Pamiętaj, że narzędzie nie tworzy plików obrazów.