Heb je last van een trage website? De kans is erg groot dat de oorzaak ligt in je afbeeldingen. Als je niet weet hoe je deze moet optimaliseren, dan ben je aan het juiste adres!
Waarom?
Elke milliseconde van je laadtijd telt. Elke bezoeker wil een snelle website en wil niet wachten op het inladen van tekst, een speciaal lettertype 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 zoekmachines. Het is al lang geen geheim meer dat de snelheid van je site een factor is in hoe graag de zoekmachines je site willen tonen.
Als je dit goed aanpakt, optimaliseer je niet enkel je foto’s maar je ook je website in zijn geheel. Je website zal minder schijfruimte innemen, wat resulteert in kleinere en snellere back-ups. Je hebt een kleinere impact op het milieu, want hoe meer data == hoe meer verbruik op het internet == meer energieverbruik door een hogere belasting van de web server.
Mijn stappenplan
- De eerste vraag die je je moet stellen is: “Is deze afbeelding echt noodzakelijk op deze pagina?” Voor je de pagina vol zet met afbeeldingen. Elke afbeelding moet een toegevoegde waarde hebben.
- Zorg ervoor dat de afmetingen, daarmee bedoel ik het effectieve aantal pixels van de afbeelding, niet te groot zijn. Een fototoestel of zelfs je smartphone maken standaard grote afbeeldingen. Mijn smartphone bijvoorbeeld maakt 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 gebruikers raad ik de Foto’s app aan die de nodige functionaliteit ingebouwd heeft om afbeeldingen bij te snijden en ook te verkleinen.
- Voor macOS gebruikers is er 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.
- Een extra tip is om enkel het deel die belangrijk is in de afbeelding te gebruiken. Heb je dus een foto waar slechts een deel van belang is – crop dan de afbeelding. Dit kan ook in Preview en de Foto’s app. Je vergroot op deze manier ook de toegevoegde waarde van de afbeelding.
- 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 (dots per inch) van 72 is hiervoor de standaard. Hiermee verlaag je ook de bestandsgrootte van de foto.
- 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 automatisch. Zie tools.
- Bekijk welk soort extensie je afbeelding nodig heeft. In het algemeen is JPEG een goeie keuze. Die is standaard lossy gecomprimeerd, in tegenstelling tot PNG. PNG heeft dan weer het voordeel dat transparantie ondersteund wordt.
- Eens de afbeeldingen op punt staan kan je beginnen ze op de website te plaatsen. Ook hier zijn er wat best practices:
- Geef altijd een beschrijvende naam aan het bestand (vb. logo-bedrijfsnaam-2017.jpg). Gebruik geen spaties.
- Niet enkel de naam is belangrijk, eens je de afbeelding hebt geüpload mag je niet vergeten om er een alt-beschrijving aan te geven. 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. Meer info over altertnative text vind je hier: https://webaim.org/techniques/alttext/.
Handige tools
Alles manueel doen zal je heel veel tijd kosten, daarom zijn er handige tools en websites die ik je graag leer kennen. Een opsomming in willekeurige volgorde:
- ImageOptim voor Mac, of FileOptimizer: automatisch comprimeren, handig voor meedere bestanden. Deze gebruik ik zelf 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 kan 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/MacOS om zeer snel je foto’s bij te werken.
- Kraken.io: premium dienst voor afbeeldingsoptimalisatie.
WordPress oplossingen
Voor WordPress gebruikers is het bovenstaande 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. Deze plugin biedt meerdere features aan om het optimaliseren van je afbeeldingen te automatiseren.
- 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 maar vermeld ik hier graag even. Hij regenereert je afbeeldingen als je wijzigingen hebt gemaakt in je thema- of mediainstellingen, en kan dus echt de prestaties van je site verbeteren.
Conclusie
Het optimaliseren van je afbeeldingen levert je alleen maar voordelen op. Heb je zelf nog enkele tips of heb je een (nieuwe) dienst of website gevonden die ik aan mijn lijstje kan toevoegen? Laat het me zeker weten in de reacties!
Succes!
Geef een reactie