Afbeeldingen optimaliseren, stappenplan voor iedere website.

Heb ook jij last van een trage website omdat je zware afbeeldingen op je pagina plaatst? Weet je niet hoe je deze kunt optimaliseren? Ik leer je in deze blogpost enkele handige tips om je afbeeldingen te optimaliseren.

Waarom is optimalisatie nodig?

Elke seconde telt, iedere bezoeker wil een snelle website en wil niet wachten op het inladen van tekst, een speciaal lettertype of grootte, of zware afbeeldingen. Zoals Benjamin Franklin ooit zei: “Time is Money.” Ik kan er geen betere quote op plakken.

Los van de bezoekerservaring op je website, heb je ook een streepje voor bij Google. De snelheid van je website  is één van de gekende ranking factors.

Stappenplan

  1. Stel jezelf de vraag: “Is deze afbeelding echt noodzakelijk?” vooraleer je de pagina vol zet met afbeeldingen. Elke afbeelding moet een toegevoegde waarde zijn op de pagina.
  2. Zorg ervoor dat de afmetingen, het effectieve aantal pixels van de afbeelding, niet te groot zijn. Fotocamera’s en zelfs de smartphones van tegenwoordig maken zeer grote afbeeldingen. Mijn Samsung Galaxy S6 Edge neemt op de grootste instelling foto’s van 5312 x 2988 pixels. Het is dus niet de bedoeling om je afbeeldingen op deze grootte op je site te gaan plaatsen.
    • Voor Windows (10) gebruikers: in de foto app zit de nodige functionaliteit ingebouwd om afbeeldingen bij te snijden en ook te verkleinen.
    • Voor Mac OS X gebruikers: het Preview (voorvertooning) programma kan ook afbeeldingen aanpassen in resolutie. Open een foto in Voorvertoning en ga via het menu bovenaan naar Extra > Pas grootte aan.
  3. Zet enkel het deel die van belang is van de afbeelding in de kijker. Staan er extra’s op de foto die niet belangrijk zijn, snijd de foto dan bij (croppen). Je vergroot op die manier de echte toegevoegde waarde van de afbeelding.
  4. Verlaag de resolutie. Afbeeldingen van een digitale camera hebben vaak een hoge resolutie die extra goed is bij het afdrukken van de afbeeldingen, maar niet voor het web. Een dpi, of dots per inch, van 72 is hiervoor de standaard. Hiermee verlaag je ook de bestandsgrootte van de foto.
  5. Verwijder de extra EXIF-data uit de afbeelding. EXIF staat voor Exchangeable Image File Format en houdt extra gegevens bij over je foto. Voor camera’s/smartphones die GPS ingeschakeld hebben staat standaard ook de locatie hierin vermeld, alsook de datum, tijd en camera/lens instellingen. Dit soort zaken zet je dus in het belang van je eigen privacy beter niet online. De meeste compressie tools verwijderen deze data ook.
  6. Bekijk welk soort extensie je afbeelding nodig heeft. In het algemeen is JPEG een goeie oplossing. Die is standaard lossy gecomprimeerd, in tegenstelling tot PNG. PNG heeft dan weer het voordeel dat transparantie ondersteund wordt. Kies dan wel voor PNG-24 en niet PNG-8. PNG-8 ondersteund immers, net zoals GIF-bestanden, maar 256 verschillende kleuren.
  7. Eens de afbeeldingen op punt staan kan je beginnen ze op de website te plaatsen. Ook hier zijn er wat best practices:
    1. Geef altijd een beschrijvende naam aan het bestand (vb. logo-bedrijfsnaam-2017.jpg).
    2. Niet enkel de naam is belangrijk, eens je de afbeelding hebt geüpload geef je die best een goede titel, maar vergeet zeker niet de alt-beschrijving. Je omschrijft hierin de functie van de afbeelding op de pagina. Bovendien wordt het ook gebruikt voor screenreaders (software om teksten voor te lezen, meestal gebruikt bij slechtzienden en blinden) of als vervanging in het geval dat de afbeelding niet wil inladen.

Handige tools én websites

Manueel alles gaan regelen, dat zal je ferm veel tijd kosten, daarom zijn er handige tools en websites die ik je graag leer kennen. Een opsomming:

  • ImageOptim voor Mac, of FileOptimizer: automatisch comprimeren, handig voor meedere bestanden/mappen. Deze gebruik ik zelf vaak en werkt uitstekend.
  • TinyJPG.com/TinyPNG.com: website om tot 20 afbeeldingen per keer gratis te laten optimaliseren. Je uploadt je foto’s, even wachten en je kunt de geoptimaliseerde bestanden direct terug downloaden. Voor meer dan 20 afbeeldingen heb je betalende opties. Er is tevens een WordPress plugin voor geschreven, die vind je hier.
  • Optimizilla.com: gelijkaardig aan TinyPNG.
  • Caesium: gratis applicatie voor Windows om zeer snel je foto’s bij te werken.
  • Kraken.io: premium dienst voor afbeeldingsoptimalisatie.

WordPress oplossingen

Voor WordPress gebruikers is het stappenplan een eerste goede basis. Maar wat doe je als je website al vol staat met afbeeldingen die te groot zijn? Enkele tips:

  • EWWW Image Optimizer : plugin om automatisch je toekomstige uploads te optimaliseren. Er is ook een optie om je reeds bestaande mediabibliotheek te optimaliseren.
  • Imsanity : Gebruik ik vaak, zeer goede plugin. Hij converteert trouwens BMP naar JPEG. Ook in deze plugin kan je de huidige afbeeldingen laten optimaliseren.
  • Smush van WPMU : één van de zovele plugins die WPMU aanbiedt.
  • Imagify : opnieuw een alternatief, maar deze plugin is niet volledig gratis, je bent gelimiteerd tot een aantal MB per maand.
  • Regenerate Thumbnails : deze plugin doet net iets anders. Hij regenereert je afbeeldingen na wijzigingen in je thema of in je media instellingen.

Je optimaliseert er niet enkel je foto’s mee, je optimaliseert ook je website in z’n geheel. Je website zal ook minder schijfruimte innemen, wat dan weer resulteert in kleinere en snellere back-ups.

Conclusie

Het optimaliseren van je afbeeldingen levert dus enkel maar voordelen op. Alleen tijdsgebrek kan een probleem zijn. Heb je zelf nog enkele tips die ik niet vermeldde of heb je een (nieuwe) dienst of website gevonden, laat het zeker weten in de reacties. Zo help je niet alleen mij, maar ook iedere bezoeker op de site.