Online Tool Store
Generator de srcset
Redimensionează o imagine la mai multe lățimi cu API-ul Canvas și generează codul <img srcset sizes> corespunzător și fișierele descărcabile.
🔒 Acest instrument rulează în întregime în browserul tău. Fișierele tale nu sunt niciodată încărcate pe un server.
Implicit este folosită o imagine de gradient exemplu — încarcă-ți propria imagine pentru a o înlocui.
Cum funcționează
- Încarcă o imagine (implicit este afișat un gradient exemplu).
- Setează lățimile țintă și o bază a numelui fișierului — previzualizările se actualizează instantaneu.
- Ajustează atributul "sizes" ca să corespundă modului în care imaginea se randează în aranjamentul tău.
- Copiază codul generat și descarcă fișierele redimensionate pentru a le găzdui alături de el.
FAQ
Ce generează de fapt acest instrument?
Redimensionează imaginea încărcată la fiecare lățime țintă folosind API-ul Canvas, apoi scrie codul <img srcset sizes> corespunzător astfel încât browserele să poată alege fișierul potrivit pentru fiecare viewport.
Ce ar trebui să pun în atributul "sizes"?
O descriere în stil CSS a cât de lată se randează imaginea la diferite viewporturi, de ex. "(max-width: 768px) 100vw, 50vw" înseamnă că umple viewportul pe mobil și jumătate din viewport pe ecrane mai mari. Fă-l să corespundă aranjamentului tău real.
Trebuie să încarc eu însumi fișierele redimensionate?
Da — "Descarcă toate dimensiunile" salvează fiecare JPEG redimensionat pe dispozitivul tău cu un nume de fișier care corespunde codului generat (de ex. photo-640w.jpg). Încarcă-le pe host-ul tău de imagini sau pe CDN la aceleași căi.
De ce descărcările sunt JPEG în loc de formatul original?
JPEG menține dimensiunile fișierelor mici și previzibile pentru livrarea de fotografii responsive. Dacă ai nevoie de ieșire PNG sau WebP pentru transparență sau o compresie mai bună, redimensionează ulterior cu un convertor de imagini dedicat.
Imaginea mea este încărcată undeva?
Nu. Redimensionarea are loc local pe un <canvas> în browserul tău — fișierul original nu părăsește niciodată dispozitivul tău.
Cum ne comparăm
| Caracteristică | Online Tool Store | Redimensionare manuală într-un editor de imagini | Servicii de redimensionare automată a imaginilor ale CDN-urilor |
|---|---|---|---|
| Generează automat codul corespunzător | ✓ | ✗ | Depinde de serviciu |
| Nu necesită cont sau backend | ✓ | ✓ | ✗ |
| Gratuit, fără cost per imagine | ✓ | ✓ | Preț bazat pe utilizare |
Dacă ai nevoie doar de un set punctual de imagini responsive și de codul corespunzător — fără pas de build, fără cont CDN — acest instrument produce ambele pe o singură pagină.