Hoe optimaliseer je foto’s voor het web? Welke resolutie moet ik gebruiken voor een foto op mijn website? Hoe groot moet een internetfoto zijn? Zo maar een paar vragen die ik regelmatig zie langskomen in Facebook groepen en op forums.

De antwoorden zijn legio en bevatten meestal maar een deel van de waarheid. Om over de goedbedoelde maar foute antwoorden nog maar te zwijgen.

Als je naar de afkortingen en termen in bovenstaande header kijkt dan duizelt het waarschijnlijk voor je ogen. Maar na het lezen van dit artikel zal het waarschijnlijk voor eens en voor altijd duidelijk zijn.

Een foto optimaliseren voor het web is helemaal niet zo moeilijk als je de juiste stappen maar volgt.

De ideale foto voor internet moet aan een aantal criteria voldoen, waarbij de volgorde overigens willekeurig is.

• De lengte en breedte in pixels moeten zijn afgestemd op het gebruik op de website;
• De foto moet genoeg scherpte en detailering hebben om interessant gevonden te worden;
• De foto moet klein genoeg zijn om snel te kunnen laden;
• Iedereen moet de foto zien zoals jij hem bedoeld hebt;
• De foto moet gevonden kunnen worden.

Zaken als scherptediepte, standpunt, compositie etc. laten we hier uiteraard even buiten beschouwing.

Een doorsnee digitale camera of beetje smartphone maakt al snel een foto die enkele Megabytes (MB’s) groot en meer dan 3000 pixels breed is. Om zo’n foto voor het web te optimaliseren moet je een aantal stappen doorlopen. Adobe Photoshop (Elements) heeft hier de functie Bestand >  Opslaan voor Web of zoals in Photoshop CC: Bestand > Exporteren > Opslaan voor Web voor, maar in ieder ander pakket kan je dat ook prima uitvoeren.

Afstemmen op het gebruik

Als je een foto op internet wilt gebruiken moet je je vooraf afvragen waar je de foto wilt plaatsen. Wordt het een full page banner of slechts een fotootje in een 1/4 kolom.

Om je een idee te geven van  de verschillende breedtes staan hier de specificaties van het Divi WordPress thema van Elegant Themes.

Divi gebruikt de volgende breedtes:

1 kolom: 1080 pixels
¾ kolom: 795 pixels
⅔ kolom: 700 pixels
½ kolom: 510 pixels
⅓ kolom: 320 pixels
¼ kolom: 225 pixels

Maar vrijwel iedere website hanteert andere maten. Zo gebruikt Facebook voor een foto in een bericht een breedte van 720, 960 of 2048 pixels. Ieder ander formaat wordt door Facebook passend gemaakt en dat gaat ten koste van je kwaliteit.

Het is dus belangrijk uit te zoeken hoe groot de ruimte in pixels is waar jouw foto geplaatst wordt. Omdat we ons hier met beeldschermgebruik bezig houden hoeven we dus helemaal niet naar mm’s, cm’s of inches, maar uitsluitend naar pixels te kijken.

Als je weet waar je de foto wilt gebruiken kan je de foto gaan schalen naar de juiste pixel breedte en lengte. Dit kan je in vrijwel ieder fotobewerkingsprogramma doen. Als je geen Adobe Photoshop (Elements) of Lightroom hebt , kijk dan eens naar GIMP, een Open-Source pakket dat draait op Mac, Windows en Linux. IfranView is ook een alternatief voor Windows-gebruikers.

Van MB’s naar kB’s

Nu je de foto geschaald hebt, zal de omvang ook evenredig afgenomen zijn en is hij afhankelijk van het aantal pixels waarschijnlijk ergens tussen de 2 MB en een paar honderd kB. Maar zelfs een paar honderd kB is in veel gevallen nog veel te groot.

Als jij via Google op een site terechtkomt die erg traag laadt, wat doe je dan? Grote kans dat je de volgende in het rijtje kiest, niet waar?

