Elja Trum

7 tips voor het optimaliseren van foto's voor het web

maandag 27 januari 2014, 23:23 door | 43,668x gelezen | 16 reacties

Het is al lang niet vreemd meer als je foto's amper nog afdrukt. Veel fotografen tonen hun werk vooral online op (hun eigen) websites of op fora. Dan is het natuurlijk wel slim als je er voor zorgt dat je foto's zo optimaal mogelijk getoond worden. Wij geven 7 tips om je foto's te optimaliseren voor vertoning op internet.

1. Opslaan in sRGB


Als fotograaf werk je waarschijnlijk tijdens het nabewerken minimaal in AdobeRGB of zelfs, zoals standaard in Lightroom, in ProfotoRGB. In deze kleurruimten heb je veel meer bereik dan in sRGB. Die laatste kleurruimte is echter wel waarin 99 procent van je kijkers de foto zullen bekijken.

Als je een foto aanbiedt in een kleurruimte die niet overeenkomt met de kleurruimte die de browser en de monitor ondersteund kunnen de kleuren mislopen. Een foto wordt dan bijvoorbeeld veel te rood weergeven. Om dit te voorkomen kun je foto's voor vertoning op internet het beste opslaan in de sRGB kleurruimte.

AdobeRGB versus ProPhotoRGB
ProPhotoRGB (grijs) vergeleken met AdobeRGB (kleur)

2. Verklein je foto (afmetingen)


De 10 tot 30 megapixel foto die uit je camera komt is standaard veel te groot voor vertoning op internet. Er is geen monitor te koop die een dergelijke foto in zijn geheel kan tonen. Een prijzige Ultra HD monitor kan net een 8,3 megapixel foto laten zien.

Het heeft dan ook erg weinig zin om een foto niet vooraf te verkleinen. Als je dit niet doet zullen de meeste fotosites het overigens voor je doen. Da's jammer, want dan heb je zelf geen invloed over de gebruikte methode om de foto te schalen. Facebook is bijvoorbeeld bijzonder slecht in het verkleinen van foto's.

Vrijwel elke site heeft een ideaal formaat waarop de foto het beste aangeleverd kan worden. Probeer uit te zoeken wat het is voor de website waar jij de foto wilt plaatsen en lever je foto in deze afmetingen aan.

3. Verklein je foto (bestandsgrootte)


Op internet is het meest gebruikte bestandstype voor foto's Jpeg. Dat is ook een prima keuze, want Jpeg biedt behoorlijk wat kwaliteit terwijl hier een redelijk compact bestand uit kan komen. Ik zeg kan komen, want de toegepaste Jpeg compressie kun je bij het opslaan zelf bepalen.

De maximale kwaliteit is voor vertoning op internet nooit nodig. Photoshop duidt de kwaliteit bijvoorbeeld aan met een getal tussen de 0 en de 12. Twaalf is bewust gekozen. Adobe probeert hiermee aan te geven dat kwaliteitsniveau 10 hoog genoeg is. Het verschil tussen 10 en 12 zul je in de praktijk niet zien.

Als de kwaliteit in procenten aangegeven wordt is het ook nooit nodig om op 100% op te slaan wanneer je de foto op internet wilt gaan vertonen. Het bestand wordt veel kleiner wanneer je tien of twintig procent compressie toepast zonder dat je echt verschil zult zien in de foto.

Een foto van 1500 pixels breed en 1000 pixels hoog kan bijvoorbeeld 650 kilobyte groot zijn wanneer je hem op 100 procent opslaat en slechts 200 kilobyte wanneer je 75 procent gebruikt. Wanneer iemand je site bezoekt duurt het inladen van die foto dan niet 14 seconden, maar 5 seconden. Het kan het verschil zijn tussen het bekijken van je foto's en het verlaten van je website..

4. Opslaan voor web


Photoshop heeft een handige tool om afbeeldingen klaar te maken voor het web: de 'opslaan-voor-web' functie. Je vind deze in het menu 'Bestand' bij 'Opslaan voor web'. In het dialoogvenster wat verschijnt kun je niet alleen spelen met de gebruikte kwaliteit, maar ook direct het formaat aanpassen naar jouw wensen.

Ook geeft de opslaan-voor-web functie je een voorvertoning van hoe de foto eruit gaat zien, laat hij zien hoe groot het bestand wordt en geeft hij een indicatie voor de benodigde tijd om de foto binnen te halen via internet. Een handige tool om je foto's gereed te maken voor vertoning op het internet.

Opslaan voor web dialoog

Leden van Photofacts Academy kunnen hier een korte tutorial over opslaan voor web met Photoshop vinden.

5. Let op de bestandsnaam


Zoekmachines kunnen (nog) niet bepalen wat er precies op je foto staat. Het kan daarom lastig zijn om gevonden te worden als fotograaf met jouw werk. Wil je de zoekmachines een handje helpen, zorg er dan voor dat de bestandsnaam van je foto beschrijvend is.

In plaats van 'IMG_1256.JPG' kun je dus beter je foto 'huwelijksfoto-erwin-vanessa-bruidstaart.jpg' noemen. Zo kan de zoekmachine bepalen waar de foto over gaat en deze bijvoorbeeld tonen wanneer iemand zoekt op een bruidstaartfoto genomen tijdens een huwelijk. Een mooie extra manier voor potentiële klanten om bij je terecht te komen.

