Fotobewerking: PNG, JPG of GIF, wat, waar en wanneer?

Foto’s op je website mogen niet ontbreken, maar gebruik je dan PNG, JPG of GIF bestanden?
Booest vertelt je de ins en outs van het gebruik van de verschillende bestanden.

Bij Booest gebruiken wij op onze website graag en veel foto’s en dat raden we eigenlijk ook iedereen aan.
Foto’s zorgen ervoor dat de lezer emotioneel meer betrokken kan raken bij datgene wat jij te vertellen hebt.
We schreven er al verschillende blogpost over:

1# Foto’s toepassen in de marketing van je bedrijf
2# Hoe foto’s het werven van klanten makkelijker kunnen maken
3# Handige foto en filmgadgets – wat gebruiken wij

De grote vraag die vaak gesteld wordt is, welke extensie moeten de foto’s, die gebruikt worden op een website, hebben?

PNG, JPG of GIF

De gangbare extensies die gebruikt kunnen worden op je website zijn PNG, JPG of GIF.
Wat is het verschil?

• JPG – dit is eigenlijk de standaard voor afbeeldingen op het web: goed voor foto’s die zoals we al zeiden verkleind moeten worden in een minder zwaar bestandsformaat
• PNG – dit is het andere populaire formaat op het web: goed voor foto’s en afbeeldingen die een transparantie hebben (de achtergrond schijnt door). Dit is bijvoorbeeld geschikt voor een logo, wat er op elke achtergrond precies hetzelfde uit dient te zien. Het Booest logo is bijvoorbeeld een afbeelding met een transparante achtergrond. Wij gebruiken bijvoorbeeld ons logo vaak op onze eigen foto’s en kan er dus met een .png extensie makkelijk opgezet worden.
• GIF – deze extensie is alleen nodig voor het maken van een animatie: GIF afbeeldingen kunnen bestaan uit een hele serie van afbeeldingen en kan een animatie afspelen, wat niet kan met JPG of PNG. Een gif bestand is bijvoorbeeld geschikt voor een icoontje, een banner of een knop op je website. De achtergrond kan ook transparant zijn. GIF bestanden zijn niet geschikt voor foto’s.

Kwaliteit en laadtijd

We gaan ervan uit dat je foto’s van een goede kwaliteit wilt plaatsen.
Met een smartphone kun je tegenwoordig ook al hele goede foto’s maken.
Het nadeel van deze foto’s is, dat het zulke grote bestanden zijn.
Het zijn foto’s die zoals ze noemen een hoge resolutie hebben (veel megapixels per inch), die als je ze uitvergroot ook nog steeds een goede kwaliteit beeld geven.
Je kunt er zelfs posters van maken, maar op je website heb je dit echt niet nodig.
Door foto’s met veel megapixels op je website te plaatsen, wordt de laadtijd van je website op je webpagina heel traag.

Wijzelf gebruiken vaak grote foto’s, maar zorgen ervoor dat het aantal megapixels minder is geworden.
We gaan de foto dus bewerken, voordat hij geschikt is om op de website te plaatsen.

Foto’s bewerken

Dat bewerken kun je doen met een fotobewerkingsprogramma’s, waarbij Adobe Photoshop het meest gebruikte programma is.
Het is helaas wel een betrekkelijk duur programma voor een amateur fotograaf.
Heb je een Windowscomputer, dan kun je via het programma Paint ook al een heel eind uit de voeten.
Voor wat meer mogelijkheden en het bewerken van zogenaamde RAW bestanden (je kunt bijvoorbeeld een spiegelreflexcamera daarop instellen, zodat je de foto nog optimaal kunt bewerken), zijn ook diverse andere (gratis) programma’s zoals Gimp fotosoftware of Fotor.

Voor gebruik op een website ziet een foto van 72 pixels per inch er nog helemaal prima uit en hij beslaat maar een paar kilobytes, in plaats van een originele foto van enkele honderden kilobytes of zelfs een paar megabytes.
In Photoshop kun je het aantal pixels per inch instellen, en daarnaast de afbeeldingsgrootte.
Als je een foto wilt hebben over de hele breedte van je website en deze breedte is bijvoorbeeld 800 pixels, dan kies je ook voor een afbeeldingsgrootte van 800 pixels met 72 pixels per inch.
Dit lijkt verwarrend, maar dat komt omdat een digitaal fotobestand niet in cm uitgedrukt wordt, maar in pixels.

Samengevat

Samenvattend kunnen we dus zeggen, dat je voor je foto’s het beste een .jpg bestand kunt kiezen en voor afbeeldingen met een transparante achtergrond een .png bestand.
Een .gif gebruik je voor een knop of banner.

Let op als je je fotobestand opslaat: zorg ervoor dat je bij verwijzing naar het bestand oplet of je met grote of kleine letters (.png of .PNG) hebt geschreven, want anders komt de foto nog niet op je website!

Vond je deze tips handig? Laat eens een berichtje achter met een link naar jouw website, waar we dan jouw foto’s kunnen bewonderen.
<div class=’shareaholic-canvas’ data-app=’recommendations’ data-app-id=’8295769′></div>

Lees ook onze andere blogs uit de serie ‘Website tips’

Website tips #1 3 tips om te vergeten als je webteksten schrijft
Website tips #2 Waarom bloggen als therapeut of (para)medicus?
Website tips #3 Hoe je met je over ons pagina meer klanten trekt
Website tips #4 Waarom wordt mijn website niet gevonden in Google: 8 redenen
Website tips #5 Een website is weggegooid geld
Website tips #6 Heeft jouw website last van te weinig bezoekers en weet je niet waarom?
Website tips #7 De nr. 1 reden waarom bezoekers van je website geen klant worden
Website tips #8 Fotobewerking: PNG, JPG of GIF, wat, waar en wanneer? Deze starten tip lees je nu.
Website tips #9 SEO wat is dat?
website tips #10 Wat anderen vinden van je website