Junior
Jaké oblíbené formáty obrázků se používají při tvorbě webových stránek?
sobes.tech AI
Odpověď od AI
- Raster (Rastrové obrázky):
- JPEG (.jpg, .jpeg): Vhodné pro fotografie, podporuje kompresi s ztrátami. Nepodporuje průhlednost.
- PNG (.png): Podporuje průhlednost (alfa kanál). PNG-8 pro jednoduché obrázky s paletou, PNG-24 pro kvalitnější obrázky s plnou škálou barev. Bezeztrátová komprese.
- GIF (.gif): Podporuje animaci a průhlednost. Omezeno na 256 barev. Používá se pro jednoduché animace a ikony.
- WebP (.webp): Vyvinuto společností Google. Podporuje kompresi s ztrátami i bez ztrát, animaci a průhlednost. Obvykle menší velikost při srovnatelné kvalitě ve srovnání s JPEG a PNG.
- Vektorové (Vektorové obrázky):
- SVG (.svg): Měřítkový bez ztráty kvality. Ideální pro loga, ikony, grafy. Založen na XML.
| Formát | Typ | Průhlednost | Animace | Komprese | Nejlepší použití |
|---|---|---|---|---|---|
| JPEG | Rasterový | Ne | Ne | Se ztrátou | Fotografie |
| PNG | Rasterový | Ano | Ne | Bezeztrátová | Obrázky s průhledností, grafika |
| GIF | Rasterový | Ano (jednoduché) | Ano | Bezeztrátová | Jednoduché animace, ikony |
| WebP | Rasterový | Ano | Ano | Se ztrátou/Bez ztráty | Univerzální |
| SVG | Vektorový | Ano | Ano (CSS/JS) | Bezeztrátový | Loga, ikony, grafika |
Výběr formátu závisí na typu obrázku, požadavcích na kvalitu, podpoře průhlednosti a animace, stejně jako na požadované velikosti souboru. Použití <picture> nebo atributu srcset v tagu <img> umožňuje nabízet různé formáty (například WebP a JPEG) v závislosti na podpoře prohlížeče, což optimalizuje výkon.