INOMA

Afbeeldingen en foto’s optimaliseren voor je website

×
Ga terug naar het overzicht

Afbeeldingen en foto’s optimaliseren voor je website

Je kent het wel. Je opent een website en vervolgens begint het laadwieltje te draaien. Je ziet ineens tekst in beeld komen en vervolgens zie je foto’s streepje voor streepje inladen. Een ander voorbeeld: je opent een website, je wilt klikken, en vervolgens verspringt de structuur door de foto’s die plots inladen. Of de schrik van elke website/ webshop eigenaar: korrelige foto’s. En dan denk je het eindelijk opgelost te hebben om vervolgens verteld te krijgen dat je afbeeldingen niet Google optimaal zijn. Kortom, beeld in een digitale omgeving kan voor de nodige hoofdpijn zorgen.

Wil je ook weleens afbeeldingen en foto’s optimaliseren voor je website en herken je dit? Lees dan verder.

Ter introductie

Voor we van start gaan is het belangrijk om de vier pijlers van afbeelding optimalisatie helder te hebben. In de introductie hebben we er al iets over gezegd. De pijlers zijn:

  • De bestandsnaam van de afbeelding optimaliseren.
  • De bestandsafmeting optimaliseren.
  • De bestandsgrootte optimaliseren.
  • Alternatieve tekst en titel binnen WordPress.

Als je de bovenstaande vier punten onder de knie hebt kom je een heel eind. Dit zal de gebruiksvriendelijkheid van je online omgeving ten goede doen en zal je een verbetering in de vindbaarheid merken.

De bestandsnaam van de afbeelding optimaliseren

De bestandsnaam van de afbeelding optimaliseren gaat je sowieso lukken. In de basis is het simpel. Zorg ervoor dat Google kan lezen wat er op de foto staat. Google heeft geen ogen, je moet het hen duidelijk maken. Een simpel voorbeeld, wil je vindbaar worden op aardbeien? Noem de afbeelding aardbeien.jpg. Wil je wat doen met aardbeien verkopen? Noem de afbeelding dan aardbeien-verkopen.jpg. Let wel op het streepje er tussen zodat het niet één grote brei wordt.

Heb je meerdere foto’s op één pagina? Geef de afbeeldingen dan verschillende bestandsnamen mee. Anders wordt het een beetje teveel van het goede. Sterker nog, door slim om te gaan met je fotonamen kun je met één pagina in Google Image search vindbaar worden op meerdere termen. Later hierover meer met wat mooie voorbeelden.

De bestandsafmeting optimaliseren

Het idee van een bestandsafmeting optimaliseren is simpel. Op een mobiel scherm is het niet nodig om een afbeelding in te laden die groter is dan je computerscherm. En visa versa is het niet slim om een afbeelding op mobiel formaat in te laden op je computer. De afbeelding blaast dan op en wordt super korrelig.

De meest perfecte oplossing is het inladen van foto’s per schermformaat. Maar dat is voor 99% van de site eigenaren echt teveel werk. En dat snappen we. Een simpelere oplossing is groot beginnen en naar klein toe werken.

Als je een foto maakt met je fototoestel is een foto vaak 6000 pixels breed, terwijl een schermformaat vaak niet breder is dan 1920 pixels. Onze tips:

  • Header afbeeldingen: maximaal 2000 pixels breed
  • Tablet afbeeldingen: maximaal 1200 pixels breed
  • Mobiele afbeeldingen: maximaal 700 pixels breed

Let vooral op de breedte aangezien vrijwel alle schermen ook horizontaal georiënteerd zijn.

De bestandsgrootte optimaliseren

Dit is misschien wel de moeilijkste stap voor een leek. Je hebt namelijk een fotobewerkingsprogramma nodig. Programma’s zoals Photoshop zijn essentieel als je deze stap goed wilt doorlopen. Er zijn ook diverse online tools, maar deze redden het niet bij de kwaliteit van Photoshop.

Als je de bestandsafmeting verkleint zal automatisch de bestandsgrootte mee krimpen. Hoe minder groot de foto, hoe minder data het bestand bevat, hoe minder groot de foto wordt. Simpel toch? Niet helemaal. Als een fotograaf een foto schiet zal hij dit doen met een hoge DPI (Dots Per Inch). Vaak is dit 300 DPI, oftewel 300 datapuntjes in één inch die het beeld maken tot wat het is. Voor webbestanden heb je maximaal 72 DPI nodig.

Naast DPI kun je ook nog eens spelen met compressie. Compressie doet niks meer en niks minder dan de kwaliteit van een foto naar beneden halen. Hoe minder de kwaliteit, hoe minder data, hoe lichter de foto. Het lastige van comprimeren is dat je ook kunt doorslaan en de foto zijn scherpte verliest. Dat ziet er weer onprofessioneel uit. Het is dus soms even zoeken naar een goed balans tussen de kwaliteit en compressie.

