Afbeeldingen optimaliseren voor je website

Iets dat bij het onderhouden van websites makkelijk over het hoofd wordt gezien: afbeeldingen optimaliseren. Misschien kom je het wel eens tegen, dat je met je muis over een plaatje gaat en zoiets ziet als ‘img_532.jpg’. Dat laat zien dat hiervoor geen aandacht is geweest. Toch is het van belang met oog op de snelheid van de website en voor zoekmachines.

Het leven van een website speelt zich af op het beeldscherm en daardoor is het ook een visueel medium. Een snelle website wordt bovendien door gebruikers hoger gewaardeerd. En door zoekmachines, die kunnen niets met die term ‘img_532.jpg’. Daar kan je wat aan doen door het bestand van de afbeelding dat je wil plaatsen te bewerken.

Het gaat er dus om twee zaken te verbeteren:

• Het digitale bestand zelf mag niet te groot zijn – laadsnelheid website
• De manier waarop de afbeelding wordt geplaatst – voor zoekmachines

Optimalisatie: het formaat & de bestanden

De kwaliteit van de foto’s van digitale camera’s is over het algemeen bijzonder goed. Een megapixeltje min of meer, geen probleem. Maar dat betekent wel dat je zomaar bestanden hebt van >5 MB en dat is toch echt te fors voor je website.

Het gaat er dus om de kwaliteit zo goed mogelijk te houden en het bestand behapbaar te maken, zodat je pagina binnen twee seconden of sneller verschijnt. Snelle websites worden beter gevonden en hoger gewaardeerd door zoekmachines. Daarbij komt dat sommige bestanden (de meestgebruikte zijn .jpg, .png en .gif) beter te schalen zijn dan andere.

• GIF-bestanden (vaak echt grafische bestanden, zoals knoppen en logo’s) zijn heel goed terug te brengen tot waarden als 2 kB, maar wanneer je die compressie loslaat op een digitale foto kan dat een enorm verlies aan detail tot gevolgen hebben.
• PNG-afbeeldingen, die vaak transparantie hebben, kunnen handig zijn, omdat ze de achtergrond van de website overnemen. Nadeel is dat ze – door hogere grafische kwaliteit – vaak weer wat zwaarder zijn dan jpeg-bestanden.
• JPG (of JPEG) is eigenlijk de beste standaard om een afbeelding geschikt te maken voor het web, zowel voor de grootte als de kwaliteit.

• JPG/JPEG – Joint Photographic Experts Group
• PNG – Portable Network Graphics
• GIF – Graphics Interchange Format

In de meeste software krijg je keuzes te zien als opslaan voor web (‘ready for web’) en kwaliteit (hoog-laag). Bewaar de afbeeldingen zodat ze minder dan 100 kB zijn. Check in de browser of de kwaliteit en scherpte goed zijn gebleven.

Sommige website systemen werken met die vast ingestelde formaten, neem dat voor een goede plaatsing over. Het is vaak een beetje experimenteren wat het beste werkt op jouw website.

Optimalisatie: tekst en code

Om te voorkomen dat je de ‘img_532.jpg’ plaatst, de opslagnaam dus van je camera, moet je de titel bewerken. Dat kan vaak op het moment dat je de grootte hebt bewerkt en je het bestand wil gaan opslaan.

Waar moet je dan op letten? Je zou rekening moeten houden met de volgende elementen:

1. Naam van het afbeeldingsbestand
2. De alt tag van een afbeelding (voor trefwoorden)
3. De title tag van de afbeelding (= mouse-over tekst)

Leesbare naam

Zorg dat je het bestand een ook voor zoekmachines herkenbare en leesbare naam geeft. Schrijf dus niet alles aan elkaar, maar gebruik het koppelteken (-) of de underscore (_) als spatie.

foto-zwarte-bmw-m3.jpg

Als er nu op BMW en type M3 gezocht wordt, houden zoekmachines ook rekening met de trefwoorden van de afbeelding.

Alt tag en title tag

