Afbeeldingen optimaliseren

Afbeeldingen-optimalisatie

Wat is het? en waarom moet je dit doen?

Afbeeldingen gebruiken we het liefst zoveel mogelijk. Want ze zorgen voor vertrouwen in je product en/of dienst, waardoor je klanten sneller tot een aankoop over zullen gaan Γ©n ze maken je website een stuk aantrekkelijker.

Maar voordat je de afbeeldingen upload moet je ze eerst optimaliseren. Heel veel foto’s zijn namelijk grote bestanden en wordpress slaat de geΓΌploade foto’s in meerdere formaten op zoals thumbnail, medium, large en origineel. Je snapt het al, al deze formaten nemen al snel veel ruimte in op de server.

Afbeeldingsoptimalisatie houdt in dat we het afbeeldingsbestand verkleinen. Dit kan doormiddel van een plug-in (TinyPNG), via fotosoftware of online via “Online photo resizer and image optimizer”. Omdat ook plug-ins je website trager maken, raad ik je aan om de bestanden via software of online te verkleinen. Mochten er nou afbeeldingen door anderen aan je website worden toegevoegd dan raad ik de plug-in (tinyPNG) aan om te gebruiken. Deze plug-in zorgt er automatisch voor dat de bestanden worden verkleind.

Richtlijn voor het verkleinen van afbeeldingen:

  • Afbeeldingen die je over de volledige breedte van je website wilt tonen, kan je verkleinen tot 2000 pixels breed.
  • Voor de hoogte houd ik dan meestal 1500 pixels aan.
  • Voor de overige afbeeldingen is 1000 pixels breed voldoende.
  • De kwaliteit van de afbeelding verlaag ik maximaal tot 82%.

Als je de bestanden hebt verkleind dan moet je ze een passende naam geven, Een foto met de naam “img-0021” is nietszeggend. Voor SEO optimalisatie geef je het bestand een naam die de foto omschrijft. En als je de foto dan upload in WordPress vergeet dan niet om ook de ‘ALT-tekst’ dezelfde naam te geven. Als het media bestand om een of andere reden niet geladen kan worden dan verschijnt er op die plek de Alt-tekst.

Gebruik je html code dan ziet de code er als volgt uit:
<img src=”link-naar-bestand.jpg” alt=”een tekst die de foto omschrijft” title=”een tekst die de foto omschrijft” width=”1000″ height=”1500″>
De ‘title’ attribuut wordt gebruikt om een tooltip te creΓ«ren, dit houd in dat als je met je muis over een foto gaat de tekst -die je bij de ‘title’ hebt ingevuld- zichtbaar wordt.

Succes met het optimaliseren van je afbeeldingen/foto’s, ik hoop dat mijn uitleg je wat wijzer heeft gemaakt πŸ™‚

Mocht je nou nog vragen hebben, schroom dan niet om ze te stellen! Ik ben er voor jou om al jouw vragen en problemen op het gebied van webdesign op te lossen.

Gratis download: Website checklist
Handige links & plugins
Gratis download: Kleurbetekenis
Berichten:

Geef een reactie