Tip: Photoshop heeft hier een handige oplossing voor: opslaan voor web. Photoshop past het bestand al zodanig aan dat het optimaler wordt voor het internet. Vervolgens kun je met een schuifje de kwaliteit bewerken. Dit zie je vervolgens in de voorbeeldweergave terug. Ideaal.

Afbeeldingen optimaliseren

Alternatieve tekst en titel binnen WordPress

Het is zover. Je hebt alles wat je kon doen gedaan en je kunt de foto’s gaan uploaden. Als finishing touch raden we je aan de alternatieve tekst en titel in te vullen. Je kunt een complete uiteenzetting toevoegen, maar wij houden van simpel en pragmatisch. Wij geven in de meeste gevallen de naam van de foto mee. Een foto met de bestandsnaam online-marketing.jpg geef je als Alt en Titel ‘Online marketing’ mee. De Alt en Titel van een foto met de bestandsnaam ‘de-leukste-lunchlocaties-van-nederland.jpg vul je met ‘De leukste lunchlocaties van Nederland’.

Afbeeldingen en Google

Tijdens het doorlopen van de bovenstaande stappen zal je misschien gedacht hebben ‘Pfoe, wat een werk…’. Dit snappen we. Maar neem het van ons aan, het optimaliseren van afbeeldingen levert je genoeg op. Om dit te onderbouwen laten we de redenen uitgeschreven met een bijpassend voorbeeld a.d.h.v. onze klant DBS Automotive.

Reden 1: Door het toevoegen van relevante informatie en/ of zoektermen aan een foto vertel je Google heel duidelijk waar jouw foto op getoond moet worden. Met name in Google image search kan dit een mooie boost in bezoekers opleveren.

Voorbeeld 1: Als je specifiek op zoek bent naar een ‘Audi RS6 Avant 4.0 TFSI Quattro Performance’ staat DBS Automotive op de derde plek tussen de afbeeldingen. Maar ook op de generiekere term ‘Audi RS6 Performance’ komt DBS Automotive omhoog:

Reden 2: Google stelt eisen aan wat zij een optimale pagina vinden. Denk aan bijvoorbeeld een minimale tekst lengte van 450 woorden, het toevoegen van interne linkjes, maar ook een afbeelding die in lijn ligt met het zoekwoord van de pagina. Hoe meer je voldoet aan de eisen die Google stelt aan een pagina, hoe groter de kans is dat jouw pagina zal stijgen in de indexen.

Voorbeeld 2: De hoofdpagina van DBS Automotive is geoptimaliseerd op Exclusieve auto kopen. De hoofdfoto heet Exclusieve-auto-kopen.jpg. In de ingevulde alternatieve tekst en titel staat ook ‘Exclusieve auto kopen’.

Reden 3: Snelheid is een belangrijke factor die Google en andere zoekmachines meetellen in het beoordelen van je website. En met snelheid bedoelen we het aantal seconden die nodig is om de totale website in te laden voor een bezoeker. Hoe langer de website of webshop er over doet, hoe vervelender een bezoeker dit zal vinden. Het doel van zoekmachines is juist websites en webshops tonen die gebruiksvriendelijk zijn. Anders zou iedereen stoppen met het gebruiken van zoekmachines.

Om de snelheid te boosten kun je vier opties benutten:

  • Lazy load: Je kunt er voor kiezen om afbeeldingen pas inladen wanneer je ze voorbij ziet komen tijdens het scrollen.
  • Verschillende bestandsformaten laden: Je kunt er ook voor kiezen om de code voor jou te laten werken. De code maakt meerdere bestandsgroottes en kiest de foto die past bij het schermformaat waarin de foto wordt ingeladen.
  • Bestandsgrootte verkleinen: Hoe kleiner de afbeelding, hoe lichter de foto is om in te laden.
  • Caching: Middels caching kun je foto’s opslaan in een browser. Zo onthoudt je browser, zoals Chrome of Firefox, de foto. De volgende keer dat je de website bezoekt staat de foto al klaar om getoond te worden.

Voorbeeld 3: Een voorbeeld waar wij erg van gecharmeerd zijn is de manier waarop DBS Automotive de foto’s inlaad. Zij kiezen voor optie 2 en 4 uit de bovenstaande oplossingen. Per scherm formaat wordt er een foto ingeladen die speciaal voor dat schermformaat is bedoelt. Zo blijft de foto altijd scherp en voldoet de foto aan de eisen. En middels browser caching worden de foto’s ook nog eens met minimale laadtijd getoond.

Ter afsluiting

We hopen dat je wat meer wegwijs bent geworden met het optimaliseren van afbeeldingen en wat er voor nodig is. Kom je er toch niet helemaal uit of heb je hier gewoon echt geen kaas van gegeten? Neem dan vrijblijvend contact met ons op.

Neem contact op

Ga terug naar het overzicht

Zij gingen u voor

PBC Group
DBS Automotive
Reinasan
Movi Performance Gym
Van Wikselaar Automotive
Be Polished By Glennys
Logo OOWK
Jorik Algra Fotografie

Online marketeer inhuren: Tijdelijk of met oog op vast dienstverband.