WordPress afbeelding optimalisatie

De ultieme afbeelding optimalisatie gids, kortingen & gratis stockfoto website's

De ultieme WordPress afbeelding optimalisatie gids 1

door Lisa Springer

Assistent Manager van WP supporters

Afbeeldingen zijn een cruciaal onderdeel van je webdesign. Ze zijn vaak het in het oog springende onderdeel van je website. En in combinatie met tekst kunnen ze je boodschap ondersteunen en zelfs versterken waardoor het voor bezoekers aantrekkelijker wordt om op jouw website te komen.

Ondanks al deze voordelen zorgen afbeeldingen er ook voor dat je website meer Mb’s bevat.
Door de vele Mb’s kan je website langzamer worden en dit kan je ook, ondanks de geweldige afbeeldingen, een hoop bezoekers kosten.

Om dit alles te voorkomen is het daarom belangrijk voor je website snelheid dat je afbeeldingen kunt optimaliseren zonder kwaliteit te verliezen. In deze handleiding gaan we hier verder op in en leren we jou alle kneepjes van het vak.

De inhoud van deze handleiding:

Waarom is het zo belangrijk om afbeeldingen te optimaliseren voor WordPress?

Het is geen geheim dat WordPress websites soms last kunnen hebben van trage laadtijden. En het is aan jou de taak om te ontdekken waar dit aan ligt.

Misschien gebruik je een te uitgebreid thema. Of misschien is je website niet veilig genoeg en heeft hij problemen met Malware. Of misschien komt het doordat je een tijd geen updates hebt gedaan voor je plugins.

Kortom, het kan aan honderden dingen liggen waarom je website traag laad en waardoor je bezoekers niet lang op je website blijven.

Om dit alsnog te willen verbeteren zul je al snel denken aan het aankopen van een betere server. Je creëert hiermee voor jezelf de volgende voordelen:

Met een snellere server wordt je website aantrekkelijker omdat de afbeeldingen vlotter geladen worden. Echter zegt dit niets over de optimalisatie van je afbeeldingen want een server laadt de afbeeldingen wel sneller maar optimaliseert deze niet. Dit betekent dat je afbeelding sneller geladen wordt.

Maar kan dit ook anders?

Natuurlijk!

Hier komt onze WordPress afbeelding optimalisatie gids om de hoek kijken. Want een afbeelding of foto is vaak niet direct geschikt voor online gebruik. En met onze gids leren wij jou om afbeeldingen op meerdere manieren te optimaliseren voor online gebruik.

Meer informatie?

Gratis WordPress snelheid optimalisatie ebook
WordPress onderhoud snelheidsoptimalisatie

De 12-stappen checklist
voor een laadtijd binnen 2 seconden

Hoe kun je afbeeldingen optimaliseren zonder kwaliteit te verliezen?

Om geen kwaliteit te verliezen tijdens het optimaliseren van je afbeeldingen, moet je op de volgende punten letten.

Fysieke grootte
Dit is de grootte waarop de afbeelding zichzelf presenteert op de website en wordt aangegeven met de hoeveelheid pixels. Bijvoorbeeld 800 x 800 px voor een vierkant of 1920 x 1080 voor een rechthoek. Hoe meer pixels hoe groter de bestandsgrootte. Bedenk dus altijd op wat voor grootte je de afbeelding gaat gerbuiken.
Het passend maken van afbeeldingen voor verschillende apparaten is niet nodig. Indien je een WordPress thema hebt met een responsieve lay-out, zal dit alles vanzelf gaan.

Bestandsgrootte
Dit is de grootte van het bestand dat een website moet laden. Hoe kleiner hoe beter.

De bestandsgrootte is een belangrijke factor als het gaat om het optimaliseren van je afbeeldingen voor het versnellen van je website laadtijd. Hierbij bevelen wij voor de grotere afbeeldingen onder de 250Kb aan en voor de kleinere afbeeldingen een grote van onder de 50K aan.

Resolutie
Resolutie heeft betrekking op het aantal pixels dat bestaat in een afbeelding. Hoe hoger de resolutie, hoe scherper de afbeelding.

Bij het beoordelen van de resolutie van een afbeelding, moet je zoeken naar de DPI, ofwel ‘Dots Per Inch’. 72 Dots per inch is hierin de standaardresolutie voor online gebruik die je op de meeste afbeeldingen terug zult vinden. 300 Dots per inch is de standaard voor drukwerk en dit krijg je waarschijnlijk als je stock foto’s koopt. Je kunt bij deze foto’s de resolutie dus al lager maken zonder dat het online veel opvalt. Zolang een afbeelding er met de gewenste grootte scherp uitziet, kan je de resolutie verlagen.

