Hoe kom je er nou achter wat het beste formaat voor je plaatjes is als jouw website deze allemaal handig op het juiste formaat weergeeft.

Je lijkt er niets voor te hoeven doen, het gaat helemaal vanzelf. Maar is dat wel zo?

We gaan het in deze post even alleen in op de beelden die niet over de volle breedte van een scherm worden geschaald. Ze zijn op een desktop op hun maximale grootte, hoe groot het scherm ook is.

Wij kunnen dit bijv laten zien met de kleine foto-tjes die ik op mijn pagina “cursus WordPress” heb staan, van de testimonials. Deze foto-tjes blijven allemaal gelijk. Nu heb ik ze niet optimaal ingevuld. Ze zijn groter geupload dan ze eigenlijk hoeven te zijn.

De beelden worden voordat ze worden getoond, geschaald naar een kleiner formaat en hierdoor laadt je pagina langzamer.

Om te achterhalen hoe groot je de beelden dan wel moet uploaden, kun je de volgende stappen volgen.

  1. Gebruik de (Google) Chrome browser voor de meest eenvoudige weergave.
  2. Ga met je muis naar een plaatje op je website die op desktop dezelfde maat behoudt, ook al kijk je op een heel breed scherm. (De breedte van jouw website heeft dus een bepaald maximum.)
  3. Klik op je rechtmuisknop als je op het plaatje staat en klik dan op ‘Inspect’Screen Shot 2016-04-22 at 15.55.17
  4. Dan hangt het er een beetje vanaf wat de instellingen zijn van je browser, maar waarschijnlijk zie je nu allemaal enge code aan de rechterkant van je scherm verschijnen. Aangezien dit plaatje een achtergrond afbeelding is, zie ik de afmeting als ik met de muis over de link ga die staat als “background-image: url(……..). Hieronder zie je bijv dat dit 492 x 492 pixels is.

Goed WordPress Thema voor SEO & super handig

Divi theme

Screen Shot 2016-04-22 at 15.58.09

6. Maar wat is er nou eigenlijk echt nodig? Wordt dit beeld geschaald om in dit vakje te passen? Ja! En dat kun je zien door met je muis over het rechter iets donkerder grijze gedeelte te gaan. Zie de oranje pijl hieronder.

verbeter_beeld_voor_laadtijd

Extra tip: sla foto’s altijd op als .JPG formaat. Dan zijn ze het kleinste en het liefst, indien je het programma hebt die dit kan, ook geoptimaliseerd voor het web (bijv. via Photoshop). Extra tip: sla foto’s altijd op als .JPG formaat. Dan zijn ze het kleinste en het liefst, indien je het programma hebt die dit kan, ook geoptimaliseerd voor het web (bijv. via Photoshop).

Ik kan nog een voorbeeld geven van een plaatje dat voor desktop een beter ideale grootte zou kunnen zijn voor laadtijd waarbij het geen achtergrond afbeelding is. Bijvoorbeeld op Citymom.nl op de inspiratiepagina zouden de beelden ook iets kleiner mogen worden geupload, want hoe ver ik het beeld ook uitrek op mijn enorme scherm, het beeld wordt niet groter. Dus het heeft geen groter beeld nodig (en het wordt ook niet nog op een vervolgpagina gebruikt op het grote formaat).

beeld_laadtijd_website

Hier zie je dus als je rechts over het donkergrijze veld heen gaat met je muis, dat er een plaatje oppopt waarvan je het formaat wilt zien. Dan zie je dat hierbij staat 320 x 320 px (Natural: 500 x 500px). Dit betekent dat het origineel is geupload op 500 x 500 px, maar dat het slechts 320 x 320 px hoeft te zijn. Door deze verandering aan te brengen zal deze pagina weer een stukje sneller gaan laden.

Succes met het verbeteren van de plaatjes op je site.

Laatste tip voor snelle aanpassingen van de foto:

  1. Ga je muis naar de eerste link in het donkergrijze veld en klik op je rechtermuisknopverander_beeld_op_je_site_snelheid
  2. Klik op je rechtermuisknop als je op het plaatje staat en klik op ‘Save Image as’.verander beeld site snelheid

Sla het beeld op en open het met een beeld bewerk programma en verander het formaat. Je kunt hiervoor ook mijn E-book downloaden.

This will close in 20 seconds