In deze blog:
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-/webshopeigenaar: 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 afbeeldingoptimalisatie 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 komen en je zal 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 ertussen 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 te veel 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 vice 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 te veel 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 goede 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.
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’.