In principe is er geen specifieke aanbeveling van WordPress over de resolutie van je afbeeldingen. Wel adviseren ze om niet zomaar de resolutie hoger te maken dan nodig is. Dit zorgt er namelijk voor dat de bestandsgrootte ook groter wordt en het is beter om je server onnodige belasting te besparen.

De ultieme WordPress afbeelding optimalisatie gids 2

Bestandstype
Dit verwijst naar de indeling waarin het bestand is opgeslagen. Dit kunnen verschillende soorten zijn zoals: PNG, JPG, SVG en GIF bestand.

Er is hierin opnieuw geen vaste standaard van WordPress. Het is niet zo dat een JPG beter is dan een PNG of een SVG. Je kunt dus zelf kiezen wat je hiermee wilt doen.

Hieronder geef ik een korte uitleg over de verschillende soorten zodat je zelf kunt kijken wat je voorkeur heeft.

JPG
Indien je foto’s gebruikt als afbeelding, is dit het ideale bestandstype. JPG bestanden ondersteunen geen transparante achtergronden maar zijn wel ideaal te optimaliseren zonder dat je hierin kwaliteit verliest. Ook is JPG erg geschikt om te comprimeren tot kleinere bestandsgroottes.

Het exporteren van JPG’s vanuit een foto bewerking programma kun je op 2 manieren doen: basislijn of progressief.

Door middel van de basislijn te gebruiken, bestaat je JPG uit een enkele laag. Dit betekend dat je WordPress website alleen een platte afbeelding hoeft te laden. Wanneer er vertraging op je website optreedt, worden de afbeeldingen op je pagina langzaam van boven naar beneden op het scherm geladen.

Een progressieve JPG bestaat uit meerdere lagen. Wanneer er hiermee vertraging op je pagina ontstaat, zal de afbeelding volledig binnen het kader worden ingevuld en gaat hij van wazig naar scherp.

De ideale keuze tussen deze twee mogelijkheden is de progressieve JPG. Dit komt omdat een progressieve JPG minder druk op je server zal geven omdat hij niet in één keer geladen zal worden.

PNG
PNG afbeeldingen zijn voornamelijk geschikt voor ontwerp elementen die je gebruikt op je website. Dit kan bijvoorbeeld een logo zijn illustratie of een tekstuele afbeelding.

PNG bestanden kunnen ook gecomprimeerd worden maar hiermee worden wel alle originele gegevens beïnvloed. Omdat het hiermee de grootte van je bestand niet kan verkleinen, breekt het je afbeelding als het ware in kleine stukken zodat het gemakkelijker wordt voor bezoekers om de afbeelding te bekijken.

Een PNG bestand zorgt hiermee wel voor goede kwaliteit alleen de bestandsgrootte wordt hiermee niet kleiner.

GIF
GIF zijn leuke alternatieven indien je videobestanden of animaties wilt plaatsen op je website. GIF bestanden zijn een lichter bestandstype dan een video maar gebruik ze wel spaarzaam.

SVG
SVG bestandstype worden bijna nooit besproken wanneer het gaat over WordPress afbeeldingen. Toch is het een interessant bestantdtype wanneer je website gebruikt maakt van illustraties.

SVG bestanden zijn schaalbare vector afbeeldingen en daarbij de meest flexibele vorm van alle afbeeldingstype. Daarbij is het een super licht bestand waardoor het je server minimaal beïnvloed.

De 5 beste gratis afbeelding optimalisatie tools voor WordPress

1: ShortPixel

ShortPixel is (volgens ons) de musthave onder de afbeelding optimalisatie plugins. Het optimaliseert je afbeeldingen zonder kwaliteit verlies en is ook erg vriendelijk in gebruik.

Wat voor pakket je nodig hebt, hangt natuurlijk af van je wensen. Het voordeel van ShortPixel is dat je kunt beginnen met het gratis pakket en altijd kunt upgraden indien dit nodig is. In dit gratis pakket krijg je onder andere:

  • 100 Afbeeldingsbestanden per maand gratis (Let op! Een afbeelding bestaat uit 3 bestanden: klein, middel of groot. Dit betekent dus per afbeelding 3 bestanden)
  • Geen limieten qua grootte van je bestanden
  • Support indien dit nodig is
  • Optimalisatie van JPG, PNG, GIF en WebP bestanden.
  • Ieder moment opzegbaar

