08 | Verklein je foto’s voor je ze upload naar je website

Geschatte leestijd: 7 minuten

Er zijn een aantal redenen om je foto’s te verkleinen voordat je ze uploadt

• SEO ranking, grotere zwaardere foto’s betekenen meer laadtijd en een minder hoge score op Google voor jouw website
• Bezoekers klikken je website weer weg als het te duurt
• Als ze toch blijven, raken ze geïrriteerd
• Je schijfruimte bij je hosting raakt vol en soms kan dat extra kosten met zich meebrengen bovenop je maandbedrag

Test zelf een pagina met Google Speedtest >>

Zelf een professionele website maken? Je kan een online training volgen voor €250,- excl. btw. Je kiest zelf of je deze wil uitbreiden met een extra uren voor begeleiding. Of voor hulp bij je online marketing. Bezoek de pagina zelf-een-website-bouwen voor meer informatie.

Ja, maar wat bedoel je dan met verkleinen?

Even een technisch verhaal, maar blijf bij me… Als ik een foto maak met mijn mobiel, en daarna uploadt naar mijn computer dan is deze bijna 3MB / 3000kB. Een voorbeeld zie je hieronder. Je kan dus sleutelen aan het pixels per inch en dan nog aan de hoogte en breedte.

Ik kan hem ook eerst verkleinen in Photoshop. en de image size (het formaat) bekijk is deze 4160 x 3140 pixels en 72 dpi (dots -pixels-per inch). Voor een scherm heb je niet meer dan 72 dpi nodig. Voor drukwerk is dat veel meer dan zit je op 300dpi. Hier valt dus veel winst te behalen. Met de optie “save for web”, wordt de afbeelding gecomprimeerd voor web en kan je zo uitkomen op een kleiner aantal kb. Probeer max 150 aan te houden, maar liever nog kleiner als het kan.

En misschien wil je hem ook nog eerst bijsnijden? Zodat je compositie beter klopt. Of omdat je niet perse de foto in een 4:3 verhouding wil weergeven op je website.

Hoe groot wordt de foto straks getoond op je website?

Hoe de foto wordt getoond is ook afhankelijk van de instellingen in WordPress en die van je thema. Bekijk hierover een video op YouTube >>

Als je berichten gebruikt kan je kiezen voor een zijbalk of niet. Bij de laatste keuze gebruik je dan de volledige pagina breedte dan zal dan maximaal 1250 pixels zijn*, maar met een zijkolom zal dat al gauw 800 pixels breed zijn. Haal daar de witruimte rondom vanaf en je foto wordt op slechts 760 pixels breed getoond. Waarom zou je dan zo’n enorme foto uploaden?

Let er wel op dat websites tegenwoordig responsive zijn. Als je de mogelijkheid hebt om voor mobiel een andere foto te uploaden dan zou ik dat doen!

*mits je er niet is ingesteld dat je een bredere bladspiegel hebt.

Hoe klein en licht moet de afbeelding dan zijn?

Gemiddeld gezien kun je al je foto’s behalve je headers verkleinen naar 960 pixels breed. Als je hem nu bewaart is hij nog steeds te groot.

Daarom deze tweede stap, je bewaart hem met de functie “save for web”, hierbinnen kun je kiezen voor max, high, medium, low. Kijk goed naar de preview en kies de laagste mogelijke waarde. Hieronder zie je een overzicht van wat dit doet met het aantal kB’s. Een foto van 1,7 mB gaat naar 48 kB. En dat betekent veel voor je laadtijd. Zeker als je meerdere foto’s hebt geplaatst binnen een blog.

In dit geval maakt het me niet zoveel uit dat hij wat wazig wordt, maar wil ik hem scherp hebben dan had ik voor high moeten kiezen. Dan is hij nog maar 97 kB.

Waarmee kan ik afbeeldingen optimaliseren?

Hiervoor heb je Photoshop of een dergelijk programma nodig die dit kan. Uiteraard heeft niet iedereen Photoshop of Lightroom. Hier vind je een online tool: 

• Pixlr.com
• https://www.adobe.com/nl/express/feature/image/resize

Ja, maar, dan kan toch ook in WordPress zelf?

Ja dat kan, maar WordPress bewaart meerdere versies in je upload map, dus ook de versie van 1,7 mB. Onder media instellingen kun je kiezen hoe groot je de variaties van het origineel wilt uploaden. Er komen dus 4 versies in je upload map. Ga je dit trouwens aanpassen na dit blog dan veranderen je oude afbeeldingen dus niet.

Grote foto’s gaan ook ten koste van je schijfruimte van je hostingpakket.

En ik zie ook dat het aantal kb niet zoveel omlaag gaat dan als je dit in een apart programma zou doen.

In je blog zelf (tussen de tekst) gebruikt WordPress de drie varianten. Bij de uitgelichte afbeelding( boven aan je blog) pakt hij de Thumbnail versie. En met die grote afbeelding doet hij niks.

Afbeeldingen worden geschaald, verkleind in je website

Als je dan een afbeelding in de tekst plaatst, dan kan je hem op dat moment ook nog een eigen grootte geven. In dit voorbeeld hieronder zie je dat je afbeelding in werkelijkheid 558 x 806 pixels is. Maar hij word verkleind weergegeven naar 279 x 403 pixels. Als je hem niet groter dan dit gebruikt, verklein hem dan al van te voren.

Dus mijn advies

Uploadt de foto in het formaat waarop je hem maximaal gaat gebruiken. Dat scheelt kB’s en dus laadtijd. En schijfruimte in je hostingpakket.

Installeren van de Imsanity plugin

Misschien handig om deze plugin Imsanity te installeren. Deze plugin installeer je in website. Je stelt de max grootte in en hij verkleind ze voor jouw en vervangt de originele mega afbeelding.

Waar ik tegen aanloop is dat ik een max MB heb ingesteld om te uploaden bij mijn media bibliotheek. Als je daar bijvoorbeeld max. 2MB hebt staan dan kan je nooit een foto groter dan dat uploaden en kan je de plugin niet gebruiken. Of je moet die max. MB ophogen.

Pluspunt is dat het snel werkt en inderdaad kleinere foto’s upload. Speel een beetje met de compressie voordat je hem volop gaat gebruiken. Bij mij in de video stond hij op 82, zou eventueel lager kunnen.