Een afbeelding optimaliseren voor weergave op een website – (Met squoosh)

Omschrijving

Afbeeldingen gebruiken op een website is een handeling die nog altijd enig ervaring en handigheid vraagt. Onze websites zijn tegenwoordig wel uitgerust met een hoop technische snufjes om hierbij te helpen maar het kan nog net even wat beter. Het spanningsveld van het gebruiken van afbeeldingen op een website zit hem in optimale kwaliteit in verhouding tot het aantal mb’s van een afbeelding en dan in combinatie met de resolutie. Je wilt niet dat een bezoeker een bestand van 50 MB moet downloaden op zijn of haar mobiel voor de website zichtbaar wordt maar aan de andere kant wil je ook mooie, strakke foto’s op de website.

WordPress en de websites van Nordique bevatten technieken die zelf de afbeeldingen creëren van de geüploade afbeelding met de juiste formaten. Dit is natuurlijk hartstikke handig want dan wordt er alleen ingeladen op een plek op de website wat nodig is en niet meer wat de laadtijd van de website ten goede komt. Maar in dit proces comprimeert de techniek ook de afbeelding en kan er enig kwaliteitsverlies optreden. Ons advies is dan ook om wel altijd zo dicht mogelijk bij de maximaal benodigde grootte te uploaden. Daarnaast zijn ook de verhoudingen heel belangrijk (ongeveer 3:1). Anders krijg je het probleem dat hij hem later verkeerd uittrekt waardoor de kwaliteit naar beneden gaat (Upscaling).

Gebruik van software zoals Squoosh

Een handige gratis tool van Google om het optimaliseren voor publiceren te doen is Squoosh https://squoosh.app/. Deze tool is ontwikkeld met de bovenstaande uitdagingen als startpunt. Hiermee kan je heel mooi visueel, door middel van een slider zien wat een aanpassing doet in het aantal MB’s en de kwaliteit en de formaten instellen en de dimensies vasthouden.

Header afbeelding

De ideale uploadgrootte is minimaal: 1920px (breedte) x 600px (hoogte). WordPress zorgt er automatisch voor dat de afbeelding wordt aangepast naar het juiste formaat. De grootte van de headers wordt aangepast aan het scherm van de gebruiker; de afbeelding is altijd de volledige breedte van het scherm en minimaal 450px hoog (desktop, iPad) en 290px op mobiel. In principe maakt het dus niet zoveel uit welk formaat er wordt geupload, zolang de verhoudingen maar (ongeveer) 3:1 zijn.