Ik krijg vaak de vraag hoe ik mijn afbeelding zo klein krijg. Niet in formaat maar in gewicht oftewel Kb's. Eigenlijk is dat helemaal niet zo moeilijk. Maar echt cruciaal om je laadtijd te verlagen. En een lage laadtijd vinden zoekmachines weer belangrijk. Dus betere vindbaarheid!

Het origineel

Er is een regel die luidt dat wanneer je afbeelding zo scherp en hoge resolutie mogelijk is dan kan je de afbeelding ook veel beter lichter in gewicht krijgen. Ho ho, wacht even. Nu niet meteen afhaken. Ik leg het wel uit.

  1. Resolutie is de details van een afbeelding, voor web is dit altijd 72DPI (dots per inch = punten per inch) voor print 300DPI. In ons voorbeeld zal de online bewerker PIXLR deze resolutie stanaard exporteren dus hoef je dit niet te keizen. In Photoshop of Affinity photo maak je wel deze keuze.
  2. Grootte is de afmeting van een afbeelding, 1200x800.
  3. Gewicht is hoe zwaar een afbeelding is, 168Kb (kilobytes).
  4. Type is welk type afbeelding het is, jpg (jpeg) (png, gif of svg zijn voor gevorderden en leg ik later nog wel eens uit).

Praktijk

Je hebt een foto zelf gemaakt of ergens online vandaan (Pas op met het gebruik van online foto's zonder toestemming van de eigenaar). Je wilt deze in je website gebruiken. Hoe krijg je de beste afbeelding?

Stap 1; welk formaat moet de foto in je website hebben?

Je moet weten hoe groot een afbeelding in je site moet zijn. Meestal wordt zo iets in een huisstijl document meegegeven. Heb je geen idee dan kun je altijd een mail naar mij sturen. Ik kan je dan doorgeven wat het minimale formaat moet zijn.

Je kan via deze site gratis je afbeedling bewerken. Ik gebruik een voorbeeld afbeelding voor een slider.

  1. Open afbeelding van je computer.
  2. Mijn afbeedling is nu 1919x1275 px.
  3. Een slider afbeedling hou ik op 1200 px breedte. Dus kies onder Beeld/Afbeedlingsgrootte.
  4. Je ziet een popup venster Afbeedlingsgrootte.
  5. Kies het Breedte formaat naar keuze en laat Beperk verhoudingen aangevinkt zodat de originele verhoudingen blijven. Ik kies 1200 px breedte.

Stap 2; bewaar voor je website

Nu wil je de afbeelding bewaren voor de website.

  1. Geef een goede naam. Dit is van belang ivm vindbaarheid in zoekmachines.
  2. Hierbij maak je een keuze van jpg (jpeg).
  3. Kwaliteit kun je hier op 100 laten de echte compressie doen we later. De resolutie hoef je niet te kiezen omdat PIXLR alleen maar met 72 DPI werkt.
  4. Je ziet de grootte worden vermeld. Maak je geen zorgen in de volgende stap maak je afbeedling toch nog kleiner.
  5. Klik op "OK".
  6. Bewaar je afbeedling op je computer.

Stap 3; Afbeelding optimizer

Deze stap kun je overslaan als je een onderhoud pakket bij mij afneemt. Doordat technieken steeds verbeteren kunnen we afbeedlingen ook nog kleiner maken. De meeste foto bewerkers leveren deze manier van compressie niet standaard bij. Waarschijnlijk een kwestie van rechten. Ik gebruik ImageOptim voor de Mac of je kan ook online bij TinyPNG je afbeedlingen verkleinen.

In de afbeelding hieronder zie je dat TinyPNG de herfstblaadjes afbeedling terug gebracht heeft naar 155,9Kb dat is 32% minder Kb! De panda is blij en jij ook.

Automatische afbeelding verbetering

Ik kan ook een plugin installeren die de laatste stap van optimaliseren automatisch voor je regelt. Het inrichten kost mij ongeveer een half uur werk en je betaalt een klein bedrag voor het gebruik van de plugin.

De plugin maakt een kopie van je afbeeldingen zodat je altijd weer terug kan naar de oude afbeelding. Vraag mij om de plugin te installeren.

Laatste update: januari 8, 2019  

oktober 16, 2017   445    Wordpress Basis, Zoekmachine Optimalisatie