EEN IT EXPERT NODIG VOOR JE ZAAK OF WEBSITE?

Tech tips: Optimaliseer je afbeeldingen nu!

04/03/2021

v

0

Geschreven door: jurgen

Waarom moet je optimaliseren?

Als je zelf foto’s neemt met een goed toestel of afbeeldingen download van een gratis of betalende website, zijn deze meestal van een zeer goede kwaliteit (=grote afbeelding met een hoge resolutie). Wel om deze afbeeldingen te gebruiken op een website is deze hoge resolutie evenals deze grootte absoluut niet nodig. En als je deze foto’s op deze manier zou gebruiken, zullen ze het laden van de pagina waarop ze staan geweldig vertragen. Vandaar de noodzaak aan optimalisatie.

rose flower 4124026 640

DUS: NOOIT FOTO’S ZOMAAR UPLOADEN NAAR UW SITE!

WANT OPTMALISATIE ZORGT VOOR:

Verbetering van de laadtijd van de pagina.

Verbetering van de ranking in Google, want Google heeft graag snelle websites.

Verbetering van de ‘user experience’; je gebruikers hebben ook graag dat pagina’s snel laden.

Welke soort afbeeldingen?

Welk formaat2
Wanneer gebruik je welke afbeelding? Je leest het hieronder.

Als je een beetje rondsurft en wat opzoekingen doet zal je wel zien dat er een hele boel soorten afbeeldingen zijn. Ik ga het voor dit artikel houden bij DRIE soorten. Ik geef je ook meteen mee wanneer je ze best gebruikt en wat de na- en voordelen zijn van elk van hen. Je vindt ze hieronder in alfabetische volgorde

JPG (of JPEG): Afkorting voor ‘Joint Photographic Expert Group’. Dit is wellicht het meest gebruikte afbeeldingsformaat. Het kan dienen voor allerlei soorten afbeeldingen en foto’s. Het merendeel van de afbeeldingen op je website zullen waarschijnlijk van het JPG formaat zijn. Ze hebben als voordeel dat ze meestal iets kleiner zijn dan het PNG formaat dat hieronder besproken wordt.

PNG: Afkorting voor ‘Portable Network Graphics’. Dit soort afbeeldingen zul je minder tegenkomen, maar misschien zijn er toch wel enkele aanwezig op je website. Het nadeel ken je al, ze zijn iets groter dan de JPG afbeeldingen MAAR hebben als grote voordeel dat je ze transparant kan maken (dat kan je niet met een JPG afbeelding).

WebP: Afkorting van WebPhotos of WebPictures. Een bestandsformaat dat ontwikkeld werd door Google en kunnen ook om met transparantie (zoals PNG). Het grote voordeel is dat de bestanden gemiddeld 26% kleiner zijn dan een PNG bestand en van 25% tot 34% kleiner dan JPG bestanden. Bovendien kan bij het gebruik van bepaalde transparantiemodellen de afbeelding 3 keer kleiner zijn dan een PNG bestand. En waarom schreef ik dat je vooral JPG bestanden op je website zal vinden? Wel omdat WebP niet door ALLE browsers ondersteund wordt. De Safari browser die de standaard browser is op Apple producten (iPhone, iPad, computers met MacOS) kan niet omgaan met WebP.

JPG: Voor alle afbeeldingen/foto’s waar je geen transparantie nodig hebt

PNG: Voor alle afbeeldingen (logo’s, icoontjes, ….) waar je transparantie nodig hebt

WebP: Door het feit dat niet alle browsers dit ondersteunen, dien je dan dus terug te vallen op JPG. Indien je je hosting via mij geregeld hebt, zorg ik ervoor dat je afbeeldingen ook in WebP formaat aangeboden worden aan de browsers die het ondersteunen. Met als gevolg de voordelen van snelheidswinst!

Optimalisatie-instellingen

Zoals reeds beschreven in de introductie is optimalisatie noodzakelijk om je website op bepaalde punten te verbeteren. We hebben ook de hoge resolutie van de afbeeldingen niet nodig op ons computerscherm (of smartphone of tablet). Enkele instellingen die we kunnen aanpakken:

De grootte
Als we over de resolutie van een afbeelding spreken hebben we het over pixels (px). Dit wordt weergegeven in 2 getallen: Breedte x Hoogte. De belangrijke factor voor onze website(s) is de breedte. Als je de verhouding van je afbeelding of foto wil bewaren (wat meestal het geval is) zal de hoogte dus automatisch mee aangepast worden. Ikzelf kies altijd voor een breedte van minimum 1080 pixels (breed dus). Behalve als het gaat om een afbeelding die de volledige breedte van je pagina moet bedekken. Dan kies je voor minimum 1280 pixels maar idealiter voor 1920 pixels (breed).

De resolutie
De resolutie van een afbeelding wordt uitgedrukt in dpi, afkorting voor ‘Dots Per Inch’. In functie van het gebruik (afdrukken, fotoprints, schermgebruik,…) kan een hoge resolutie noodzakelijk zijn. Voor schermgebruik volstaat 72 dpi.

Kwaliteit
De meeste van de afbeeldingen in hoge resolutie zijn in zo’n danig goede kwaliteit dat er bij het comprimeren nog wat kan beknibbeld worden op de kwaliteit. Dit geldt zowel voor de JPG als de PNG afbeeldingen. Je kan gerust de kwaliteit verlagen naar 80% zonder al te veel aan kwaliteit in te boeten.

Grootte: 1080 (behalve bij volledige breedte dan 1920) pixels

Resolutie: 72 dpi

Kwaliteit: 80%

Hoe doe je dat?

Er zijn twee verschillende manieren om je afbeelding te optimaliseren. Ik bespreek ze hieronder.

De toepassing of applicatie:

Er zijn verschillende grafische toepassingen die je kan gebruiken om afbeeldingen te optimaliseren. Sommigen kosten veel geld en anderen zijn gewoon gratis (open source). De meest gekende is waarschijnlijk Photoshop van Adobe en dat is meteen ook een dure vogel, maar als je de licentie al hebt kan je vanuit deze toepassing gebruik maken van de ‘Save for Web’ optie. Hieronder een lijstje met nog enkele toepassingen die ik zelf ken of gebruik(te). Ik zet er ook even bij wat de prijs is voor de toepassing.

GIMP: De photoshop van de opensource, een schatkist aan mogelijkheden en dat volledig gratis!
Paint.Net: Ook een open source oplossing, niet te verwarren met het standaard Windows paint pakket. Iets makkelijker om mee te werken, en ook zeer veel mogelijkheden.
Krita: Nog een open source oplossing (die ook werkt op Mac & Linux).
Affinity photo: Dit is zeker een concurrent voor de hierboven genoemde photoshop.
Affinity photo kan trouwens photoshop bestanden openen! Voor de prijs moet je het ook niet laten 54.99 EUR voor Windows of Mac. De iPad versie kost slechts 21.99 EUR.

Online:

Hier zijn ook enkele mogelijkheden, ik zet er 2 hieronder (met mijn bemerkingen) die je kan gebruiken en je kunnen helpen om je afbeeldingen te optimaliseren:

TinyPNG: Ondanks het feit dat er PNG in de naam staat, kan je via deze website zowel PNG als JPG bestanden optimaliseren en nog wel 20 tegelijk. De beperking is de groote van de bestanden die je er kan uploaden (max. 5MB). De grootte (in pixels) wordt hier echter NIET aangepakt. Je zal dus eerst je afbeelding moeten resizen naar de grootte die je wenst en dan optimaliseren met de panda (klik op de link naar TinyPNG om te zien wat ik bedoel ;-)).
Resize Images: Deze site heeft heel wat meer opties dan TinyPNG. Je kan er ook meerdere bestanden uploaden en bovendien ook de grootte aanpassen (kijk zeker eens bij de advanced options!).

Er is GEEN reden om je afbeeldingen niet te optimaliseren. Mocht het niet duidelijk zijn, of heb je zelf andere tips, aarzel dan niet om te reageren!



Happy crunching!
Jurgen

Dit vind je misschien ook interessant

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *