Welke bestandsformaten voor afbeeldingen zijn er, en hoe gebruik je ze op je website?

Welke bestandsformaten voor afbeeldingen zijn er, en hoe gebruik je ze op je website?

Zie je ze weleens voorbij komen? JPG, PDF, PNG, GIF, EPS, AI, TIFF, PSD? Allemaal verschillende bestandsformaten voor afbeeldingen. Wat de verschillen zijn en hoe je ze gebruikt lees je hieronder. (Er zijn ook nog andere bestandstypen, maar dit zijn de meest gebruikte)

Afbeeldingen gebruiken voor web of print

Sommige van bovenstaande afkortingen zullen je bekend voorkomen, andere misschien wat minder. Grofweg kun je ze onderverdelen in 2 soorten bestandstypes. Deze hebben met het doel te maken waar je ze voor gebruikt.

  1. Print (Drukwerk, printen)
  2. Web (website, social media)

Afbeeldingsformaten die geschikt zijn voor print

ai

.ai (Adobe Illustrator)

Een afbeeldingsbestand (illustratie) dat je maakt met Adobe Illustrator wordt standaard opgeslagen als een .ai bestand. De verschillende lagen blijven bestaan en zijn te bewerken. De illustraties worden opgebouwd met vectoren, waardoor ze schaalbaar zijn zonder kwaliteitsverlies. Een logo wordt hier vaak mee gemaakt. Een .ai bestand is vrij zwaar en zal meestal omgezet worden naar een .eps bestand om te versturen naar een klant of drukker.

eps

.eps (Encapsulated PostScript)

Een veelzijdig bestandsformaat dat zowel gemaakt kan worden in Illustrator (vectoren) als in Photoshop (pixels). Een .eps bestand is te openen in grafische programma’s. Als je een logo hebt is het aan te raden om dit in een .eps bestand te hebben, dan is het schaalbaar en kan het voor allerlei doeleinden gebruikt worden.

pdf

.pdf (Portable Document Format)

Tja, wat kun je niet met pdf? Ideaal voor drukproeven omdat die in een lagere resolutie verstuurd kunnen worden en geschikt voor drukwerk als ze in een hoge resolutie opgeslagen worden. Je kunt ze laten downloaden (als e-book of whitepaper), je kunt ze beveiligen of laten onderteken.

psd

.psd (Photoshop Document)

In een .psd bestand kun je foto’s opmaken in lagen. Hierdoor is ontzettend veel mogelijk op creatief gebied. Het maakt de bestanden ook zwaar, vandaar dat het meestal eerst omgezet wordt naar .jpeg of .tiff voordat je het opstuurt om af te laten drukken.

tiff

.tiff of .tif (Tagged Image File Format)

Een .tiff bestand kun je opslaan zonder compressie zodat de kwaliteit van de foto hoog blijft. Hiermee is het een ideaal bestand voor drukwerk of foto afdrukken. Een .psd bestand wordt meestal opgeslagen in een .tiff bestand zonder lagen als er drukwerk van gemaakt moet worden.

Afbeeldingsformaten die geschikt zijn voor je website

jpg

.jpg of .jpeg (Joint Photographic Experts Group)

Het grote voordeel van .jpeg (of .jpg) bestanden is, dat je ze kunt comprimeren. Dat betekent eigenlijk dat er beeldinformatie uitgehaald wordt. Hoe meer compressie, hoe lichter (minder kb) je foto wordt. Te veel compressie zorgt ervoor dat je foto’s wat vlekkerig kunnen worden. Kijk dus altijd naar een goede tussenoplossing: een zo’n licht mogelijke foto, die er nog steeds goed uitziet.

Dit bestand gebruik je eigenlijk altijd voor de foto’s op je website. Een uitzondering hierop is als je een foto wil plaatsen zonder een (witte) achtergrond. Dan is een .png bestand perfect (zie hierna).

Nb. Houdt er rekening mee dat iedere keer dat je een .jpeg bestand op je computer opent en weer sluit, er wat informatie verloren gaat.

png

.png (Portable Network Graphics)

Een .png bestand heeft als grote voordeel dat je het op kunt slaan met een transparante achtergrond. Ideaal dus voor je logo op je website of als je gebruik maakt van vrijstaande beelden. Een .png bestand is over het algemeen wat zwaarder dan een .jpg bestand, vandaar dat het niet wenselijk is om al de foto’s op je website in dit formaat te plaatsen.

gif

.gif (Graphics Interchange Format)