In de alt tag tekst die in de code (HTML) van je website staat, kun je de titel van de afbeelding en keywords laten terugkomen. Gebruik maximaal 20 woorden en niet alleen keywords (sex, gratis, poesjes), want dat herkent een zoekmachine ook als een vorm van spam.

Voor de title tag geldt eigenlijk hetzelfde, maar die is ook zichtbaar als je met de muis over de afbeelding gaat. Maak daar dus een gewone mededeling van, met een aantal relevante keywords.

Maar zo staat het technisch gezien op de website:

< img title="Foto van een zwarte BMW M3" src="[URL in HTML] " alt="Foto van een zwarte BMW M3" width="400" height="250" />

Als dan van het plaatje ook nog een link maakt (in dit geval naar het artikel over Daniel Craig op Wikipedia), ziet het er bijvoorbeeld zo uit:

< a href="http://http://www.website.com/daniel-craig/"  alt="Daniel Craig in de rol van secret agent James Bond" id="007, gezicht, foto" title="Link naar Daniel Craig Wiki pagina" longdesc="Daniel Wroughton Craig - born 2 March 1968 - is an English actor and film producer"></a><img src="https://www.website.com"/plaatje" />

In dit voorbeeld zijn id=”trefwoord, trefwoord” en longdesc=”..” nog toegevoegd als extra informatie.

Betaalde en gratis software

Designers hebben vrijwel allemaal Photoshop tot hun beschikking, maar er zijn ook gratis en minder dure oplossingen. Hieronder staat een selectie van desktop en online programma’s (via je browser) die je, afhankelijk van wat je nodig hebt en wat je prettig vindt werken, verder kunnen helpen.

Desktop software

GraphicConverter – http://www.lemkesoft.com (€34,95) Overzichtelijk, makkelijk programma voor Mac en Windows. Ik gebruik het zelf met plezier. Je kan bijvoorbeeld ook tekst of een watermerk aan de afbeelding toevoegen.

Gimp – http://www.gimp.org (open source software) Dit is de open source en gratis variant van Photoshop, waar je dus erg veel mee kan doen. Nadeel is dat je je wel flink in de  installatie en gebruik moet verdiepen. Voor Mac en Windows.

ImageOptim – http://imageoptim.com/ Een gratis programma voor Mac computers, geschikt voor .jpg en .png.

RIOT – https://riot-optimizer.com/ Een gratis programma voor Windows en eveneens geschikt voor .jpg en .png.

Online software

Canva – https://www.canva.com/ Dit is een van mijn favoriete services, want met Canva kun je in foto’s en afbeeldingen bewerken in formaten – via sjablonen – die geschikt zijn voor verschillende sociale media netwerken. Ook kun je tekst in verschillende typografie en fonts toevoegen. Je ziet dan gelijk hoe je Facebook cover eruit ziet met profielfoto. Toch is eerst schalen soms aan te raden.

Google Photos – https://photos.google.com/, dat was Picasa (waarvoor een Google account is vereist).  Update 14 april 2016: Google Photos krijgt dit jaar een upgrade, zodat het een soort van online Photoshop wordt.

Pixlr – http://pixlr.com/ Online bewerken/schalen en ook voor mobiel beschikbaar. Mooie tool, ook om fotocollages te maken. Voor alle gebruikelijke soorten bestanden.

PicMonkey – http://www.picmonkey.com/ Online bewerken/schalen en ook voor mobiel beschikbaar. Heeft ook de mogelijkheid om fotocollages te maken.

TinyPNG – http://tinypng.org/ Deze tool is speciaal om .png-bestanden, van grafisch betere kwaliteit dan .jpg (en mogelijk met transparante afbeelding) te schalen.

Smush.it – http://www.smushit.com/ysmush.it (online bewerken/schalen) In samenwerking met Yahoo gemaakte bewerkingssoftware. Uploaden, bewerken, downloaden. Ook beschikbaar als WordPress plugin.

Dit artikel is gebaseerd op een workshop die ik heb gegeven tijdens de Docentendag van MK24. Bij MK24 – voorheen Kunstweb – kun je cursussen en workshops volgen in ‘vrijwel alle vormen van beeldende kunst, fotografie, video en multimedia’.