1 maart 2020

Afbeeldingen en foto’s optimaliseren binnen je website [plugin tip]

Iets wat tegenwoordig nog vaak vergeten wordt is het optimaliseren van afbeeldingen en foto’s voordat je ze op je website gaat gebruiken. Meestal komt dit omdat mensen niet weten dat dit heel belangrijk is om te doen. Soms komt het omdat mensen niet goed weten hoe. Afbeeldingen optimaliseren heeft in ieder geval veel voordelen. Zo zal je website sneller laden als er geen grote fotobestanden op staan. En dit is weer gunstig voor de positie van je website in zoekmachines. Maar ook je website bezoekers vinden een website die vlotjes en soepel laadt erg prettig in gebruik.

Afbeeldingen en foto's optimaliseren

Een tijdje terug heb ik al een artikel geschreven over het optimaliseren van foto’s en afbeeldingen voor je website. In dit artikel kon je lezen hoe je het beste foto’s kunt resizen en comprimeren alvorens je ze gaat gebruiken op je WordPress website. Er bestaat echter ook een WordPress plugin die deze optimalisatie werkzaamheden voor je uit handen neemt. Super handig! Deze plugin wil ik vandaag met je delen: Imsanity. In deze blog leg ik je uit hoe je deze plugin installeert, activeert en configureert zodat je de afbeeldingen op je website niet meer handmatig hoeft te optimaliseren!

Imsanity installeren voor afbeeldingen optimalisatie

De eerste stap is het downloaden van de Imsanity plugin. In je WordPress dashboard ga je naar het menu kopje Plugins en kies je voor Nieuwe plugin. Vervolgens kun je in de plugin bibliotheek van WordPress zoeken op Imsanity. De betreffende plugin zal direct verschijnen als eerste resultaat. Zoals de plugin beschrijving ook al doet suggereren worden met deze plugin afbeeldingen en foto’s automatisch geoptimaliseerd. Precies wat we graag willen! Daarnaast heeft deze plugin 5 sterren uit meer dan 200 beoordelingen. Een schot in de roos dus. Installeer & activeer de plugin!

afbeeldingen optimaliseren voor website

Tijd om afbeeldingen te gaan optimaliseren

Nadat je de plugin hebt geïnstalleerd en geactiveerd verschijnt deze in je lijst met actieve plugins. Je kunt via deze lijst met plugins bij de instellingen van Imsanity komen, maar er staat ook onder Instellingen > Imsanity een shortcut naar de configuratie pagina van de plugin.
fotos optimaliseren website

Imsanity instellen voor optimalisatie

In onderstaande afbeelding zie je alle configuratie opties van Imsanity. In feite is het een plug-and-play plugin en hoef je niets te wijzigen. Direct na activatie werkt de plugin. Toch vind ik het persoonlijk fijn om de maximale breedte en maximale hoogte van afbeeldingen uploads iets aan te passen. Met name de hoogte. Die zet ik altijd op 1500 pixels hoog. Als afbeeldingen dan worden geresized wordt de breedte vaak 1000 pixels breed en voor een portret foto is dat voldoende. De breedte kun je zo laten staan. Hoewel ik zelf een tik heb om deze op 2000 pixels breed te zetten. In de praktijk levert dit nauwelijks verschil op, maar als mensen aan mij vragen ‘hoe breed de foto’s op hun website moeten zijn’, dan antwoord ik vaak 2000 pixels voor afbeeldingen die de volle breedte van een scherm in beslag nemen en 1000 pixels voor afbeeldingen de de helft van een scherm in beslag zullen nemen. Dit zijn makkelijk te onthouden getallen (makkelijker dan 1920 pixels breed) en kun je goed als vuistregel nemen.

afbeeldingen optimaliseren imsanity plugin

De plugin Imsanity biedt echter nog meer opties voor het optimaliseren van afbeeldingen en foto’s voor je website. Zo kun je ook invloed uitoefenen op de mate van compressie. Zie het nummertje 82 bij JPG afbeeldingskwaliteit. Deze kun je ook zo laten staan. 82 is perfect! Afbeeldingen worden dan goed en netjes gecomprimeerd zonder dat je kwaliteitsverlies in je foto’s zult merken.

De opties voor wat betreft het converteren van de bestandsextensies kun je zo laten staan. Met name PNG naar JPG zou ik op nee laten staan. Als je ooit .PNG bestanden upload naar je website dan zal dit hoogstwaarschijnlijk de bedoeling zijn, omdat .PNG afbeeldingen vaak transparante delen bevatten.

Bulk comprimeren van je afbeeldingen en foto's

Heb je al heel veel afbeeldingen op je website staan die geoptimaliseerd moeten worden? Dan heeft de plugin Imsanity een handige bulk resizer! Maak van te voren wel een back-up, want de aanpassingen die de bulk resizer doet zijn onomkeerbaar! De plugin adviseert overigens ook al duidelijk om een back-up te maken voordat je deze tool gaat gebruiken. Als je besluit de afbeeldingen en foto’s op je website in bulk te resizen, dan worden de instellingen toegepast die je zelf hebt gekozen in de afbeelding hierboven. Dit zijn dus ofwel de standaard instellingen of jouw aangepaste instellingen.

Meer lezen?