Het belang van afbeeldingstypes en hoe ze te gebruiken

ShopFactory bevat een krachtige ingebouwde Afbeeldingsmanager die je een groot aantal zaken uit handen neemt. Hij past automatisch de grootte van afbeeldingen aan om een miniatuurfoto te maken, bepaalt de maximale grootte van de afbeelding zodat die perfect in je site past en linkt de miniatuurfoto aan een vergroting...

ShopFactory bevat een krachtige ingebouwde Afbeeldingsmanager die je een groot aantal zaken uit handen neemt. Hij past automatisch de grootte van afbeeldingen aan om een miniatuurfoto te maken, bepaalt de maximale grootte van de afbeelding zodat die perfect in je site past en linkt de miniatuurfoto aan een vergroting. Dus als je een foto hebt gemaakt van je product met je camera dan hoef je deze alleen maar op je computer op te slaan, liefst wel met een beschrijvende naam. ShopFactory gebruikt de naam als Titel van de afbeelding en zorgt verder voor alle andere foto’s die gebruikt kunnen worden, zoals bijvoorbeeld voor banners of kruiskoppelingen (inclusief het aanpassen van de grootte en het optimaliseren van de bestandsgrootte). 

Maar, het is wel belangrijk om te weten welke bestandstypes er zijn voor afbeeldingen, wat de verschillen zijn tussen de types en wanneer je welk type het beste kunt gebruiken.

Bestandstypes, wat is het verschil tussen JPG GIF PNG?

Het verschil in de diverse bestandstypes zit voornamelijk in de manier van compressie die wordt gebruikt. Standaard hebben de meeste afbeeldingen een vrij grootte bestandsgrootte, welke niet geschikt is voor gebruik op websites omdat ze de site enorm traag maken. De meest gebruikte bestandstypes voor afbeeldingen zijn .jpg, .gif en .png. Andere bestandstypes zoals .bmp, .tif, en .psd zijn niet gecomprimeerd en kunnen beter niet gebruikt worden voor websites omdat ze door hun bestandsgrootte te groot zijn.

JPG

Het JPG bestandstype (afkorting van Joint Photographic Experts Group) is een manier van compressie die het meest geschikt is voor foto’s en complexe afbeeldingen. JPGs gebruiken een compressietechniek die kleurvariaties verwijdert die voor het menselijke oog niet zichtbaar zijn, waardoor de bestandsgrootte enorm afneemt. Wees echter wel voorzichtig. Als je de kwaliteit van de JPG teveel verlaagt dan zal er belangrijke zichtbare informatie verloren gaan die je ook niet meer kunt herstellen.

Het JPG bestandstype maakt het ook mogelijk om een progressieve JPG op te slaan die in stappen wordt geladen op een website. Je hebt vast wel eens een website bezocht waarbij de afbeeldingen eerst een beetje vaag worden geladen en daarna steeds scherper worden.

Gebruik JPGs voor productfoto’s, portretfoto’s en andere gedetailleerde afbeeldingen waar kleurvariaties en kleine details belangrijk zijn. Maak geen gebruik van JPGs als je transparantie nodig hebt, JPGs ondersteunen geen transparantie.

GIF

Een GIF (Graphics Interchange Format) verlaagt het aantal kleuren in een afbeelding tot 256, terwijl er potentieel duizenden kleuren in een foto aanwezig kunnen zijn. GIFs ondersteunen wel transparantie.

GIFs hebben de unieke mogelijkheid dat je een serie van afbeeldingen kunt tonen als een soort van videoweergave (animated GIF), dit is dan een serie van afzonderlijke GIF afbeeldingen die aan elkaar gelinkt zijn om een animatie te maken.

GIFs, net als JPGs, hebben tevens de optie om in segmenten te laden op webpagina’s. Deze afbeeldingen, bekend als Interlaced GIFs, zijn over het algemeen iets groter dan normale GIFs, maar ze zorgen ervoor dat een webpagina sneller laadt omdat de afbeelding eerst alleen maar deels zichtbaar zal zijn.

GIFs zijn primair geschikt voor afbeeldingen waarin een beperkt aantal kleuren wordt gebruikt, zoals logo’s en grafieken, of voor afbeeldingen waarbij transparantie van belang is. Maak geen gebruik van GIFs voor full-color productfoto’s en portretfoto’s waarbij kleurvariaties en kleine details belangrijk zijn..

Alhoewel het GIF bestandstype nog steeds wordt gebruikt, raden we aan om hiervoor in de plaats het PNG bestandstype te gebruiken, wat bijna alles veel beter doet.

PNG