Misschien was het je opgevallen dat ik streepjes gebruik in plaats van spaties. Hoewel spaties in principe geen kwaad kunnen is het een goede gewoonte deze te vervangen door streepjes. Sommige browsers of zelfs servers hebben moeite met de spaties in een bestandsnaam. Voorkom deze problemen en gebruik geen spaties en al helemaal geen 'vreemde' karakters in een bestandsnaam van een foto. Ook het gebruik van hoofdletters is af te raden.

6. Title- en alt-tags


Nu wordt het wellicht wat technischer, maar aan een foto op internet kunnen zogenoemde alt- en title-tags toegevoegd worden. Dit zijn beschrijvingen van de foto die gelezen worden door browsers en zoekmachines. Wellicht ken je het wel van de tekst die verschijnt wanneer je met je muis boven een foto hangt. Dat is de title-tag.

De alt-tag wordt gebruikt wanneer het niet mogelijk is de foto in te laden, het alternatief voor de foto dus. Behalve zoekmachines worden deze tags bijvoorbeeld ook gebruikt door slechtziende en blinde mensen wanneer ze het internet afzoeken.

Probeer dus altijd om je foto's ook van deze tags te voorzien. Op de meeste fotografie websites gaat dit automatisch en bij gebruik van bijvoorbeeld Wordpress is er bij het invoegen van een foto ook de mogelijkheid deze beschrijvingen in te vullen. Besteed hier een beetje tijd aan en je foto's zullen beter gevonden worden.

7. Overweeg een variant met hoge pixeldichtheid


Tot voor kort was 72 pixels per inch de standaard pixeldichtheid bij het vertonen van foto's op internet. Onder andere Apple's Retina schermen en andere schermen met hogere pixeldichtheid (te vinden op veel telefoons) brengen hier nu verandering in.

Apple retina display

Het is mogelijk om op je website twee versies van een afbeelding aan te bieden. Eén 'kleinere' versie voor lage resolutie schermen en één retina versie op hogere resolutie. Hierdoor zullen je foto's op een retina scherm veel scherper getoond worden. Het nadeel is dat er extra code nodig is die er voor zorgt dat de juiste afbeelding op het juiste moment getoond wordt.

Daarnaast moet je telkens twee versies van je foto aanmaken en beheren. De versie met het hogere aantal pixels zal ook veel meer bestandsruimte innemen en dus ook trager inladen. Heb je veel bezoekers die met hoge resolutie monitoren je site bezoeken dan is het gebruik van hogere resultie foto's zeker het onderzoeken waard.

Hoe staat het met jouw online foto's?
Zijn ze goed vindbaar, van goede kwaliteit en laden ze snel in?

Elja Trum

Over de auteur

Elja Trum is oprichter van Photofacts en auteur van een boek over zwart-wit fotografie. Hij is fulltime actief met Photofacts, Photofacts Academy en Teslafan. Elja's foto's vind je op Instagram, hij is getrouwd met Sara en vader van Mika en Vera.

16 reacties

  1. martinphili
    Profiel martinphili schreef op maandag 27 januari 2014 om 23:35

    Ik mis nog iets over verscherpen na het verkleinen.

  2. Elja Trum
    Profiel  Elja Trum schreef op dinsdag 28 januari 2014 om 00:03

    @Martinphili; Niet per se noodzakelijk vind ik, al kan een kleine verscherping inderdaad vaak geen kwaad. Ligt ook een beetje aan de foto.

  3. KIOMFOTO
    KIOMFOTO schreef op dinsdag 28 januari 2014 om 00:58

    Een foto heeft geen DPI, alleen pixels. DPI komt alleen om de hoek kijken bij printen.

  4. Leon
    Leon schreef op dinsdag 28 januari 2014 om 08:30

    @Elja,

    hoe kan een verscherping niet perse noodzakelijk zijn?? Vind dat een beetje uitleg over 'save for web' hier toch zeker missen (zonder dat je gedwongen wordt om betalend lid te worden van je andere site)

Deel jouw mening

Let op: Op een artikel ouder dan een week kan alleen gereageerd worden door geregistreerde bezoekers.
Wil je toch reageren, log in of registreer je dan gratis.
Toon alle artikelen binnen Tips en Truuks

Photofacts wordt mede mogelijk gemaakt door

CameraTools

Ontvang wekelijks fotografietips in je inbox

48.661 fotografie enthousiastelingen ontvangen de tips al!
Meer over de wekelijkse mail. Of blijf op de hoogte via Twitter of Facebook.


Elja Trum

Photofacts; alles wat met fotografie te maken heeft!

Wil je graag mooiere foto's maken en op de hoogte blijven van ontwikkelingen binnen de fotografie? Photofacts plaatst leerzame artikelen die gerelateerd zijn aan fotografie. Variërend van product-aankondiging tot praktische fotografietips of de bespreking van een website. Photofacts bericht dagelijks over fotografie en is een uit de hand gelopen hobby project van Elja Trum. De artikelen worden geschreven door een team van vrijwillige bloggers. Mocht je het leuk vinden om een of meerdere artikelen te schrijven op Photofacts, neem dan contact op.Meer over Photofacts
Om Photofacts.nl goed te laten functioneren maken we gebruik van cookies. Bekijk ons cookiebeleid. akkoord
sluiten

Mis het gratis fotografie eBook niet!

48.661 fotografen ontvangen onze wekelijkse fototips al. Schrijf je in en ontvang gratis het eBook '25 Tips voor het Fotograferen van Kinderen'.