Om de optimale omvang in kB’s te vinden zul je wat moeten experimenteren met de kwaliteit. Je moet een compromis vinden: de kleinste omvang die nog genoeg kwaliteit overhoudt om representatief over te komen. Je zal verrast zijn hoe ver je de kwaliteit kan terugschroeven zonder dat het zichtbaar wordt.

Werk je in Lightroom, kijk dan eens naar de JPEG Export Quality Tester plug-in van Jeffrey Friedl.

JPG, PNG of GIF

Zonder een heel technisch verhaal op te hangen is JPG nog altijd het aangewezen bestandsformaat als het om foto’s of foto-achtige bestanden zoals scans gaat.

Een PNG is uitermate geschikt voor bijvoorbeeld een logo. Zeker als je dit logo transparant wilt gebruiken. Dat kan namelijk niet met een JPG. Je kán een foto wel als PNG-24 bestand opslaan, maar die is veel groter dan een JPG. Daar schiet je dus niets mee op.

GIF’s kunnen ook gebruikt worden voor logo’s of bewegend animaties. Maar zijn ongeschikt voor foto’s.

Kortom: uitvoerformaat JPG.

72 PPI, 300PPI of is het nu DPI

Eén van de vele antwoorden die je op bovenstaande vragen tegenkomt is: “Je moet 72 PPI gebruiken” waarbij PPI ook regelmatig als DPI wordt geschreven. Maar voor eens en voor altijd. Je hoeft helemaal geen zorgen te maken over de PPI instellingen en al helemaal niet over DPI. DPI staat immers voor Dots Per Inch en komt pas om de hoek kijken als je een foto gaat printen en we hebben het hier over web gebruik.

De linker foto is geëxporteerd met een resolutie van 72 PPI, de rechter foto met 300 PPI. De beide uitvoerbestanden zijn v.w.b. formaat (960 x 640 pixels) en omvang (126 kB) even groot. Er is geen verschil omdat een browser helemaal niets doet met deze info, al gebruikte je 1000 PPI. Het stomme is dat er iets ingevuld moet zijn bij PPI en het veld dus niet leeg mag zijn.

sRGB of toch Adobe RGB of zelfs ProPhoto

Internetfoto’s hoeven al lang niet meer uitsluitend als sRGB te worden geëxporteerd. Moderne browsers zoals Chrome, Safari, Firefox en natuurlijk Internet Explorer kunnen ICC profielen lezen en zo dus Adobe RGB en zelfs ProPhoto correct weergeven. Mits het apparaat waar de foto op getoond wordt die kleurruimte ook ondersteund en je dus ook het correcte ICC profiel hebt meegestuurd.

Er zitten dus nog wel een paar mitsen en maren aan vast. Als er dus iets in de schakel niet goed gaat, krijgt de kijker dus een ander beeld te zien dan het beeld dat jij voor ogen hebt. Je moet je dus afvragen of je die grotere kleurruimte wilt gebruiken. De data in Google Analytics kan je helpen met deze afweging.

Al die risico’s kan je afvangen door te kiezen voor de “good old” sRGB kleurruimte. Zo weet je in ieder geval zeker dat iedereen je foto op dezelfde manier te zien krijgt en hoef je je ook niet druk te maken over ICC-profielen.

Metagegevens verwijderen

Je JPG bestand zit vol met (onzichtbare) informatie. Wat daar in zit en wat je er nog mee kan doen kan je zien in: Metagegevens Exporteren in Lightroom.

Los van het feit of je je zorgen maakt over deze info, is het verstandig om alle metagegevens met uitzondering van je copyright info te verwijderen. Zeker in kleine bestanden nemen de metagegevens een aanzienlijk deel van de ruimte in beslag.

De metagegevens verwijderen via Eigenschappen in je Verkenner of Finder lost het maar ten dele op omdat beide niet alle metadata kunnen verwijderen. Gelukkig zijn er voldoende gratis tools te vinden die het wel compleet voor je kunnen doen. Photoshop en Lightroom kunnen het uiteraard ook.

