Zo optimaliseer je afbeeldingen op je website (voor SEO & gebruiker)
Een vergeten én onderschat onderdeel van website-optimalisatie is het optimaliseren van afbeeldingen. Afbeeldingen optimaliseren doe je niet alleen voor SEO, ook voor je gebruiker. Vanuit het oogpunt van toegankelijkheid zijn afbeeldingen ook een belangrijk onderdeel van je website.
(let goed op de gouden tip die je in dit artikel vindt…)
-Dit artikel is oorspronkelijk gepubliceerd op 25 september 2014 en op 10 april 2024 grondig geüpdatet, samengevoegd met een ander artikel, en opnieuw gepubliceerd-
Waarom afbeeldingen op je website optimaliseren?
Laten we beginnen met waarom afbeeldingen optimaliseren zo belangrijk is. Hier zijn 3 belangrijke redenen voor:
- SEO;
- Gebruikersvriendelijkheid;
- Toegankelijkheid (accessibility).
SEO en toegankelijkheid hebben veel met elkaar te maken. Het gaat bij beide om het begrijpen wat er op de afbeelding staat en wat de context is met de inhoud van de pagina.
De zoekmachinebots herkennen geen foto’s. Die zien niet het verschil tussen een foto van Nathan Veenstra of Michiel Veenstra niet…
Dankzij de ontwikkelingen rondom AI weten we dat het daadwerkelijk begrijpen van wat er op foto’s staat niet zo makkelijk is voor machines (zoals AI-tools). Dat heeft Arjen Lubach heel goed uitgelegd in deze video:
Misschien nog wel wat duidelijker (en korter) is deze uitleg van Lieven Scheire over waarom AI husky’s en wolven niet echt goed kan onderscheiden van elkaar:
En net als die zoekmachinebots is ook de voorleessoftware voor mensen met een visuele beperking niet in staat om precies te begrijpen wat er op een foto staat. Of wat die foto met de informatie op die pagina te maken heeft. Dus goede optimalisatie van afbeeldingen helpt zowel bezoekers met een visuele beperking als de zoekmachines.
De eerste slag met afbeeldingen op je website
Afbeeldingen zijn nuttig. Ze voegen wat toe aan je tekst, illustreren je verhaal en maken je webpagina’s prettiger leesbaar. Want een pagina met alleen tekst sla je toch gauw over? Als je ze dan toch gebruikt, laat ze dan ook zeker bijdragen aan je SEO. Er zijn 2 dingen waar je rekening mee moet houden bij het optimaliseren van afbeeldingen:
- Technische optimalisatie: formaat en afmeting
- Tekstueel: bestandsnaam, titel en alt-tekst
Beide hebben invloed op je SEO, maar ook op de gebruiksvriendelijkheid van je website. En zoals je weet, pleit ik er altijd voor om je gebruiker voorop te stellen.
Formaat en afmeting: essentieel voor laadtijd
Een (te) grote afbeelding kost tijd om te laden. Zowel de bestandsgrootte als de afmetingen spelen hierin een rol. Bij afmetingen komt er nog iets om de hoek kijken. Wanneer je foto’s of afbeeldingen in een groter formaat uploadt dan deze wordt weergegeven, moet je browser:
- eerst een bestand ophalen dat groter is en dus meer laadtijd kost dan nodig is
- de afbeelding daarna schalen naar de afmetingen waarop deze moet worden weergegeven, wat ook weer tijd kost
Je krijgt dus op twee vlakken vertraging op je laadtijd, terwijl dat niet nodig is. Hoe je hier achter komt, lees je in ‘Zo test en verbeter je de snelheid van je website‘.
Vooropgesteld: laadtijd heeft weinig invloed op je SEO. Het technisch optimaliseren van foto’s doe je vooral voor de gebruiker. Een snel ladende webpagina is nu eenmaal een veel betere gebruikerservaring. En traag ladende afbeeldingen kunnen ook van invloed zijn op de prestaties van je webpagina’s op de Core Web Vitals.
Tekstueel: ga niet op je smoel met over-optimalisatie
Een digitale afbeelding kan niet zonder leestekens, of dat nu cijfers, letters of woorden zijn. Het is een bestand, met dus een bestandsnaam en nog wat andere data. Voor een afbeelding op een webpagina zijn er 4 onderdelen waar je tekst kwijt kan:
- Bestandsnaam; dat begint al bij het opslaan van je afbeelding
- Titel, ook ‘attribuut afbeeldingstitel’; verschijnt als iemand met de muis over de afbeelding gaat
- Alt tekst; wordt ook alt-tag genoemd, daar komen we nog op
- Onderschrift; voor een eventuele toelichting op de afbeelding
Let op: de titel van een afbeelding in WordPress is vergelijkbaar met de bestandsnaam, het is alleen bedoeld als ‘titel’ voor je eigen mediabibliotheek.
Kijk bij de tekstuele optimalisatie wel uit dat je niet over-optimaliseert. Ga niet op je smoel door de boel vol te spammen. Heeft geen zin. En daar zijn die onderdelen dus ook niet voor bestemd.
Tekstuele optimalisatie van je afbeeldingen
We nemen alle vier onderdelen door en bekijken wat je ermee kan of moet. En wat het doet voor SEO. Want je wilt natuurlijk wel dat je afbeeldingen bijdragen aan je vindbaarheid.
De bestandsnaam: vooral voor jezelf, en misschien voor SEO?
We beginnen met de bestandsnaam. Dat is dus hoe je zelf de foto opslaat. Mijn gouden tip hiervoor is:
Geef je afbeeldingen een bestandsnaam waardoor je ze zelf ook makkelijk kunt terugvinden.
Je harde schijf is je digitale bibliotheek, waarin je steeds meer media opslaat. Hoe vind je nu die ene foto terug die je zo graag nog eens wilt laten zien? Door ‘m een bestandsnaam mee te geven waarmee je ‘m terugvindt natuurlijk. Die ene leuke foto van jou met Mickey Mouse in Disneyland Parijs vind je niet snel als die DSC0448 heet. Wel als Mickey Mouse en Disneyland Parijs in de bestandsnaam voorkomen. Zo moeilijk is het niet hè?
Bestandsnamen en de zoekmachines
Kijk eens naar het voorbeeld hieronder, en vraag jezelf af wat die bestandsnaam zegt over wat er op de foto staat. Die bestandsnaam ‘ziet’ de zoekmachinebot ook en hoewel het officieel geen SEO-factor is, heb ik het sterke idee dat het wel iets doet. Want: woorden in de broncode van je webpagina worden ‘gelezen’, en als daar woorden in staan die iets te maken hebben met het onderwerp van de pagina, zegt dat toch meer dan DSC0448.jpg?
Bestandsnaam wordt titel in WordPress
Je ziet hierboven al dat de geüploade foto ‘DSC0448.jpg’ als naam had op mijn harde schijf. Dit wordt 1-op-1 overgenomen en gekopieerd in het vak ‘Title’. Die titel in WordPress is vergelijkbaar met de bestandsnaam in jouw eigen ‘bibliotheek’. De zoekmachine ziet die titel niet en kan daar ook niks mee doen. Die kan dus zo blijven, hoef je niks mee te doen als je bestandsnaam duidelijk genoeg is.
De alt-tekst: eigenlijk de belangrijkste
De alt-tekst is de ‘alternatieve tekst’. Deze was ooit bedoeld om te beschrijven wat er op de afbeelding stond wanneer de afbeelding niet weergegeven werd op een webpagina. Toen het internet nog over een telefoonverbinding liep en je per MB betaalde, schakelden mensen de weergave van afbeeldingen soms uit. Hierdoor laadde een webpagina sneller en kostte het minder geld. De alt-tekst werd dan vertoond op de plek waar de afbeelding stond, zodat je een beeld had van wat er op de afbeelding stond.
Voor de visueel beperkten én (een beetje) voor SEO
De belangrijkste functie van de alt-tekst is nu om de afbeelding te beschrijven voor mensen met een visuele beperking. Die hebben screenreader-software die webpagina’s voorleest voor ze. De alt-tekst wordt door die screenreaders ook voorgelezen, zodat ze bezoekers met een visuele beperking weten dat er een afbeelding staat en wat er op staat.
Lees hier meer over de alt-tekst en hoe je een goede alt-tekst schrijft.
Hoe het met SEO zit?
Er wordt vaak gezegd dat je die alt-tekst moet gebruiken voor je SEO. “Zet er zeker je zoekterm in” wordt er dan gezegd. Niet doen. Daar is het niet voor bestemd. Aan de andere kant is de kans groot dat je je zoekterm of woorden daaruit voorkomen in je alt-tekst, omdat de afbeelding toch iets te maken heeft met het onderwerp van de pagina, zoals we hiervoor ook al konden concluderen?
-Het volgende deel over technische optimalisatie was oorspronkelijk een apart blog van Jason Thane Jeffers en nu hier toegevoegd voor het complete plaatje over het optimaliseren van de afbeeldingen op je website-
Technische optimalisatie van afbeeldingen
En dan de meer technische aspecten van afbeeldingen en wat jij of je webdeveloper kan doen om problemen te voorkomen. Zo laadt je site sneller en daarmee maak je ook de zoekmachines blij. Laten we beginnen met de afmetingen van afbeeldingen.
“Size matters”, ook bij afbeeldingen
Stel dat je een pakkend artikel schrijft over je nieuwste product en je krijgt er van de leverancier een mooie foto van. Deze zet je in je artikel en dan bekijk je het in de browser. Goh wat duurt het lang voordat de pagina laadt. Dit krijg je als je een afbeelding gebruikt die eigenlijk bedoeld is voor drukwerk: 3000 x 2000 pixels en dan 12MB. Dit is een extreem voorbeeld, maar het gebeurt vaker dan je denkt.
De huidige maximale breedte van het contentgebied op een webpagina is nu rond de 2000 pixels (met uitzondering van full-width sliders; die kunnen 2400 pixels breed zijn). De extra 1000 pixels in dit voorbeeld zijn dus overbodig en kosten alleen maar meer bandbreedte en laadtijd dan nodig is. Je verliest ook wat kwaliteit omdat je het aan de browser overlaat om de afbeelding te schalen. De manier van schalen en het resultaat verschilt per browser en besturingssysteem.
Hoe los je dit op?
De oplossingen kunnen verschillen per systeem maar ik zal me hier focussen op het meest gebruikte CMS (Content Management System): WordPress.
- Als je WordPress gebruikt kun je zelf de maximale afmetingen (en verhoudingen) van alle afbeeldingen instellen (Instellingen -> Media). Deze zouden/moeten overeenkomen met de gebruikte ruimtes in de site (full-width, blog content en widget thumbnails). Vraag je webdeveloper om de juiste afmetingen in te stellen. WordPress gebruikt standaard 3 instelbare afbeeldingsformaten:
- Grote afmeting – afbeeldingen die gebruikt wordt over de volle breedte van de site – meestal 1024 pixels breed.
- Gemiddelde afmeting – afbeeldingen voor blog berichten – vaak 100% van de breedte waarin het bericht past: +/-600 pixels
- Thumbnails – afbeeldingen voor bijvoorbeeld widgets – +/- 150 pixels
- Kies bij het inzetten van afbeeldingen in je berichten/pagina’s het juiste afbeeldingsformaat, zie onderstaande afbeelding uit de WordPress block editor.
- Voor sommige doeleinden moet je toch zelf de afbeeldingen op de juiste formaat croppen en vergroten of verkleinen. Denk aan full-width sliders. WordPress gebruikt dan het oorspronkelijke afbeeldingsformaat voor sliders, zonder ze te schalen. Photoshop blijft hier nog altijd het beste gereedschap voor. Vraag naar de juiste afmetingen bij je webdeveloper.
- Uitgelichte afbeeldingen worden voor verschillende doeleinden gebruikt in WordPress; als afbeeldingen in een bloglijst, portfolio’s, galerijen, etc. De maker van je thema is verantwoordelijk voor het gebruiken van de juiste afmetingen. Een webdeveloper kan beter beoordelen of ze toch niet te groot zijn.
NB Ook als je de afmetingen verandert in de instellingen moet je alle afbeeldingen weer aanpassen aan de nieuwe waarden. Dit gaat jammer genoeg niet automatisch. Je kunt hiervoor de plugin Regenerate Thumbnails gebruiken.
Belangrijk voor mobiel
Een trage webpagina door te grote afbeeldingen is vooral een probleem op de mobiele versie van je site. Met beperkte bandbreedte zal je bezoeker nog langer moeten wachten voor die te grote afbeeldingen. Als het te lang duurt om een mobiele pagina te laden wegens te grote afbeeldingen haken bezoekers af. Dit voorkom je door de technische optimalisatie van je afbeeldingen.
Afbeeldingen comprimeren
Zelfs als je een afbeelding wegschrijft vanuit Photoshop via “Opslaan voor web” ben je er nog niet. Leuk en aardig, die afbeeldingen vanuit Photoshop die rond de 80kb zijn, maar als je 12 afbeeldingen op een pagina weergeeft is dat bijna 1MB. Kan het wat kleiner? Ja, dat kan.
Voor elk bestandsformaat (.jpg, .png en zelfs .gif) is er een andere oplossing. De meeste verwijderen onder andere de meta-informatie (EXIF) en overbodige kleurprofielen uit de afbeeldingen. Je 1 MB in afbeeldingsgrootte wordt gereduceerd tot wel 80%. Er zijn ook twee varianten van het comprimeren; “lossless” en “lossy”, oftewel het niet weggooien van kleurinformatie en dus behoud van kwaliteit, of wel informatie weggooien met kwaliteitsverlies. Het kenmerk van zware JPEG-compressie is zichtbare blokken van 8 x 8 pixels. Hieronder zie je een extreem voorbeeld van “lossy” compressie.
Hier zijn wat tools voor het comprimeren van je afbeeldingen die je kunt opnemen in je redactionele ‘workflow’, soms afhankelijk van het besturingssysteem dat je gebruikt:
- Shortpixel: online tool voor jpg en png, en als WordPress plugin beschikbaar*
- ImageOptim; offline tool voor Mac: PNG, JPG
- Smush.it; online tool; PNG en JPG afbeeldingen tot een bestandsgrootte van 1MB)
- SuperPNG; Photoshop plugin om PNG-bestanden nog kleiner te maken dan de standaard van Photoshop
- Tiny PNG; Online tool: voor PNG en JPG (was eerst alleen PNG)
- JPGmini Online tool: alleen voor JPG
- Compress PNG/JPG; Online tool voor zowel PNG als JPG
NB Zelfs bij de “lossy” methoden zie je vaak het verschil niet. Eerst even experimenteren dus. Vaak kun je wat agressievere “lossy” compressie loslaten op afbeeldingen voor Retina-schermen. Zie hieronder.
Afbeeldingen voor retina- en andere hoge-resolutieschermen
Stel dat je een afbeelding van 320 pixels breed gebruikt op je desktop site en dezelfde afbeelding op een retina-scherm of andere hoge-resolutie-apparaat bekijkt. Dat ziet er waarschijnlijk minder goed uit. Dit komt omdat de 72 PPI (pixels per inch) van je desktopscherm wordt ‘uitgesmeerd’ (technisch gezien ‘verdrievoudigd’ of meer) over de 220 t/m 326 PPI van een Retina-scherm. Minder informatie over een groter bereik dus. Dit levert een wazig beeld op:
Om dit te voorkomen maak je aparte afbeeldingen voor hogeresolutieschermen die 1.5 tot 2 keer groter zijn dan voor op de desktop:
- Gebruik de WP Retina 2X plugin. Hiermee hoef je er alleen maar voor te zorgen dat de originele afmeting van al je afbeeldingen voldoende zijn voor retina-schermen: 1,5 tot 2 keer groter. WordPress kiest dan de juiste afmeting voor het apparaat.
- Sinds de komst van Apple’s hogeresolutie-modifier “@2“ zal een iPhone of iPad afbeeldingen met deze extensie op een retina-scherm gebruiken. Samen met wat javascript (Retina.js bijvoorbeeld) kun je de normale afbeelding gebruiken, het script zorgt ervoor dat als er een hogeresolutie-apparaat gedetecteerd wordt, de lageesolutie-afbeelding wordt vervangen door de hogeresolutieversie. Dit werkt op alle apparaten, niet alleen op Apple producten.
- Voor afbeeldingen in de CSS (afbeeldingen geassocieerd met het thema) kun je CSS media queries gebruiken:
- @media
(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
/* Retina-specifieke regels hier */
}
- @media
NB Omdat het scherm van een mobiele telefoon wat kleiner is kun je afbeeldingen voor hoge-resolutieschermen wat agressiever comprimeren. Schrijf bijvoorbeeld in Photoshop de oorspronkelijke afbeelding weg met 80% JPG-compressie, en voor de hogeresolutie-afbeelding met 30% compressie. Het zal wel scherp blijven omdat de artefacten van de zware compressie meestal niet zullen opvallen.
CSS sprites
Stel dat je op je site 2 verschillende afbeeldingen van een pijltje (links- en rechtsaanduidingen) gebruikt voor verschillende doeleinden. En dat elk van deze pijltjes een apart mouse-overeffect heeft. Dit betekent dat de gebruiker 4 verschillende afbeeldingen moet laden. Voor elke afbeelding is er een extra HTTP-request. Waarom zou je deze dan niet in één enkele afbeelding verzamelen? In plaats van 4 HTTP-requests wordt alles in één request binnengehaald. Deze collectie van afbeeldingen wordt een “sprite” genoemd.
Met CSS kunnen we die ene afbeelding die nodig is in de sprite weergeven, de rest blijft verborgen. Voor het mouse-overeffect hoeven we dan de sprite alleen maar naar boven te schuiven (min Y-coördinaten). Het kost wel tijd om de afbeeldingen in een enkele sprite te verzamelen en de CSS aan te passen, maar het is zeker de moeite waard. Dit is wel iets wat je webdeveloper voor je moet doen.
Er was een webapp (bookmarklet) die het harde werk voor je overnam: SpriteMe. SpriteMe analyseerde alle losse afbeeldingen in je site en zorgde ervoor dat de afbeeldingen met dezelfde hoogte in dezelfde rij in de sprite kwamen te staan. Je kon de nieuwe sprite downloaden en SpriteMe schreef ook alvast de juiste CSS voor je weg.
Sinds 2019 werkt SpriteMe niet meer, alternatieven vind je hier.
Voor je bezoeker en voor SEO
De afbeeldingen zijn er vooral voor je bezoeker. Ze zorgen voor afwisseling van de tekst, ondersteunen je tekst en maken je webpagina’s duidelijk en overzichtelijk. Daarnaast helpen ze Google om je pagina’s beter te begrijpen. Zeker als je de eerder genoemde punten gebruikt voor de juiste omschrijvingen draagt het dus bij aan je SEO.
Optimaliseer je afbeeldingen en win van je concurrenten
Even alles op een rijtje. Optimaliseer je afbeeldingen en profiteer van SEO-voordeel, maar help ook je (visueel beperkte) bezoeker door:
- te beginnen met een goede bestandsnaam
- afbeeldingen in de juiste afmetingen te uploaden
- alt-tekst toe te voegen, behalve bij decoratieve afbeeldingen en afbeeldingen met onderschrift
Verwacht geen wonderen qua SEO, het zorgt er sowieso wel voor dat de bots je pagina nog beter begrijpen. En dat is sowieso positief voor je vindbaarheid.
Verder: in januari 2016 werd bekend dat Google afbeeldingen niet regelmatig indexeert. Wijzigingen hebben meestal dus niet snel impact. Deze indexering geldt wel met name voor Google Images. Ik verwacht wel betere resultaten voor jouw pagina’s als geheel wanneer je de afbeeldingen optimaliseert.
Paste jij de titels van je afbeeldingen al aan voordat je ze ging uploaden? Ik ben benieuwd of je dit belangrijke detail al kende.
* In dit artikel staan affiliate-links. Ik krijg een kleine vergoeding wanneer je iets via zo’n link aanschaft, terwijl dat jou niks extra kost. Zo krijg ik wat terug voor de uren die ik in mijn artikelen steek. En: ik gebruik alleen affiliate-links voor tools, producten en diensten die ik zelf gebruik of gebruikt heb en waar ik echt achter sta.
Ook interessant voor jou:
Of je SEO nu interessant vindt of er helemaal geen interesse in hebt, als je een website hebt, heb je er nu eenmaal mee te maken. Juist omdat ik het leuk vind, schijf ik er graag en vaak over en uit reacties blijkt dat het zelfs mensen met een aversie tegen zoekmachine-optimalisatie helpt.
Begonnen in 2012 met het idee webteksten te schrijven, ben ik me steeds verder gaan verdiepen in SEO en het daarmee verbonden CRO (conversie-optimalisatie). In al mijn artikelen help ik je jouw website te verbeteren om er zo meer omzet uit te halen. Wedden dat je het nog leuk gaat vinden ook?
Jason is WordPress webdeveloper bij ORDNUNG. Als webdeveloper richt hij zich op de technische kant van WordPress websites. Vanuit deze kennis deelt hij zijn kennis op het blog van Letterzaken.
Contact: info@ordnung.nl
Misschien kun je ook iets schrijven over de beste opmaak van hyperlinks?
Heb jij hier specifieke vragen over Carola? Ik kan er zo een blog over schrijven hoor. Het lijkt mijzelf alleen een heel logisch principe. Dus als jij er specifieke punten in behandeld wilt zien, laat dat zeker even weten!
Hoi Nathan,
Goed advies! Ik zou er ook nog aan willen toevoegen dat het voor lokale SEO (bijv. voor kleine ondernemers) nuttig kan zijn om de foto’s de geotaggen (indien van toepassing) en dus te koppelen aan de bedrijfslocatie. Ook opnemen van een citation in de afbeelding lijkt te kunnen bijdragen.
Tot zover mijn 2 cent ;-)
Dank voor je reactie en je input Eduard. Geotaggen lijkt me inderdaad een goede aanvulling voor lokale vindbaarheid. Maar als ik het goed heb, gebeurt dat alleen bij camera’s met GPS, en die zal niet iedereen hebben. Of heb ik het mis?
Iedere foto grnomen met een mobirle trlefoon?
Hoezo Edwin? :)
Jason zoals we hem kennen! Goed artikel.
Waar komt de constatering “maximale breedte van een webpagina is 1000 pixels” vandaan? Ik werk al jaren op een full HD scherm. Als ik kijk naar analytics van grote websites, dan is zeker 90% een groter scherm dan 1024 pixels.
Dank voor het aankaarten Jan-Willem. Waar Jason op doelde is ‘het contentgebied op een website”, dit is inmiddels aangepast in het artikel. Laten we het houden op een gevalletje lost in translation, Jason spreekt beter Nederlands dan dat hij het schrijft, als Nederlander van Amerikaanse oorsprong :-)
Heel erg duidelijk de informatie op je blog!
Ik lees het met plezier weer terug.
Mocht ik nog vragen hebben dan kom ik er snel op terug!
Groet Rick
Leuk Rick, dank je. Vragen zijn altijd welkom :-)
Knappe research en goed weergegeven (met een terechte opmerking van Jan-Willem).
Dank voor je reactie Peter. De kritische noot is altijd welkom, ik weet dat niemand perfect is, dus zo zorgen we ervoor dat de juiste informatie wordt gegeven. Op basis van Jan-Willem’s reactie was er al een aanpassing gemaakt :-)
Hi, je schrijft over WP Mobile Detector Mobile Plugin. Die heeft zoals te lezen is geen ondersteuning voor WP 4.1
Welk alternatief is er als je wel op WP 4.1.1 zit?
WP Mobile Detector is, zoals Jason aangeeft, een plugin om een aparte mobiele weergave te creëren voor je WordPress website. Met een goed responsive of adaptive theme heb je deze plugin niet nodig.
Hoi Nathan, bedankt voor je tip, ik was al een tijdje begonnen afbeeldingen op te slaan met goede namen. Maar ik kan in WordPress het volgende nog aanpassen: Titel-Onderschrift-Alttekst-Beschrijving. Zijn al deze items van belang om in te vullen en kun je dan dezelfde tekst herhalen voor extra consistentie? Maw welke tekst heft welk doel en moet dus hoe ingevuld worden. Alvast bedankt voor je antwoord en succes met je website. Groeten, Dominique
Dank voor je reactie, je bent goed op weg Dominique. De belangrijkste onderdelen om te gebruiken zijn bestandsnaam en alt-tekst. De Titel wordt veelal direct overgenomen vanuit de bestandsnaam van de afbeelding wanneer je deze uploadt. Die kun je gerust laten staan. De alt-tekst (of Alt Tag) biedt je de mogelijkheid nog wat toe te voegen aan de titel, of de afbeelding iets meer te omschrijven. Dit is de tekst die verschijnt wanneer je met de muis over de afbeelding hovert. Deze tekst wordt onder andere ook door blinden en slechtzienden gebruikt, dit is de tekst die hen wordt voorgelezen.
Je kunt de alt-tekst een kopie laten zijn van de titel, mooier is het als je er wat extra aandacht aan besteedt om deze iets omschrijvender te laten zijn.
Hoi Nathan,
Even inhaken op deze vraag van Dominique. Tegenwoordig kun je in WP de titel niet meer invoeren/veranderen? De beschrijving is dit nu wel of geen must om in te vullen?
Bedankt, gr Jeroen
De laatste keer dat ik een artikel schreef, kon ik gewoon nog een titel plaatsen. Net ook nog getest, dus check dit even met jullie webbouwer.
De beschrijving is beslist geen must, dus daar zou ik geen tijd aan besteden. SEO-technisch levert het je in ieder geval niks op.
Beste, kennen jullie een WordPress plugin waarbij je kan aanklikken of je afbeeldingen mobiel niet zichtbaar wil maken? Vriendelijke groeten
Hallo Elke, wanneer afbeeldingen voldoende verkleind zijn, zou dat mijns inziens niet nodig moeten zijn. Afbeeldingen ondersteunen de tekst en maken tekst leesbaarder. Qua plugins hiervoor kan ik je helaas geen advies geven, aangezien ik me niet -of in ieder geval heel weinig- met de technische zaken rondom WordPress bezighoud, verwijs ik je voor je vraag graag naar de WordPress support groep op Facebook: https://www.facebook.com/groups/wordpresssupportnl/
Hallo Nathan,
Ik werk op een pc met Linux OS. Om plaatjes te comprimeren voor de website maak ik gebruik van Libre Office Writer. In een file plaats ik alle originele plaatjes, die ik daarna met een tool binnen LO Writer comprimeer.
Vervolgens bewaar ik deze plaatje onder een nieuwe naam en daarna upload ik deze naar mijn media bibliotheek. Werkt prima
Hallo Wim,
Mooie aanvulling. Daar kunnen mensen nog wat aan hebben. top!
Beste Nathan,
Dank voor je heldere uiteenzetting. Even ter aanvulling op je artikel.
TinyPNG, met die vriendelijke Panda, kan tegenwoordig zowel PNG, als JPG gaan. Je kunt het in bulk gebruiken en daarnaast biedt TinyPNG plugins voor Photoshop, WordPress en Magento.
Je hebt helemaal gelijk Gerben. Overigens heb ik dit artikel niet zelf geschreven. Ik zal het wel even aanpassen nu :-)
Allereerst wil ik zeggen dat je blogs veel info geven en leerzaam zijn! :)
Op dit puntje loop ik echter even klem. Is het gezien je SEO beter om een foto te uploaden met direct de juiste titel of maakt het niet uit als ik die titel na het uploaden aanpas?
Dank je wel voor de complimenten Denise. Dat is ook wat ik wil bereiken, mooi om te lezen dat dat dus ook lukt :-)
In principe is het beter om het vanaf het begin goed te doen. Dat betekent namelijk dat Google direct die woorden uit je bestandsnamen (en alt-tekst) oppakt en meeneemt voor de indexering. Achteraf is geen ramp, dat kan je uiteindelijk alsnog betere posities opleveren. AL is dat wel afhankelijk van de concurrentie. Garanties zijn wat betreft SEO niet zomaar te geven. Uiteindelijk is het Google die bepaalt. Jij kunt alleen maar zo goed mogelijk je best doen om Google te helpen jouw webpagina’s te begrijpen :-)
Bedankt Nathan voor je reactie!
Mijn site draait nu sinds maart dus wat is voor mij verstandiger om te doen? Alle foto’s opnieuw titels geven en opnieuw uploaden en op me site zetten en de huidige erna verwijderen. Of kan ik beter van de huidige foto’s de titels veranderen?
Groetjes Denise
Zeker als je website nog niet zo lang online is, is het verstandig nu je foto’s de juiste bestandsnamen te geven en te uploaden. Voeg dan ook gelijk goede alt-teksten/alt-tags toe. Als je dat nu doet, is het nog te overzien. Als je serieus met je website bezig bent, breidt deze zich uit en dat betekent ook meer afbeeldingen. Als je dan overal weer onderzoek naar moet doen en het moet aanpassen…
De bestandsnamen zorgen voor de (interne) link naar de afbeelding. Als daar relevante woorden voor die pagina in staan, dragen die bij aan je vindbaarheid. En nu ik het zo schrijf, bedenk ik: tijd om dit artikel te updaten en nog duidelijker te maken. :-)
Hoe kan ik eigenlijk vooraf zien wat de breedte van mijn content-gebied is? Jullie zeggen gemiddeld 1000px, maar op mijn blog (www.blogkracht.nl) plaats ik plaatjes van 650 px en die beslaan de hele breedte. Als ik voor 1000px was gegaan, had ik onnodig zware plaatjes geplaatst.
Het is dus afhankelijk van je template hoe breed je ideale afbeelding moet zijn. Maar weet iemand hoe je dat kunt zien aan een template? Ik heb het nu gewoon door trail-error achterhaald. Ik weet dat er tools voor zijn, maar weet alleen de namen niet.
Thanks,
Bastiaan
Ik vind dit ook altijd lastig Bastiaan. Daarom schakel ik hiervoor even mijn secondanten in, kijken wie er het eerste reageert, dan wel het beste antwoord heeft.
Het beste kun je met de de inspector uit de Dev tools van Google Chrome kijken wat de breedte van het vak is. Dan zit je altijd goed. Mocht je niet weten hoe die werkt kijk dan even hier: https://lamper-design.nl/pas-zelf-je-wordpress-website-aan-met-css/
Hi Kees,
Dat was ook de optie die ik uiteindelijk had gevonden. Dat werkte prima op mijn iMac. Dan moet je wel eerst het plaatjes iets ruimer op je site plaatsen en dan via de inspector kijken wat de ideale afmeting is. Zo kwam ik bij mij op 660px uit. Dat getal klopt inderdaad.
Echter… toen ik dit testte op mijn MacBook (kleiner scherm) kreeg ik een andere waarde: 498px of zo. Dat is toch gek? Enig idee waar dat aan kan liggen en hoe op te lossen. Ik zoek naar een optie die voor iedereen kan werken.
Thanks,
Bastiaan
Hi Bastiaan,
Dat zal liggen aan de thumbnails die gegeneerd worden vanuit je thema. Maar is hij op 498px dan niet volledig?
Groet,
Kees
Bij de voorbeelden van de afbeeldingen Retina – en non retinascherm zijn als ik het goed heb begrepen de afbeeldingen verwisseld.
MVG Ton Bruin
Ben even benieuwd waarop je dit baseert Ton. Bedoel je de afbeelding van ‘retina vs. non-retina’? Ik denk dat het juist ter illustratie is wat er gebeurt als je wél retina-ready afbeeldingen gebruikt (links, ‘retina’ dus) en wanneer je gewoon afbeeldingen uploadt en hoe die dan op een retinascherm worden weergegeven ( ‘non-retina’).
Hoi Nathan, ik maak op dit moment productfoto’s voor een webshop. Nu vraagt mijn opdrachtgever hoe het zit met het plaatsen van dezelfde productfoto op verschillende pagina’s of andere sites waar opdrachtgever de productfoto’s gaat plaatsen. Stel dat dit op 4 verschillende “plekken” gebeurd moet ik dan 4 c dezelfde foto maken van hetzelfde product? Omdat volgens opdrachtgever de unieke metadata van iedere afbeelding ook meetelt met hoger in de ranking komen bij Google. Ik heb deze vraag nog nooit eerder gehoord van een opdrachtgever en ben zelf ook heel benieuwd of dit meespeelt.
Dit is een interessante en (vrij) complexe vraag. Er komt meer bij kijken dan wat je nu aangeeft. Want: het product is waarschijnlijk wel hetzelfde, dan is de bestandsnaam in ieder geval gewoon de basis en mag/kan die gelijk blijven. In principe kan de opdrachtgever ook kiezen voor een andere bestandsnaam, zeker wanneer de foto op een andere website geplaatst wordt.
Voor SEO is de bestandsnaam echt de basis voor met name Google Images. Voor vindbaarheid draagt de alt tekst (of het alt-attribuut) het nodige gewicht. En dan is de vraag wat jouw opdrachtgever bedoelt met metadata. Niet alle metadata die een digitale camera meegeeft wegen echt mee. Sterker nog: Google zegt bijvoorbeeld geo-tags niet (meer) mee te nemen, omdat die niet echt altijd even relevant of nuttig bleken. Dus de metadata van de foto zou ik niet overschatten.
Kun je hiermee verder zo?
Zekers, heel erg bedankt!
HI Nathan, dankjewel voor je duidelijke blog! Ik ga zeker mijn bestandsnamen even nalopen. Maar voordat ik dat doe zou ik je graag nog iets vragen. Ik gebruik momenteel spaties in bestandsnamen, kan ik die beter vervangen door dashes? En is het goed om je bedrijfsnaam te verwerken in de bestandsnaam? Bijvoorbeeld: bedrijfsnaam-zon-mercurius.JPEG?
Goede vraag Joke. En zelfs nog dubbel ook qua antwoord. Bij mij werkt het prima om bestandsnamen met spaties te gebruiken. In mijn WordPress theme worden de spaties automatisch omgezet naar koppeltekens (dashes). Dat gebeurt niet altijd, dus daarom is het eigenlijk wel het verstandigst om de spaties te vervangen door koppeltekens.
Tenzij je weet dat het in jouw CMS ook gewoon goed wordt omgezet. Dat zou je natuurlijk met een afbeelding kunnen testen.
Ik pas altijd de bestandsnamen van de foto’s aan, zodat ik ze makkelijker kan terugvinden. Vlinder onthou je makkelijker en vind je makkelijker dan PT830
En terecht. Dus ze hebben al een duidelijke naam op jouw eigen harde schijf dan. Dat is de basis, al is het maar voor jezelf.
Vraag. Ik heb een Nederlandse site met een .nl domein, deze wil ik kopiëren naar een Engelse versie op een .com domein en deze helemaal vertalen en SEO optimaliseren voor de Engelse taal. Echter de afbeeldingen hebben Nederlandse namen, dus de url van de afbeelding is Nederlands… bijvoorbeeld ‘boot.jpg’… de alt tekst, titel en omschrijvingen worden allemaal netjes vertaald in het Engels, maar moet er nu een nieuwe foto geupload worden met de naam ‘boat.jpg’? want ik kan de url van de afbeelding niet bewerken toch?
Of is deze url van de afbeelding niet belangrijk voor Google?
Op zich is het niet heel ernstig als de bestandsnamen in het Nederlands zijn. Google zegt zelf niet te kijken naar de bestandsnamen en hoewel ik vermoed dat het wel enige invloed kan hebben is het niet ernstig als de bestandsnamen niet “kloppen” of vertaald zijn. Daar heb ik ook ooit eens over gelezen of gehoord dat het geen probleem moet zijn. Kijk wel uit dat het niet misgaat bij (losse) woorden die in de ene taal iets anders betekenen dan in de andere taal. Je ‘boot’ is wel een mooi voorbeeld, omdat een boot in het Engels een laars is ;-)
Wat waarschijnlijk ook gunstig zal zijn is Google MUM, wat Google meertalig gaat maken.
Bedankt voor je snelle antwoord. Heel fijn, maar ik heb dan nog een aanvullende vraag. Was het wel de juiste manier om een kopie te maken van de .nl site op de .com site en dan alles SEO proof te maken voor de Engelstalige versie? Of had ik beter een vertaal plugin kunnen gebruiken, Ik heb me nl laten vertellen dat een kopie maken en een geheel nieuwe (kopie) site maken beter is voor de vindbaarheid.
Het maakt niets uit of je een vertaalplugin gebruikt of een kopie maakt en die zelf helemaal aanpast. De vertaalplugin maakt het waarschijnlijk vooral makkelijker om te zien welke pagina’s je allemaal nog moet vertalen. Let wel: die plugin doet het vertaalwerk niet voor je, dat moet je alsnog zelf doen. Het is vooral een handigheidje om te kunnen switchen tussen de verschillende taalversies.
Het is echt iets dat nog vaak misgaat Carola. En ik zie zelfs in blogs over het optimaliseren van afbeeldingen dat juist dit wordt vergeten. Of zouden ze het bewust voor je achterhouden? Ik hoop het niet, maar ik bied graag 100% transparantie in dit soort zaken.