Ken je die bewegende plaatjes? Dat zijn dus .gif bestanden. Jaren geleden vond men het nog leuk om deze op de website te plaatsen, maar dat is nu wel achterhaald. Een website moet duidelijk zijn, zonder al te veel afleiding van waar het echt om gaat.

Je komt ze nog wel tegen in Social Media; in Facebook kun je ze bijvoorbeeld als reactie plaatsen.

Je ziet het, de keuzes voor bestanden voor op je website zijn goed te overzien: maak gebruik van .jpeg bestanden tenzij je een transparante achtergrond wilt; dan gebruik je een .png bestand.

Werk je met Adobe Photoshop? Zij hebben een artikel over de verschillende bestandsindelingen en wat je hiermee de mogelijkheden zijn.

Lees ook:

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Verder lezen?

Back-up en herstel (of verhuis) je website met All-in-one WP Migration

Je bent even wat veranderingen aan het doen op je website of aan het updaten en het gaat mis. Er ontstaat ergens een conflict en de voorkant van je website ziet er ineens uit of er een storm over heen geraasd is. Of je ziet allemaal gekke dingen die er eerst niet waren, en die er ook niet horen te zijn. Paniek!

Maak zelf de mooiste social media uitingen met Canva

Je hebt iets te vertellen en dat wil je delen met de wereld. Je weet inmiddels dat een afbeelding vaak meer zegt dan alleen maar woorden en daar wil je gebruik van maken in je social media uitingen. Je hebt weinig tot geen design ervaring en ook geen Photoshop ter beschikking…

Wat is het verschil tussen een pagina en bericht in WordPress?

Regelmatig krijg ik de vraag wat nou het verschil tussen een pagina en een bericht is in WordPress. In eerste instantie zien ze er namelijk precies hetzelfde uit als je ze gaat maken. Of je nu op “nieuw bericht” of op “nieuwe pagina” klikt; je krijgt dezelfde WordPress editor te zien…

Hoe krijg je een goede voorvertoning van een link op Facebook?

Als je de link van je nieuwe blogpost of van webpagina deelt op Facebook, dan wil je natuurlijk dat het er netjes en aantrekkelijk uitziet. De bedoeling van het plaatsen van je Facebookbericht, is uiteraard dat er mensen op je link klikken en je website bezoeken.

Goede foto’s zijn belangrijk; ze maken je website

Foto’s zijn enorm belangrijk voor je website, ze bepalen voor een heel groot deel de sfeer en de uitstraling. Het design en je teksten kunnen nog zo goed in elkaar zitten, als je foto’s niet sprekend en van slechte kwaliteit zijn, dan heeft dat consequenties voor de ervaring van je bezoekers.

Waarom het opbouwen van een mailinglijst zo belangrijk is

Veel ondernemers realiseren zich niet hoe belangrijk het opbouwen van een mailinglijst is als ze beginnen met hun bedrijf. Meestal ga je er pas over denken als je al een tijdje bezig bent en ziet hoeveel impact het bij anderen heeft op de groei van hun bedrijf…

Bepaal het doel van je website met deze 5 voorbeelden

Veel ondernemers zien hun website als een doel op zich en hebben niet in de gaten dat een website juist een middel is om andere doelen te behalen. Als je exact weet wat het doel van je website moet zijn, kun je veel beter bepalen wat er op je website aanwezig moet zijn om je doelen te behalen.

7 vaak voorkomende irritaties van website bezoekers (en wat je hier aan doet)

Een goed design is heus niet alles. Wat nog veel belangrijker is, is dat je website bezoekers een goede gebruikerservaring hebben als ze op je website komen. Als ze geïrriteerd raken, dan ben je ze kwijt, en dat wil je natuurlijk voorkomen. Er zijn een aantal vaak...

Blogpost publiceren? Loop hem nog even na met deze checklist

Als je een blogpost geschreven hebt en de afbeeldingen geplaatst zijn, is het tijd om op ”publiceren” te drukken. Zelf voel ik dan altijd nog een lichte aarzeling. Is het nu echt wel goed zo? Is dit voor jou herkenbaar?

Verbeter de snelheid van je website door het opschonen van je database

Snelheid is hartstikke belangrijk voor je website, als de bezoekers te lang moet wachten dan haken ze af. Zo simpel is het... Een belangrijke (zo niet de belangrijkste) factor in de snelheid van je website is natuurlijk het optimaliseren van je afbeeldingen. Hier heb...

7 Stappen Voor Een Goede Voorbereiding Van Je Website

Schrijf je in om waardevolle tips & inspiratie te ontvangen. Je krijgt van mij de 7 stappen voor een goede voorbereiding cadeau!

7 stappen voor een goede voorbereiding van je website