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.

0 reacties

Een reactie versturen

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

Verder lezen?

De kleuren van je website bepalen met deze 5 handige tools

Ik heb 5 handige tools gevonden waarmee je de kleuren en kleurcombinaties voor je website kunt bepalen. Deze komen verderop in het artikel aan bod. Eerst heb ik nog wat extra informatie voor je over het gebruik van kleur voor je website (en huisstijl).

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.

De veranderingen van Mailchimp en de gevolgen voor je gratis account

Mailchimp heeft besloten om per 15 mei 2019 veranderingen aan te brengen in de abonnementen. Dit heeft voornamelijk voor de gratis versie best wel wat consequenties.

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...

Tips voor een goed gebruik van afbeeldingen op je website

Een goed gebruik van afbeeldingen op je website is belangrijk. In "Goede foto’s zijn belangrijk; ze maken je website" vertel ik over het belang van plaatsen van goede foto's. Maar als je dan de goede foto's hebt gevonden, dan is het ook nog belangrijk hoe je ze op je...

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!

Het beste WordPress theme kiezen voor je website, hoe doe je dat?

Een WordPress theme heb je nodig om je website aan de voorkant te kunnen laten zien. Hiermee bepaal je het voorkomen, het design en de uitstraling. Zie het als een auto, die bestaat uit de technische onderdelen om de auto te laten rijden en verder te laten doen wat...

5 onderdelen die absoluut niet mogen ontbreken op jouw website

Als ondernemer ontkom je er niet aan om een website te hebben voor je bedrijf. Het is hét middel om de klanten aan te spreken die je graag aan wil trekken. Je hebt veel ruimte om je producten, diensten en iets van jezelf te laten 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.

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…

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