Afbeeldingen optimaliseren 2 – Technische SEO

Afbeeldingen optimaliseren deel 2: technische optimalisatie

Er is veel gezegd en geschreven over SEO voor content (relevante tekst, juiste titels, sleutelwoorden en omschrijvingen, etc.) maar niet al te veel over een andere soort content, namelijk afbeeldingen. Als redacteur heb je de controle over de titel en alttekst-attributen maar niet altijd over de technische aspecten van afbeeldingen in je site. Hier heb je een goede samenwerking met je webdeveloper nodig.

Als vervolg op het vorige artikel over het optimaliseren van afbeeldingen, gaat dit blogartikel over 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.

Afbeeldingen optimaliseren WordPress websites - technische SEO

 

“Size matters”, ook bij afbeeldingen

Desktop site

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 1000 pixels (met uitzondering van full-width sliders, die kunnen 1600 pixels breed zijn). De extra 2000 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 OS.

De oplossingen kunnen verschillen per systeem maar ik zal me hier focussen op het meest gebruikte CMS (Content Management System): WordPress.

De oplossing(en):

  1. 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:
    1. Grote afmeting – afbeeldingen die gebruikt wordt over de volle breedte van de site – meestal tussen de 960 en 1000 pixels breed.
    2. Gemiddelde afmeting – afbeeldingen voor blog berichten – vaak 100% van de breedte waarin het bericht past +/-600 pixels
    3. Thumbnails – afbeeldingen voor bijvoorbeeld widgets – +/- 150 pixels
  2. Kies bij het inzetten van de afbeeldingen in je berichten/pagina’s het juiste afbeeldingsformaat. Zie afbeelding hieronder.
  3. Voor sommige doeleinden (bijvoorbeeld full-width sliders) moet je toch zelf de afbeeldingen op de juiste formaat croppen en vergroten of verkleinen. WordPress gebruikt dan de 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.
  4. 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.
Afbeeldingen website optimaliseren weergave instellingen

Weergave-instellingen in pagina’s/berichten

N.B. 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 een plugin gebruiken: Regenerate Thumbnails.

Mobiele site

Bovengenoemde probleem wordt nog duidelijker 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 zullen Google en de bezoeker je hiervoor bestraffen; mobiel page-ranking naar beneden stellen en je zal waarschijnlijk bezoekers verliezen. Er zijn wat trucjes voor om andere content en ook verkleinde versies van je afbeeldingen te vertonen op mobiel.

De oplossing(en):

  1. Een apart mobiel thema gebruiken – (bijvoorbeeld met WPTouch Themes). De content wordt automatisch geformatteerd en afbeeldingen worden verkleind.
  2. Met wat javascript en PHP kan je webdeveloper de site laten reageren op verschillende apparaten en/of beeldschermresoluties. Voor mobiele apparaten zal WordPress dan verkleinde versies van je afbeeldingen gebruiken. In het het geval van Retina-schermen zal die ook grotere resoluties gebruiken. Het meest gebruikte javascript hiervoor op dit moment is Retina.js (zie “Afbeeldingen voor Retina en andere hoge resolutie schermen” hieronder).
  3. Steeds meer thema’s ondersteunen Retina afbeeldingen.

Het Retina.js-script maak je ook mogelijk met deze handige plugin (aanvulling mei 2017).

Compressie

Zelfs als je een afbeelding wegschrijft vanuit Photoshop via “Opslaan voor web” is dat niet het einde van het verhaal. Leuk en aardig, die afbeeldingen vanuit Photoshop die rond de 80kb zijn, maar als je toch 12 afbeeldingen op een pagina weergeeft dan 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 van deze verwijderen onder andere de meta-informatie (EXIF) en overbodige kleurprofielen uit de afbeeldingen. Je 1MB in afbeeldingsgrootte wordt gereduceerd tot wel 80%! Er zijn ook twee varianten van het comprimeren; “lossless” en “lossy” oftwel het niet weggooien van kleurinformatie en dus behoud van kwaliteit of wel informatie weggooien en kwaliteitsverlies. Het kenmerk van zware JPEG compressie is zichtbare blokken van 8 x 8 pixels. Hieronder zie je een extreem voorbeeld van “lossy” compressie.

Afbeeldingen website optimaliseren lossy compressie

Lossless vs. lossy compressie

Hier zijn wat tools voor het comprimeren van je afbeeldingen die kun je kunt opnemen in je redactionele ‘workflow’.

De oplossing(en) afhankelijk van OS:

  • ImageOptim; Offline tool, voor Mac computers: PNG, JPG
  • RIOT; Offline tool, voor Windows computers: 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

N.B. Zelfs bij de “lossy” methoden zul je vaak het verschil niet zien. Eerst experimenteren dus. Vaak kun je wat agressievere “lossy” compressie loslaten op afbeeldingen voor Retina-schermen. Zie volgende sectie.