Natuurlijk kun je ook voor de betaalde versie kiezen en hiermee nog meer afbeeldingen optimaliseren.

Indien je interesse hebt in korting op de premium versie kun je deze vinden op onze beste tools voor WordPress pagina. 

2: Media instellingen

WordPress afbeelding optimalisatie is ook al automatisch geïntegreerd in WordPress zelf. Je kunt dit vinden door op ‘Instellingen’ te drukken en naar ‘Media’ te gaan.

Er opent nu een scherm waarop je de standaard afbeeldingsformaten kunt aanpassen. Dit kan bijvoorbeeld tijd schelen wanneer je voornamelijk dezelfde formaat afbeeldingen wilt gebruiken op je website.

Ondanks dat dit een erge handige functie is, zal deze functie het optimaliseren van je afbeelding niet helemaal perfect kunnen volbrengen. Combineer het daarom altijd met 1 van de plugins die we in dit artikel bespreken.

3: Smush - compress, optimize and lazy load images

De ultieme WordPress afbeelding optimalisatie gids 4

Natuurlijk kun je iedere plugin ook gewoon kopen maar wij zoomen graag in op de gratis mogelijkheden.

Dit is vooral interessant bij de “Smush – compress, optimize and Lazy load images” plugin omdat de gratis versie weinig verschilt van de betaalde versie. Daarbij is deze plugin bekroont tot 1 van de beste WordPress afbeelding optimalisatie plugins.

De beste tools die deze plugin bevat zijn:

  • Overbodige gegevens worden automatische verwijderd wanneer afbeeldingen worden geupload naar WordPress.
  • Afbeeldingen kunnen worden geoptimaliseerd in de map Media, in je galerij plugin, themabestanden en zelfs off-site in de cloud opslag.
  • Bevat een gebruiksvriendelijk dashboard zodat het beheren eenvoudig is.

4: Comprimeer JPEG & PNG afbeeldingen - Tiny PNG

Deze plugin van Tiny PNG is erg handig wanneer je opzoek bent naar bulk optimalisatie. In plaats van je afbeeldingen 1 voor 1 te optimaliseren kun je met deze plugin meerdere afbeeldingen in 1x optimaliseren en comprimeren.

De ultieme WordPress afbeelding optimalisatie gids 5Ideaal wanneer je heel veel afbeeldingen op je website hebt staan. De voordelen van deze plugin zijn:

  • Optimaliseert je afbeeldingen automatisch
  • De plugin is gratis
  • Bevat een handige Dashboard widget die de besparing aantoont
  • Bevat geen bestandsgrootte limieten

5: Imagify Image Optimizer

De Imagify Image Optimizer plugin maakt het proces van bulk optimalisatie super eenvoudig. Het is daarom ook niet voor niets 1 van de gratis favorieten plugins van een hoop WordPress website gebruikers.

De plugin begint met een bulkoptimalisatie gevolgd door een specifieke optimalisatie die je van te voren in kunt stellen. Zo worden je afbeeldingen precies zoals jij wilt.

Het gebruiksvriendelijke van deze plugin komt vanuit een aantal vragen die voor het optimaliseren van je afbeeldingen worden gevraagd. Op deze manier wordt de optimalisatie op maat voor jou gemaakt.

Andere manieren voor het optimaliseren van afbeeldingen

Fotobewerkingsprogramma’s

Natuurlijk zijn de bovenstaande tools niet de enige die je kunnen helpen met WordPress afbeelding optimalisatie. Een fotobewerkingsprogramma kan hierin ook een belangrijke rol spelen.

Wij gebruiken zelf Photoshop maar met andere fotobewerkingsprogramma’s kun je dit vaak ook wel aanpassen. Indien je Photoshop gebruikt kun je heel eenvoudig je afbeeldingen aanpassen in grootte en resolutie.

Ook kun je hierin de kwaliteit aanpassen van je afbeeldingen. Vaak staat deze op 100% maar is dit voor het zicht niet persé noodzakelijk. Wanneer je de kwaliteit verlaagd, scheelt dit vaak veel in de bestandsgrootte. Probeer daarom deze factoren in evenwicht te brengen zodat je met een minder groot bestand dezelfde visuele kwaliteit behoudt.

De ultieme WordPress afbeelding optimalisatie gids 6

