Junior
Welke populaire afbeeldingsformaten worden gebruikt in webontwerp?
sobes.tech AI
Antwoord van AI
- Raster (Rasterafbeeldingen):
- JPEG (.jpg, .jpeg): Goed voor foto's, ondersteunt compressie met verlies. Ondersteunt geen transparantie.
- PNG (.png): Ondersteunt transparantie (alpha-kanaal). PNG-8 voor eenvoudige afbeeldingen met een palet, PNG-24 voor hogere kwaliteit met volledige kleurgamma. Lossless compressie.
- GIF (.gif): Ondersteunt animatie en transparantie. Beperkt tot 256 kleuren. Gebruikt voor eenvoudige animaties en iconen.
- WebP (.webp): Ontwikkeld door Google. Ondersteunt compressie met en zonder verlies, animatie en transparantie. Over het algemeen kleiner in formaat met vergelijkbare kwaliteit vergeleken met JPEG en PNG.
- Vector (Vectorafbeeldingen):
- SVG (.svg): Schaalbaar zonder kwaliteitsverlies. Perfect voor logo's, iconen, grafieken. Gebaseerd op XML.
| Formaat | Type | Transparantie | Animatie | Compressie | Beste toepassing |
|---|---|---|---|---|---|
| JPEG | Raster | Nee | Nee | Verlieslatend | Foto's |
| PNG | Raster | Ja | Nee | Lossless | Afbeeldingen met transparantie, grafieken |
| GIF | Raster | Ja (eenvoudig) | Ja | Lossless | Eenvoudige animaties, iconen |
| WebP | Raster | Ja | Ja | Verlieslatend/Lossless | Universeel |
| SVG | Vector | Ja | Ja (CSS/JS) | Lossless | Logo's, iconen, grafieken |
De keuze van het formaat hangt af van het type afbeelding, kwaliteitsvereisten, ondersteuning voor transparantie en animatie, en de benodigde bestandsgrootte. Het gebruik van <picture> of het srcset-attribuut in de <img>-tag stelt je in staat om verschillende formaten (bijvoorbeeld WebP en JPEG) aan te bieden afhankelijk van de browserondersteuning, wat de prestaties optimaliseert.