Afbeeldingen voor Retina en andere hogeresolutieschermen

Stel dat je een afbeelding van 320 pixels breed gebruikt op je desktop site en dezelfde afbeelding op een Retina-scherm of andere hogeresolutie-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 zie je als een wazig beeld:

Afbeeldingen website optimaliseren retina hoge resolutie

Retina vs. non-retina

Om dit te voorkomen maak je aparte afbeeldingen voor hogeresolutieschermen die 1.5 tot 2 keer groter zijn dan voor op de desktop.

De oplossing(en):

  1. 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.
  2. Sinds de komst van Apple’s hogeresolutie-modifier @2 zal een iPhone/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.
  3. 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 */
      }

N.B. Omdat het scherm van een mobiele telefoon wat kleiner is kun je afbeeldingen voor hogeresolutieschermen wat agressiever comprimeren. Bijvoorbeeld in Photoshop schrijf je de oorspronkelijke afbeelding weg met 80% JPG compressie, maar voor de hogeresolutie-afbeelding kun je 30% compressie gebruiken. Het zal wel scherp blijven want de artefacten van de zware compressie zal meestal niet opvallen.

CSS sprites

Stel dat op je site 2 verschillende afbeeldingen van een pijltje (links- en rechtsaanduidingen) worden gebruikt voor verschillende doeleinden. En elke 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 een enkele afbeelding verzamelen? In plaats van 4 HTTP-requests wordt alles in één request binnengehaald. Deze collectie van afbeeldingen wordt een “sprite” genoemd.

Afbeeldingen website optimaliseren CSS Sprites

Losse afbeeldingen versus één CSS sprite

 

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 mooite waard. Dit is wel iets wat je webdeveloper voor je moet doen.

De oplossing: Eigenlijk is er alleen maar één oplossing;

Gelukkig is er een webapp (bookmarklet) die het harde werk voor je overneemt – SpriteMe.

Afbeeldingen website optimaliseren spriteme

SpriteMe analyseert je pagina op mogelijke sprites

SpriteMe analyseert alle losse afbeeldingen in je site en zorgt ervoor dat de afbeeldingen met dezelfde hoogte in dezelfde rij in de sprite komen te staan. Je kunt de nieuwe sprite downloaden en SpriteMe schrijft ook alvast de juiste CSS voor je weg.

Sitemaps voor afbeeldingen

Sitemaps worden meestal gebruikt om je content (pagina’s en berichten) te laten indexeren bij verschillende zoekmachines. Wat veel mensen niet weten is dat vooral Google je afbeeldingen en video’s ook apart indexeert. Hiervoor moet je deze media in je sitemap.xml apart opnemen.

Een voorbeeld van een XML sitemap voor afbeeldingen:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.example.com/sitemap.xml">
  <url> 
    <loc>http://www.example.com/foo.html</loc> 
    <image:image>
       <image:loc>http://example.com/image.jpg</image:loc> 
    </image:image>
  </url>
</urlset>

De oplossing:

Via de plugin Google XML Sitemap for Images wordt dit makkelijker gemaakt in WordPress. Installeer de plugin en maak maar een sitemap voor je media aan. De plugin zorgt ervoor dat al je media samen met je content worden opgenomen in de sitemap.XML. Google en andere zoekmachines zullen de sitemap op ten duur indexeren maar het gaat veel sneller als je deze zelf in Google Webmaster Tools opneemt.

Conclusie

Het lijkt veel werk om rekening mee te houden met al deze technieken. En dat is eenmaal zo. Maar het loont wel. Je zult zeker een paar punten hoger scoren bij Google’s Page Speed en bij Yahoo’s Y-slow scores.

Voor meer informatie of het inzetten van deze technieken kun je best bij je eigen webdeveloper aankloppen. Samen kun je een workflow opzetten waarin alles geregeld wordt qua afbeeldingsoptimalisatie.

Google Carrousel nu ook in Nederland

Google Carrousel in Nederland

In de wereld van SEO en Google wordt al lange tijd gesproken over de ‘Google Carousel‘ (Engelse spelling, de Nederlandse spelling is ‘carrousel’) en de mogelijke uitrol buiten de Verenigde Staten. Nadat ‘Google Carousel’ in de eerste helft van 2013 werd uitgerold in de Verenigde Staten, was het een kwestie van tijd voor dit wereldwijd zou worden uitgerold. Wat is de Google Carrousel (ik houd vanaf nu de Nederlandse spelling aan) en wat betekent dit voor jouw website?

 

Wat is de Google Carrousel?

