Junior
Aké obľúbené formáty obrázkov sa používajú pri tvorbe webových stránok?
sobes.tech AI
Odpoveď od AI
- Raster (Rasterové obrázky):
- JPEG (.jpg, .jpeg): Vhodné pre fotografie, podporuje kompresiu so stratami. Nepodporuje priehľadnosť.
- PNG (.png): Podporuje priehľadnosť (alfa kanál). PNG-8 pre jednoduché obrázky s paletou, PNG-24 pre kvalitnejšie obrázky s úplnou farebnou škálou. Bezstratová kompresia.
- GIF (.gif): Podporuje animáciu a priehľadnosť. Obmedzené na 256 farieb. Používa sa pre jednoduché animácie a ikony.
- WebP (.webp): Vyvinuté spoločnosťou Google. Podporuje kompresiu so stratami aj bez strat, animáciu a priehľadnosť. Zvyčajne menší v veľkosti pri porovnaní s JPEG a PNG.
- Vektorové (Vektorové obrázky):
- SVG (.svg): Škálovateľné bez straty kvality. Ideálne pre logá, ikony, grafy. Založené na XML.
| Formát | Typ | Priehľadnosť | Animácia | Kompresia | Najlepšie použitie |
|---|---|---|---|---|---|
| JPEG | Raster | Nie | Nie | So stratami | Fotografie |
| PNG | Raster | Áno | Nie | Bez strát | Obrázky s priehľadnosťou, grafika |
| GIF | Raster | Áno (jednoduché) | Áno | Bez strát | Jednoduché animácie, ikony |
| WebP | Raster | Áno | Áno | So stratami/Bez strat | Univerzálne |
| SVG | Vektor | Áno | Áno (CSS/JS) | Bez strát | Logá, ikony, grafika |
Výber formátu závisí od typu obrázka, požiadaviek na kvalitu, podpory priehľadnosti a animácie, ako aj od požadovanej veľkosti súboru. Použitie <picture> alebo atribútu srcset v tagu <img> umožňuje ponúknuť rôzne formáty (napríklad WebP a JPEG) v závislosti od podpory prehliadača, čím sa optimalizuje výkon.