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:
.gif
.jpg
.png
.svg
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.
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.
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.
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.
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.
« Ga terug