PNG (Portable Network Graphics) zijn ontwikkeld als een alternatief voor het GIF bestandstype, toen de GIF nog beschermd was met een copyright en er toestemming nodig was om het te mogen gebruiken. Met PNGs behaal je een compressie die 5 tot 25 procent hoger is dan met GIFs, en met een grotere variatie aan kleuren. net als GIFs, ondersteunt het PNG bestandstype ook transparantie. Maar, PNGs ondersteunen variabele transparantie waarbij de gebruiker kan bepalen in hoeverre een afbeelding transparant moet worden. Het nadeel van deze geavanceerde transparantie in PNGs is dat niet alle oudere browsers de transparantie op dezelfde manier zullen tonen.

PNGs ondersteunen ook het in segmenten laden van afbeedlingen (image interlacing), net als bij GIFs, maar PNGs gebruikt twee-dimensionale interlacing, waardoor ze 2x zo snel zullen laden als GIF afbeeldingen. Als je interesse hebt in deze interlacing technology, kun je hier meer informatie vinden op het internet.

SVG

SVG (Scalable Vector Graphics) moeten we ook even noemen. SVGs zijn een web standaard gebaseerd op XML die zowel statische afbeeldingen als animaties in twee dimensies beschrijft. Deze standaard bestaat al meer dan tien jaar maar met de recente opkomst van HTML5 - zal SVG meer en meer gebruikt gaan worden. Met het SVG bestandstype kun je zeer hoge kwaliteitsafbeeldingen maken die niet in kwaliteit achteruit gaan als ze groter worden. Dit houdt in dat je met SVG je een afbeelding kunt maken die zowel op een klein scherm van een mobiel als op een 60 inch monitor er perfect uit zal zien.

Wanneer gebruik je welk type?

Alhoewel er geen magische formule is om te bepalen welk afbeeldingstype het beste gebruikt kan worden, zijn er wel een aantal richtlijnen te geven die een weloverwogen beslissing mogelijk maken.

Als de afbeelding een groot aantal kleuren bevat gebruik dan geen GIF.
PNGs of JPGs zijn het beste voor afbeeldingen met veel kleuren.

JPGs zijn het beste voor foto’s of afbeeldingen met fotografische elementen en kleine details.

PNGs zijn beter voor afbeeldingen met teksten, grafieken, screenshots en gedetailleerde instructies.

Als je gaat bepalen welk bestandstype je gaat gebruiken voor een afbeelding die relatief weinig fotografische elementen bevat - is het een goed idee om de transparantie en complexiteit van de afbeelding te bepalen. Voor een afbeelding met een groot aantal kleuren heeft of een variabele transparantie nodig heeft is PNG het juiste bestandstype. Een afbeelding met transparantie wordt over het algemeen gebruikt als je de achtergrond kleur van je website wilt laten zien in je afbeelding zodat de afbeelding naadloos in je website lijkt te passen.

Als de afbeelding maar weinig kleuren bevat en geen geavanceerde transparantie nodig heeft dan is GIF de beste oplossing. Onthoud dan wel dat het gebruik van transparantie getest moet worden in diverse browsers om er zeker van te zijn dat het effect overal hetzelfde is.

Als je nog steeds twijfelt over welk type nu het beste is bestaat er een simpele test die je kan helpen bij het maken van je keuze. Sla in je fotobewerkingssoftware een afbeelding op in alle drie de bestandstypes en vergelijk daarna de bestandsgrootte en de kwaliteit van de afbeeldingen. Hierdoor kun je snel bepalen welk bestandstype voor jou de beste kwaliteit en de kleinste bestandsgrootte geeft.

Het aanpassen van bestandstypes

Als je geen toegang hebt tot professionele design software met geavanceerde import en export opties zijn er voldoende gratis alternatieven waarmee je foto's kunt opslaan in verschillende bestandstypes. Als je gebruik maakt van Windows is Microsoft Paint geschikt om snel een afbeelding te openen en op te slaan in een ander bestandstype. Dit is een eenvoudig programma waarmee je geen transparantie kunt gebruiken en de compressie is lang niet zo goed als bij professionele software. Een goed alternatief dat wel transparantie kan gebruiken en goede compressie behaalt is het gratis te gebruiken Irfanview. Voor Mac gebruikers is er het equivalent voor MS Paint en dat is Paintbrush.

Andere gratis alternatieven waarmee je afbeeldingen kunt opslaan in diverse bestandstypes zijn GIMP, voor zowel Windows en Mac OS; Pixelmator, exclusief voor Mac OS; en Aviary, een online design suite.

Samenvatting

Het is een goed idee om je te verdiepen in de verschillende mogelijkheden van JPG, GIF, en PNG. Dit zijn de drie belangrijkste bestandstypes die op het internet gebruikt worden tegenwoordig. Als je weet welk type je op welk moment moet gebruiken zal leiden tot een betere kwaliteit van je afbeeldingen en een snellere laadtijd van je webpagina’s.