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.

Foto's bewerken met Graphic ConverterHet 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 20 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 beoordeeld 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 – bij behoud van kwaliteit – vaak weer groter zijn dan jpeg-bestanden.
  • Jpg (jpeg) is eigenlijk de beste standaard om een afbeelding geschikt te maken voor het web, zowel voor de grootte als de kwaliteit.

Afkortingen beeldformaten

  • 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 src="foto-zwarte-bmw-m3.jpg" width="400" height="250" alt="Foto van een zwarte BMW M3" title="Foto van een zwarte BMW M3" />

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://en.wikipedia.org/wiki/Daniel_Craig" target="_blank"><img width="250" height="183" border="0" src="/images/Daniel-Craig-as-James-Bond.jpg" 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>

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

Betaalde en gratis software

Docenten in kantine MK24

Docenten van MK24 blazen uit in de kantine na een dag vol informatie

Designers hebben vrijwel allemaal Photoshop (± €700) tot hun beschikking, maar er zijn ook andere en minder dure oplossingen als je maar zo nu en dan aan je website werkt. Adobe biedt overigens ook een eenvoudig bewerkingspakket aan, namelijk PhotoShop Elements 9 (€83 ex. btw).

Hieronder staat een selectie van desktop en webbased programma’s 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 er wel even in de  installatie en gebruik moet verdiepen. Voor Mac en Windows.

Webbased software

Photoshop Express – http://www.photoshop.com (account vereist) Met een gratis account bij Photoshop Express kun je behalve je foto’s bewerken ook foto’s openbaar maken (portfolio) en ‘vrienden’ maken en vinden. Nadat je een foto hebt bewerkt, kun je hem eenvoudig weer downloaden.

Picasa - https://picasaweb.google.com (account vereist) Bovenstaande geldt ook voor Picasa, het gratis pakket dat Google aanbiedt.

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

FotoFlexer – http://fotoflexer.com (online bewerken/schalen van afbeeldingen)
Onlangs opgedane tip, dat goed lijkt te werken. Uploaden, bewerken, downloaden.

Pixlr – http://pixlr.com/ – online bewerken/schalen en ook voor mobiel beschikbaar

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’.

B-ZINE

Krijg actuele tips die je website en online presentatie verbeteren.

Reacties

  1. zegt

    Hoi Bart,
    Leuk artikel, zinvolle tips. Ik gebruik de nogal rudimentaire beeldbewerkingsfuncties van IrfanView erg veel: halve of hele stop belichting erbij, resize/resample, conversie naar .gif of .png, etc. Veel meer dan dit doe ik nauwelijks of niet, anders had ik een andere foto moeten maken. Daarnaast gebruik ik default IrfanView als viewer.
    Groet&John en tot morgen bij de BBQ

    • Bart van Maanen zegt

      Dank John, en ja, IrfanView kan zeker ook op dit lijstje. Ik ben dit programma natuurlijk wel tegengekomen, maar me even onthouden van commentaar omdat ik er niet mee heb gewerkt.