Online Tool Store
Generator srcset
Przeskaluj przesłany obraz do wielu szerokości za pomocą Canvas API i wygeneruj pasujący kod <img srcset sizes> oraz pliki do pobrania, w przeglądarce.
🔒 To narzędzie działa w całości w Twojej przeglądarce. Twoje pliki nigdy nie są wysyłane na serwer.
Domyślnie używany jest przykładowy obraz gradientu — prześlij własny, aby go zastąpić.
Jak to działa
- Prześlij obraz (domyślnie pokazany jest przykładowy gradient).
- Ustaw szerokości docelowe i podstawę nazwy pliku — podglądy aktualizują się natychmiast.
- Dostosuj atrybut "sizes", aby pasował do tego, jak obraz renderuje się w Twoim układzie.
- Skopiuj wygenerowany kod i pobierz przeskalowane pliki, aby hostować je obok niego.
FAQ
Co właściwie generuje to narzędzie?
Skaluje przesłany obraz do każdej szerokości docelowej za pomocą Canvas API, a następnie zapisuje pasujący kod <img srcset sizes>, aby przeglądarki mogły wybrać właściwy plik dla każdego viewportu.
Co powinienem wpisać w atrybucie "sizes"?
Opis w stylu CSS tego, jak szeroko obraz renderuje się przy różnych viewportach, np. "(max-width: 768px) 100vw, 50vw" oznacza, że wypełnia viewport na urządzeniu mobilnym i połowę viewportu na większych ekranach. Dopasuj go do rzeczywistego układu.
Czy muszę sam przesłać przeskalowane pliki?
Tak — "Pobierz wszystkie rozmiary" zapisuje każdy przeskalowany JPEG na Twoim urządzeniu z nazwą pliku pasującą do wygenerowanego kodu (np. photo-640w.jpg). Prześlij je na swój host obrazów lub CDN pod tymi samymi ścieżkami.
Dlaczego pobierane pliki to JPEG zamiast oryginalnego formatu?
JPEG utrzymuje rozmiary plików małe i przewidywalne dla dostarczania responsywnych zdjęć. Jeśli potrzebujesz wyjścia PNG lub WebP dla przezroczystości lub lepszej kompresji, przeskaluj później dedykowanym konwerterem obrazów.
Czy mój obraz jest gdzieś przesyłany?
Nie. Skalowanie odbywa się lokalnie na <canvas> w przeglądarce — oryginalny plik nigdy nie opuszcza Twojego urządzenia.
Jak wypadamy na tle innych
| Funkcja | Online Tool Store | Ręczne skalowanie w edytorze obrazów | Usługi automatycznego skalowania obrazów CDN |
|---|---|---|---|
| Automatycznie generuje pasujący kod | ✓ | ✗ | Zależy od usługi |
| Nie wymaga konta ani backendu | ✓ | ✓ | ✗ |
| Za darmo, bez kosztu za obraz | ✓ | ✓ | Cennik zależny od użycia |
Jeśli potrzebujesz tylko jednorazowego zestawu obrazów responsywnych i pasującego kodu — bez kroku build, bez konta CDN — to narzędzie tworzy oba na jednej stronie.