Foto’s verkleinen met squoosh

De impact van het plaatsen van foto’s en afbeeldingen op de performance van een website kan enorm zijn. Sinds Google afgelopen zomer (2018) enkele grote updates in het algoritme heeft doorgevoerd, lijkt de invloed alleen maar groter te worden. Ik spreek uit ervaring als webmaster en contentcreator van een paar websites. What’s up?

Next-gen formats, nieuwe generatie afbeeldingsformaten

Veel mensen weten wel dat je je foto’s moet verkleinen en optimaliseren voordat je ze op de site zet, maar wist je dat Google nu echt een voorkeur heeft voor next-gen formats? Dat zijn bestanden die beter comprimeren, kleiner zijn en sneller laden dan de oude vertrouwde JPG’s en PNG’s. Die nieuwe formats heten bijvoorbeeld JPG2000, JPG XR, MozJPG en WebP.

Nieuwe gratis en online tool om foto’s te resizen

Met de website Squoos.app van Google, kun je je “gewone” .JPG’s en .PNG’s downsizen naar een van die nieuwe formaten. Zo werkt Squoosh:

 
 

Wil je het zelf eens proberen, maar heb je geen goede foto’s? Onderaan deze pagina geef ik je de foto’s die in de video gebruikt zijn, zodat je zelf de test kunt doen.

Niet alle browsers kunnen nextgen images weergeven

Nog even een puntje: de nieuwe formats werken niet met alle browsers. Zo kun je in Safari (Apple) de WebP afbeeldingen niet zien. Op internet zijn nog geen berichten te vinden dat Apple dit in de toekomst wel mogelijk gaat maken. Hoe gebruiken webmasters de WebP images dan? Verschillende CMS’en geven de mogelijkheid om meerdere soorten afbeeldingen in te voeren, voor de verschillende browsers waarmee bezoekers een website kunnen bekijken. Door twee dezelfde foto’s in verschillende bestandsformaten in je site te zetten, wordt de site natuurlijk wel langzamer. Kijk maar eens in je analytics welke browsers jouw bezoekers gebruiken.

Test hoe je afbeeldingen eruit zien in andere browsers

Er zijn handige tools die je kunnen laten zien hoe je website er in een andere browser uitziet. Sommige van deze tools zijn gratis, bijvoorbeeld browsershots.org en deze screenshots browser.

Hoe kom je erachter of de afbeeldingen op je website te groot zijn?

Voor de toekomst weet je hoe het moet, maar wat doe je met alle foto’s en visuals die al op je website staan? Hebben die de juiste afmetingen en indelingen, of is er werk aan de winkel? Google kan je op verschillende manieren helpen om te zien of je afbeeldingen op je site hebt staan die de performance naar beneden halen.

Een hele handige, gratis en recente tool is web.dev. Toets in web.dev de url van je website in en je krijgt een compleet overzicht van de performance van je website, verdeeld over vier aandachtsgebieden. Als je op “view report” klikt, dan kom je op de website van lighthouse, waarop je gedetailleerde informatie over verbeterpunten van je website kunt vinden. Lighthouse geeft precies aan welke afbeeldingen niet het optimale formaat hebben en tot hoever ze verkleind kunnen worden. Zelf heb ik na het verbeteren van alle afbeeldingen op mijn site gemerkt dat ik 10 punten steeg in de performance graadmeter. Overigens geven web.dev en lighthouse ook een heleboel andere verbeterpunten voor je website. Die zou je eens kunnen bespreken met je websitebouwer.

Andere manieren om je afbeeldingen te verkleinen

Er zijn talloze programma’s en websites om je afbeeldingen te verkleinen. Het meest bekend zijn waarschijnlijk Photoshop en Lightroom. Beide kunnen zowel op een mac als op een pc gebruikt worden. Deze programma’s moet je huren tegenwoordig, tegen een kleine vergoeding weliswaar, maar de huur komt wel iedere maand terug.

Exclusief voor pc-gebruikers is IrfanView. Het enige programma dat ik mis op de mac. Het is al jarenlang een van de meest gebruikte viewers en image-converters. Werkt gemakkelijk en overzichtelijk. Je kunt het gratis downloaden.

Macgebruikers hebben de beschikking over automator, dit programma wordt op iedere mac meegeleverd. Daarmee kan je een of meer afbeeldingen van formaat en indeling doen veranderen, ook voor batchverwerking.

Voordeel van Squoosh

Het voordeel van Squoosh boven alle bovenstaande opties is dat je bij Squoosh nog voor het opslaan ziet het nieuwe resultaat gaat worden. Een nadeel dat je wellicht ervaart, is dat je je foto’s een voor een moet uploaden. Dit nadeel kun je ook als een voordeel zien, als je waarde hecht aan de kwaliteit van de afbeelding. Sommige afbeeldingen wil je wellicht meer comprimeren dan andere, omdat er bij de een meer informatie verloren gaat dan bij de ander.

Foto’s verkleinen voor facebook en instagram

Facebook en instagram hebben eigen compressietechnieken die vaak grote afbreuk doen aan de kwaliteit van de originele foto. Fotografen balen ervan. Het is wel mogelijk om je foto’s beter te laten lijken op de originelen. Dit doe je door de foto’s zo optimaal mogelijk aan te leveren. Als je je foto’s voor het uploaden verkleind en in een next gen bestandsformaat zet, dan zal er veel minder kwaliteit verloren gaan. Je kunt dezelfde foto’s gebruiken die je voor je website gecomprimeerd hebt, zoals hierboven beschreven.


Oefenfoto’s

Klik op een foto en je komt op dezelfde foto in groter formaat. Linksboven in de browser, onder “Archief”, kun je de foto bewaren door te klikken op “Bewaar pagina als”. Je krijgt dan een scherm dat je verschillende mogelijkheden voor het opslaan van de afbeelding geeft. Eenmaal opgeslagen, kun je de afbeelding gaan bewerken.

 

 

Foto’s laten maken

Mocht je het laten maken van foto’s of video’s willen uitbesteden, dan doe ik dat graag voor je. Laat het me weten als je vragen hebt.

 
 
Els Edesedes.tv