De Google Carrousel is een visuele toevoeging aan de zoekresultaten in een balk bovenin de SERPs (zoekresultatenpagina). Deze afbeeldingen hebben te maken met de zogenaamde Knowledge Graph (in het Nederlands: Kenniskaart) die er ook al voor zorgde dat je content uit Wikipedia te zien kreeg over bepaalde onderwerpen. De Knowledge Graph is ook verantwoordelijk voor de weergave van diverse lokale ondernemingen met afbeeldingen. In mijn artikel over de uitrol van Google Pigeon werd de carrousel al even aangestipt. Wat je te zien krijgt is een overzicht van diverse bedrijven uit dezelfde categorie, met bijbehorende foto’s. Deze foto’s worden uit de Google Mijn Bedrijf vermelding van desbetreffende bedrijven gehaald. Als bedrijf heb je dus zelf  een zekere invloed op jouw vertoning in de Carrousel door de foto’s op Google Mijn Bedrijf te beheren.  Zo zie je in onderstaande voorbeeld dat veel rijscholen nog geen afbeeldingen hebben toegevoegd aan hun Google Mijn Bedrijf en daarom vertoond worden met hun Maps vermelding.

 

Google Carousel -of Carrousel- voor verkeersscholen in Apeldoorn 6 november 2014

De uitrol in Nederland

Zonder enige aankondiging was hij er dan: de Google Carrousel in de Nederlandse zoekresultaten. Nog wel enigszins verstopt, want je moet er wat moeite voor doen om ‘m tevoorschijn te toveren, maar hij ís er wel nu. Eduard de Boer van Reputatiecoaching ontdekte bij toeval op 5 november de Google Carrousel in Nederland. In de video dat bij zijn artikel staat, wordt al uitgelegd hoe je de Carrousel tevoorschijn tovert:

  • Zoek op een onderwerp in Google, bijvoorbeeld een bekende persoon of een (lokaal) bedrijf. Gebruik een naam, bijvoorbeeld “Martin Luther King” of “Verkeersschool Frank Schuurman”.
  • In de rechterkolom op Google verschijnt de ‘One Box’ van het onderwerp, met daaronder de vermelding ‘Gerelateerd’ (bij onderwerpen) of ‘Andere mensen zochten ook naar’ (bij bedrijven).
  • Klik op een van de vermeldingen daaronder en zie de Google Carrousel verschijnen:

Google Knowledge Graph Carousel of Carrousel bij Martin Luther King

 

Wat betekent dit voor jouw website?

Wanneer je met jouw bedrijf in de Google Carrousel wilt verschijnen, zul je allereerst de koppeling tussen je Google Mijn Bedrijf en je website in orde moeten hebben:

  • Heb je een Google Mijn Bedrijf pagina voor je bedrijf?
  • Is je website vermeld op je Google Mijn Bedrijf pagina?
  • Is er een koppeling op je website met je Google Mijn Bedrijf middels rel=”publisher”?

Wanneer dit allemaal geregeld is, ben je overgeleverd aan Google om deze al dan niet mee te nemen in de zoekresultaten. Dit is onder andere afhankelijk van de bedrijfscategorieën, omdat niet alle categorieën een SERP (pagina met zoekresultaten) tonen met Knowledge Base informatie.

Zorg er in ieder geval voor dat je afbeeldingen hebt toegevoegd aan je Google Mijn Bedrijf, zodat je geen vertoning van je vermelding op Google Maps in de Carrousel krijgt. Onderzoek zelf regelmatig of de afbeelding in de Carrousel komt en of die afbeelding representatief is. Is dat laatste niet het geval, schuif dan met je afbeeldingen en test of er dan een betere foto vertoond wordt.

 

Moet je nu alles in het werk zetten om in de Carrousel te komen?

De belangrijkste vraag is of je nu je pijlen moet richten op de Google Carrousel. Vooralsnog is er op het moment van schrijven weinig reden toe. Als je alles uit bovenstaande alinea hebt toegepast, heb je in ieder geval zelf de belangrijkste stappen voor jouw bedrijf gezet. Er zijn twee redenen waarom je er vooralsnog verder weinig meer aan zou moeten doen:

  1. De Google Carrousel verschijnt niet automatisch bij de zoekresultaten. Men moet er moeite voor doen om deze te laten verschijnen en weinig mensen zullen dat gaan doen. Ze zijn op zoek naar een bepaald onderwerp of bedrijf en klikken daarom niet zo gauw op de andere resultaten.
  2. We weten niet of Google Carrousel een blijvertje is. De geschiedenis leert ons dat Google veel experimenteert en dus ook regelmatig weer elementen verwijdert uit de SERPs. Zo verdween eerder in 2014 de auteursfoto en uiteindelijk verdween Google Authorship volledig.

Zorg er eerst in ieder geval wel voor dat je de basis hebt liggen door de koppelingen tussen je website en Google+ te maken en goede foto’s op Google Mijn Bedrijf te zetten.

 

Zie jij het nut in van Google Carrousel?

Nu je dit alles zo gelezen hebt, zie jij dan het nut in van Google Carrousel? Voegt het volgens jou iets toe aan de zoekresultaten? Ik ben benieuwd, dus laat je reactie hieronder achter!