Voorvertoning (Macbook gebruikers)

Veel Mac gebruikers kopen een fotobewerkingsprogramma als bijvoorbeeld Photoshop. Toch is dit met een Mac niet persé nodig.

Tegenwoordig opent Mac namelijk direct het programma ‘Voorvertoning’ op het moment dat je een afbeelding opent. Je kunt met dit programma ook prima je afbeelding optimaliseren en comprimeren. Daarbij is het zelfs mogelijk om je afbeeldingen bij te snijden, kleuren te veranderen of symbolen en tekst toe te voegen.

Mocht je je afvragen hoe je dit precies moet doen, dan verwijzen wij graag naar de blog van Passion support. 

Onze aanrader

Natuurlijk heeft iedereen zijn eigen werkwijze wat betreft WordPress afbeelding optimalisatie. Hierboven staan al veel verschillende tools weergeven.

Toch delen we graag onze werkwijze wat betreft afbeelding optimalisatie, dit om je een compleet beeld te geven van hoe je dit zou kunnen aanpakken.

Onze stappen hierin zijn:

  1. Na het gevonden hebben van de juiste afbeelding, openen we deze eerst in Photoshop. Hier passen we de afmetingen aan die we nodig hebben voor op de website.
  2. Vervolgens passen we in Photoshop de kwaliteit van de afbeelding aan op het oog.
  3. Daarna uploaden we de afbeelding vanuit Photoshop naar onze website.
  4. En laten we de afbeeldingen comprimeren en optimaliseren door ShortPixel.

Hiermee zorgen we er niet alleen voor dat de afbeelding de juiste afmeting en kwaliteit bevat maar ook dat hij gecomprimeerd en geoptimaliseerd wordt voor onze website.

Mocht je interesse hebben in deze manier van WordPress afbeelding optimalisatie en graag korting willen op ShortPixel, neem dan even contact op.

Extra’s

Afbeeldingen zijn zoals ik al zei, het parade paardje van je website. Ze maken je boodschap krachtiger en kunnen net die ene klant overhalen om in actie te komen.

Toch is het soms erg moeilijk om de juiste afbeeldingen te vinden omdat je vanwege auteursrecht niet zomaar een afbeelding mag gebruiken. Om deze reden delen wij graag onze favoriete gratis stockfoto websites. Bedenk wel dat niet alle foto’s al zijn geoptimaliseerd.

Websites met gratis afbeeldingen, video’s, illustraties en achtergronden

  • Pexels
    Bevat een groot scala aan gratis afbeeldingen.De ultieme WordPress afbeelding optimalisatie gids 7
  • Toptal
    Hier kun je gratis achtergronden vinden.
  • Coverr
    Deze website beschikt over gratis en betaald video materiaal.
  • Lottiefiles
    Hier kun je gratis animaties vinden. Een leuke extra hiervan is dat je ze kunt aanpassen op de kleur die jij zou willen.
  • Manypixels
    Bevat heel veel gratis illustraties die je ook kunt aanpassen op de kleur die je zou willen.
  • Unsplash
    Bevat een groot scala aan gratis afbeeldingen.
  • Pixabay
    Hier kun je gratis afbeeldingen en video’s vinden.

Zoekmachines met gratis afbeeldingen

Natuurlijk zijn er naast de gespecificeerde websites ook nog altijd afbeeldingen te vinden via verschillende zoekmachines. Let hierbij ten alle tijden op dat je de zoekmachine van te voren goed instelt.

Google
Vul in de zoekbalk in waar je naar opzoek bent. Stel vervolgens de zoekmachine in onder het kopje ‘Tools’ en geef bij ‘gebruiksrechten’ aan dat je opzoek bent naar afbeeldingen ‘gelabeld voor hergebruik’.

Flickr
Vul in de zoekbalk in waar je naar op zoek bent. Stel vervolgens de zoekmachine in links boven bij het pijltje ‘Any License’ en verander dit in ‘Commercial use allowed’.

We hopen dat je met deze gids een compleet beeld hebt gekregen van hoe WordPress afbeelding optimalisatie in zijn werk gaat. Zoals je ziet, is het eenvoudiger dan je denkt.

Mocht je ten aanzien van deze informatie nog vragen hebben, schroom niet en stuur een mail naar: [email protected]

Geef ons een beetje support, en deel met belangstellenden.

Facebook
Google+
Twitter
LinkedIn
WhatsApp

Lees ook:

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *