ItDentity | Grafisch ontwerpbureau | Webdesign studio

Blog

[rank_math_breadcrumb]
Afbeelding optimalisatie website
ItDentity

ItDentity

Afbeelding optimalisatie voor je website

Een goed gebruik van afbeeldingen op je website is één van de factoren die het succes en kwaliteit van je site bepalen. Stamp je website dus niet vol met afbeeldingen en foto’s, je site wordt hier erg traag van. Til je website op een hoger niveau met afbeelding optimalisatie.

Het is begrijpelijk dat je in je portfolio veel afbeeldingen weergeeft. Verwacht van die pagina’s echter niet dat ze snel zullen laden. Maar ook op deze pagina’s kun je ‘winst’ behalen als je afbeelding optimalisatie toepast.

Op andere pagina’s en in berichten kun je met het gebruik van één of een paar foto’s weer wel je website ‘promoten’. Een beeld zegt vaak meer dan woorden. Het trekt de aandacht. En ook bij Google kun je met een afbeelding je pagina positief onder de aandacht brengen. Mits goed gebruikt uiteraard.

Afbeelding optimalisatie doe je vooraf

Dus vóórdat je de afbeeldingen en foto’s gaat uploaden naar je website zorg je ervoor dat je afbeeldingen goed geschikt zijn voor het web. Ik zal aan de hand van een voorbeeld de afbeelding optimalisatie uitleggen.

Stel ik vertegenwoordig een wijnwinkel. Ik wil één van mijn pagina’s de titel geven: ‘Zelf wijn tappen’. Ik heb hiervoor een afbeelding gezocht op Pixabay van Marina de Haan.

Details van de afbeelding

Resolutie: 2560 x 1920 pixels
Bestandsnaam: farm-884483.jpg
Formaat: jpg
Grootte van de afbeelding: 1.6 MB
Bestemd voor pagina: ‘Zelf wijn tappen’
Zoekterm (focus keyword) welke ik bedacht heb: ‘Zelf wijn tappen’

Nu is 1.6 MB echt veel te groot voor een website. Maar zo’n bestandsgrootte is echt geen uitzondering. Bestandsgroottes van 3 tot 10 Mb doen ook vaak mee. Prima voor drukwerk maar zeker niet voor je site.

Gelukkig kun je zelf eenvoudig afbeeldingen verkleinen zonder merkbaar kwaliteitsverlies. Groot voordeel voor je website. Deze laadt aanzienlijk sneller met kleinere afbeeldingen. En hier wordt niet alleen je bezoeker maar ook Google wordt hier een stuk vrolijker van. Werk aan de winkel dus.

1. Geef je afbeeldingen een relevante naam

Bestandsnamen zijn een indicatie waar de afbeelding over gaat. Verbeter de positie van je afbeelding wanneer ernaar gezocht wordt op Google. Automatisch gegenereerde bestandsnamen zoals DSO011 of IMG0013 hebben geen toegevoegde waarde voor Google. Voorzie je afbeeldingen dus van een relevante en passende naam.

Wat is een relevante naam?

Ik heb een afbeelding gedownload voor een bepaalde pagina. Ik wil dat deze pagina hoog gaat scoren op de zoekwoorden ‘zelf wijn tappen’. De afbeelding heeft oorspronkelijk als naam: ‘farm-884483.jpg’.

Mij zegt deze naam alleen maar dat het een nummer is. Het zegt Google of Bing nog minder…
Ik hernoem deze afbeelding dus tot de zoekterm waarop ik op deze bepaalde pagina gevonden wil worden: ‘zelf-wijn-tappen’.

2. Gebruik het juiste bestandstype

Waarschijnlijk heb je de onderstaande extensies allemaal al een keer voorbij zien komen achter bestandsnamen van foto’s en afbeeldingen. Extensies zoals GIF, PNG en JPG. En sinds kort kunnen we ook WebP aan het lijstje toevoegen.

Hieronder een kort overzicht zodat je weet wat je waarvoor kunt gebruiken.

  • GIF (Graphics Interchange Format)
    Dit wordt veel gebruikt voor animaties. Populair ook op social media.
    Ik noem het nu maar vergeet dit bestandstype voor je website. Het kwaliteitsverlies is groot als je bestanden verkleint.
  • PNG (Portable Network Graphic)
    Voor logo’s en afbeeldingen welke transparantie of kleurverloop vereisen is dit de perfecte extensie. Veel logo’s welke bovenin het menu staan, zijn bijvoorbeeld een PNG.
    Vanwege de grootte van dit type bestand gebruik je dit bij voorkeur niet te vaak op je site. Zeker niet voor afbeeldingen welke niet met een transparante achtergrond worden weergegeven.
  • JPG (Joint Photographic Experts Group)
    Dit gebruik je bij voorkeur het meest voor je afbeeldingen en foto’s op je website.
  • WebP
    Google heeft een nieuw bestandstype ontwikkeld. WebP (spreek uit als Weppie). Gemiddeld zijn je afbeeldingen 39 procent kleiner hiermee. Helaas, niet alle browsers ondersteunen dit formaat. Dus we moeten even afwachten of dit in de nabije toekomst standaard gaat worden.

3. Het juiste afbeeldingsformaat

Mijn gedownloade afbeelding is 2560 x 1920 pixels en heeft een bestandsgrootte van 1.6 MB. Hier wordt niemand blij van dus ik ga de bestandsafmeting aanpassen.

Hieronder geef ik schematisch een doorsnee website weer. De meeste websites hebben qua inhoud (content) een breedte van 1200/1140 pixels. Het kan dat de banner weergegeven moet worden over de gehele breedte van de browser.

Afbeelding optimalisatie website

Banner over de volledige breedte van je browser: 2000 pixels

Banner volledige breedte website pagina

Banner gekaderd over de gehele breedte van de inhoud van je tekst 1140 / 1200 pixels

Ik wil de door mij gekozen foto als banner. En dit over de volledige breedte van de browser.
Voor die maximale breedte ga ik de afbeelding resizen tot 2000 pixels. De hoogte van 1920 pixels is wel erg hoog voor een banner dus ik ga een stuk uitsnijden van de foto.

Ik gebruik hiervoor Photoshop van Adobe. Nu beschikt lang niet iedereen over Photoshop. Download anders het programma GIMP. In tegenstelling tot Photoshop is dit gratis beschikbaar. Wil je foto’s en afbeeldingen optimaliseren, het werkt nagenoeg vergelijkbaar!

Eerst pas ik via ‘Afbeeldingsgrootte’ de breedte van de afbeelding aan naar 2000 pixels. De afbeelding schaalt evenredig mee dus ik zit nu op 2000 pixels breed en 1500 pixels hoog.

Wil ik een hoogte van 600 pixels aanhouden voor mijn banner, maak ik met de uitsnijtool een selectie van 2000 x 600 pixels en snij deze uit.

Nu kies ik in Photoshop voor ‘exporteren als’. Ik check rechtsboven of de opmaak wel op jpg staat, kies een kwaliteit van 60% en sla het bestand op onder de naam ‘zelf-wijn-tappen’.

Zelf wijn tappen

4. Comprimeren van afbeeldingsbestanden

Ik heb nu mijn banner van 2000 x 600 pixels en deze is 196 kB. Ik probeer de afbeelding nog wat kleiner te maken en haal deze nog even door de website TinPNG. TinyPNG is gratis te gebruiken.

Mijn afbeelding is nu 193 kB en dat is prima voor zo’n brede banner. Ik heb met TinyPNG niet veel winst behaald. Dit komt doordat ik de afbeelding in Photoshop al geoptimaliseerd had. Normaal gesproken zul je versteld staan van het voordeel dat TinyPNG je kan bieden. Dus wil je je afbeeldingen comprimeren, TinyPNG is een aanrader om te gebruiken.

Behalve TinyPNG zijn er andere hulpmiddelen die je kunnen helpen om de grootte van een afbeelding te verkleinen. Kijk ook eens naar ShortPixel, of Resize Image.

In WordPress kun je de gratis plugin Smush downloaden. Als je deze goed hebt ingesteld, verkleint deze automatisch iedere afbeelding welke wordt geupload naar de site.
Standaard zet ItDentity deze plugin in alle WordPress websites welke opgeleverd worden.

afbeelding optimaliseren tinypng

Als ik de banner niet nodig heb over de volledige breedte maar het volstaat om de website breedte aan te houden van 1140 pixels breed, is mijn afbeelding 83 kB. Dat zijn aanzienlijk minder kB’s dan de 193 kB van de bredere banner.

Bedenk dus goed waar je afbeelding moet komen op de site. En hoe groot wil je de afbeelding plaatsen? Gebruik geen afbeeldingen die groter zijn dan dat ze worden afgebeeld. Pas dan afbeelding optimalisatie toe. Dit komt de laadtijd (snelheid) van je website ten goede.

Feitelijk hoef je alleen maar logisch na te denken. Je website is bijvoorbeeld 1200 pixels breed. Wil je een afbeelding welke de helft beslaat van je site dan is 600 pixels voldoende.

Afbeelding optimalisatie

Vuistregel voor bestandsgrootte afbeeldingen

Je kunt de volgende richtlijnen aanhouden om je afbeeldingen voor je website te optimaliseren:

• Volledige breedte website: 120 – 200 kB
• Blog-/nieuwsbericht: 60 – 100 kB
• Afbeelding naast tekst: 50 kB
• Thumbnail: 10 – 20 kB

5. Gebruik de alt tag voor afbeelding optimalisatie

We hebben nu 4 van de 5 stappen doorlopen van de afbeelding optimalisatie:

  1. de afbeelding heeft nu een relevante naam,
  2. het is opgeslagen onder het juiste bestandstype (jpg),
  3. het formaat is aangepast,
  4. de afbeelding is gecomprimeerd.

Rest nog het laatste punt. Als de afbeelding geupload is naar de website dient de alt tag toegevoegd te worden.

Wat is een alt tag?

Een alt tekst is tekst welke toegevoegd wordt aan de afbeelding wanneer de afbeelding niet wordt geladen of weergegeven. Deze alt tags gebruik je om de afbeelding te beschrijven. Zo kan de afbeelding de boodschap overbrengen. Als je afbeelding om welke reden dan ook niet kan worden weergegeven dan komt de alt tekst in beeld.

Alt tags dienen zowel beschrijvend als nuttig te zijn. Hoewel beschrijvend niet wil zeggen dat je volledige zinnen moet gebruiken. Ze dienen kort beschrijvend te zijn. Als je alt tag een relevante zoekterm bevat en je plaatst deze bij eveneens relevante content dan zal dit vóór je werken bij de online vindbaarheid.

Maak geen misbruik van alt tags. Prop ze niet vol met exact matchende zoektermen en gebruik geen hele paragraaftekst voor een alt tag. Doe je dit bij alle afbeeldingen zo, dan gaat dit tégen je werken.

toevoegen alt tag wordpress

Toevoegen van de alt tag in WordPress

Toevoegen van de alt tag in Joomla

Behoefte aan meer informatie over afbeelding optimalisatie?

Ik hoop dat ik in deze blog alles ‘getackeld’ heb voor wat betreft afbeelding optimalisatie. Mis je nog iets of heb je vragen? Mail gerust naar info@itdentity.nl.

Wil je een ander onderwerp aan bod hebben? Ook dan kun je me mailen. Ik neem nieuwe onderwerpen graag op in de ‘blog planning’.

Deel deze blog

Share on facebook
Share on pinterest
Share on whatsapp
Share on twitter
Share on linkedin
Share on email
Share on print

Recente blogs

Scroll naar top