Verscherpen of toch maar niet

Een verscherpte foto is een paar kB groter geworden en de vraag is of je de hele foto wel wilt verscherpen. Je verscherpt dan immers ook de onscherpte met soms zeer vervelende gevolgen. Om het verschil te kunnen zien tussen de standaard uitvoer en hoge verscherping voor het beeldscherm moet je eens naar het volgende voorbeeld kijken.

De foto hieronder is een deelvergroting en via Lightroom geëxporteerd, bij de linker foto is geen uitvoer verscherping toegepast, terwijl bij de rechter foto de uitvoer verscherping op hoog is gezet.

Je foto moet gevonden worden

Het lijkt een open deur, maar je foto moet op internet gevonden worden. Als je hem alleen voor je zelf wilt houden kan je hem beter op het bureaublad van je PC of Mac zetten.

Zoekmachines zoals Google zijn erg goed in het lezen en rubriceren van teksten, maar nog altijd niet heel erg bedreven in het “bekijken” van een foto.

Foto’s die vanuit een camera of smartphone komen, gebruiken namen als DSC-0371.JPG of IMG_0853.JPG. Niet direct een naam die iets over de foto zegt. Om Google en andere zoekmachines een handje te helpen kan je beginnen met de bestandsnaam iets te laten zeggen over de foto.

Bijv. zonsondergang-strand-zeeland.jpg of trouwringen-bruiloft-alexander-maxima.jgp. Je eigen naam er in verwerken kan uiteraard ook. Gebruik geen bijzondere tekens zoals uitroep- of vraagtekens en zeker niet het copyright teken ©, want die geeft gegarandeerd problemen.

In het voorbeeld hierboven gebruik ik koppeltekens, of te wel streepjes. Google hanteert een verschil tussen koppeltekens en underscores (liggend streepje). Het verschil is niet groot, maar als je hiermee gaat beginnen raadt Google aan koppeltekens te gebruiken.

In een volgend artikel zal ik je laten zien wat je nog meer kan doen zodat je foto beter gevonden wordt.

WordPress

WordPress is een populair platform voor websites en zeer geschikt om als fotograaf je portfolio te presenteren. Houd er echter rekening mee dat WordPress zelf ook nog eens je JPG-bestanden comprimeert! Je foto wordt nogmaals tot 90% van het origineel gecomprimeerd. Op zich geen ramp als je bij de eerdere export van je foto maar aan de veilige kant blijft.

Update: 15-4-’16

Sinds WordPress 4.5 is de compressie geen 90 naar 82%.

Deze compressie kan je overigens uitzetten door de volgende regel aan je Functions.php bestand toe te voegen:

add_filter(‘jpeg_quality’, function($arg){return 100;});

Er zijn ook aan flink aantal WordPress plug-ins die de optimalisatie voor een deel van je kunnen overnemen of je foto nog verder kunnen optimaliseren. Plug-ins zoals Imagify, Kraken, EWW Image Optimzer,  of TinyPNG (ook geschikt voor JPG) kunnen echter nooit van een JPG-bestand uit je camera “zomaar” een optimale foto voor internet maken.

Let wel op bij dit soort plug-ins. Meestal verwijderen ze alle metagegevens, dus ook je copyright info.

Het lijkt zo op het eerste gezicht een hoop werk om een goede foto op het internet te zetten. Maar als je deze stappen een paar keer hebt doorlopen zal je zien dat het al snel een automatisme wordt. Het grootste deel kan je overigens al automatiseren door een (aantal) Export voorinstelling(en) in Lightroom te maken.

Han Balk | Fotografie | Windows | Blog | Security | old skool Bragg-watcher | Webdesign | Canon | Getrouwd | WordPress | Lightroom | Fuji | Vader van Iris | Social media | Internet en Meer...