De Help Desk punt NL
Kennisbank
De Helpdesk > De Helpdesk > Kennisbank

JPG, GIF, PNG of SVG?

Oplossing

ies voor elke afbeelding het juiste bestandsformaat. Een paar vuistregels.

Om een foto of andere afbeelding te laten weergeven op je webpagina, moet hij een van de volgende extensies hebben: .gif, .jpg, .png of .svg. Welk formaat je het beste kunt gebruiken, hangt helemaal af van de soort foto of afbeelding die je wilt laten zien. Hier een paar vuistregels:

Afbeeldingen met verlopende kleuren

foto van een vlinder

Met ‘verlopende kleuren’ wordt bedoeld dat de verschillende kleuren van een afbeelding niet scherp van elkaar gescheiden zijn, maar dat ze langzaam in elkaar overlopen. Bij foto’s is dat altijd het geval. Daarvoor moet een foto altijd in een 24-bits formaat worden opgeslagen. Want in 24-bits afbeeldingen kunnen er meer dan 16 miljoen kleuren worden gebruikt voor die afbeelding. Ter vergelijking: een afbeelding die in een 8-bits formaat is opgeslagen wordt in niet meer dan 256 kleuren weergegeven, en dat geeft natuurlijk een heel ander resultaat!

Er zijn twee bestandsformaten geschikt voor het opslaan van afbeeldingen met verlopende kleuren: jpg en 24-bits png. Een van de verschillen tussen die twee is dat je afbeeldingen in jpg-formaat beter kunnen worden gecomprimeerd, waardoor het uiteindelijke bestand kleiner zal zijn. En: hoe kleiner het bestand, hoe sneller de browsers de afbeelding kunnen laden, dus jpg is het beste formaat om een foto of afbeelding met verlopende kleuren op te slaan.

Afbeeldingen in vlakke kleuren

afbeelding in vlakke kleuren van een hart

Een afbeelding in vlakke kleuren – dus met scherpe afscheidingen tussen de verschillende kleuren, zoals in de afbeelding hiernaast – kun je het beste opslaan in gif- of in 8-bits png-formaat. Je krijgt dan een relatief klein bestand van goede kwaliteit.

Transparante afbeeldingen

afbeelding in vlakke kleuren van een hart

Soms wil je dat de achtergrond van je webpagina achter de afbeelding zichtbaar blijft. Een gedeelte van de afbeelding die je op die achtergrond wilt neerzetten, moet dus transparant zijn. Dat is alleen mogelijk bij een afbeelding die is opgeslagen in .gif- of .png-formaat.

Als voorbeeld heb ik de afbeelding van het hart hier nog eens neergezet. Het vorige hart had een witte achtergrond (ook al zag je dat natuurlijk niet doordat de achtergrond van de alinea waar hij in stond, ook wit was. Daarom heb ik de achtergrond van deze paar alinea’s lichtgrijs gemaakt. De afbeelding in zijn geheel is rechthoekig (150 pixels breed bij 127 pixels hoog), maar omdat het gedeelte zonder kleuren transparant is, blijf je de achtergrondkleur ook zien.

Plaatjes met animaties

animated gif van een wereldbol

Is je afbeelding een ‘bewegend’ plaatje, bestaande uit twee of meer afbeeldingen die elkaar in snel tempo afwisselen, dan kun je dat effect alleen behouden als je je afbeelding opslaat als (animated) .gif.

Tekeningen, logo’s, grafieken e.d.

svg-afbeelding van een regenboog, afkomstig van openclipart.com

Foto’s en afbeeldingen die zijn opgeslagen in .jpg-, .gif- of .png-formaat zijn ‘gerasterd’, dan wil zeggen dat ze zijn omgezet in een verzameling puntjes. Als je sterk op zo’n afbeelding inzoomt, zie je die puntjes op een gegeven moment vanzelf verschijnen: de afbeelding wordt een stuk onscherper. Voor tekeningen, logo’s en grafieken kun je daarom beter het .svg-formaat gebruiken.

De afkorting ‘svg’ staat voor scalable vector graphics. Het betekent dat de afbeelding zo groot kan worden weergegeven als je maar wilt terwijl ze toch scherp blijft. De afbeelding is namelijk niet gerasterd, maar de instructies voor het samenstellen ervan zijn vastgelegd in een gewoon tekstbestand. Svg-afbeeldingen kun je zelf maken met een tekenprogramma als Adobe Illustrator of (het gratis programma) Inkscape. De afbeelding bij deze alinea is afkomstig van openclipart.org, waar je clipart kunt downloaden in png- of svg-formaat.

 
Was dit artikel bruikbaar? ja / nee
Gerelateerde artikelen Inkscape
Ik zie een rood kruisje in plaats van mijn foto!
Wat is de html-code voor een foto of andere afbeelding?
Over afbeeldingen en html-codes
Sneltoetsen GIMP gebruiken
Hoe geef je je website een foto als achtergrond?
Maak ook de foto’s op je website responsive!
Zelf stap voor stap een website maken
Responsive Website templates (GRATIS) (meer dan 40)
Responsive website-templates
Artikel details
Artikel ID: 694
Categorie: Een eigen website maken - Afbeeldingen
Zoekwoorden afbeeldingen, website, JPG, GIF, PNG, SVG, transparant, doorzichtig, formaat, extensie, afbeelding, image, images, bestandsformaat, foto, foto's, kleuren
Datum toegevoegd: 5-Dec-2017 12:21:33
Aantal bekeken: 3341
Beoordeling (Stemmen): Artikel beoordeeld 5.0/5.0 (1004)

 
« Ga terug