Afbeeldingen optimaliseren in next-gen formaat

In deze blog leggen we uit wat Next-Gen formaten voor afbeeldingen zijn en wat het doet met de performance van je website als je je afbeeldingen serveert via dit formaat t.o.v. de traditionele formaat afbeeldingen. Afosto heeft hiervoor een tool ontwikkeld, genaamd Quicq. Ga direct naar de website van Quicq en begin direct met afbeeldingen optimaliseren.

Waarom afbeeldingen optimaliseren?

Afbeeldingen vormen vaak 60-65% van de totale grootte van een pagina. Een optimalisatie van afbeeldingen zorgt daarom ook voor een grote impact op de totale grootte (en daarom laadtijd) van een pagina.

Wat zijn next-gen afbeeldingen?

Next-gen bestandsformaten zijn de allernieuwste bestandstypes en formaten die beschikbaar zijn op dit moment. Het tonen van afbeeldingen in next-gen bestandstypes zorgt voor een compressie van het bestand die superieur is ten opzichte van oude bestandstypes zoals .jpg en .png. Mede daarom is het 1 van de voornaamste kwaliteitseisen van Google’s Pagespeed Insights (een tool om website snelheid/kwaliteit te testen).

Via de tool: https://developers.google.com/speed/pagespeed/insi… kan getest worden hoeveel tijd er bespaard kan worden op de laadtijd door over te stappen naar andere bestandstypes voor uw afbeeldingen.

Welke bestandsformaten zijn next-gen volgens Google?

Google heeft zelf een stuk geschreven over het aanbieden van afbeeldingen in het next-gen formaat zoals je hier: https://developers.google.com/web/tools/lighthouse… kunt lezen gelden deze afbeeldingen voor Google als next gen:

• AVIF
• WebP
• JPEG 2000
• JPEG XR
• JPEG XL

Afhankelijk van wat voor browser je bezoeker gebruikt moet je andere afbeeldingen tonen op je site. WebP wordt bijvoorbeeld wel ondersteund door Chrome maar niet (goed) door Safari (de browser van de Iphone) terwijl voor JPEG 2000 afbeeldingen het omgekeerde geld.

Hoeveel laadtijd scheelt het mij als ik mijn afbeeldingen in next gen aanbiedt t.o.v. mijn huidige afbeeldingen?

Voor een klant van ons hebben we dezelfde pagina getest voor en nadat de afbeeldingen in next gen werden aangeboden op een collectie pagina van deze klant: https://www.go-britain.nl/schoenen/

Dit leverde een besparing op van maar liefst 13 seconden! Zie hier de resultaten van Webpagetest.org:

Voor: http://webpagetest.org/result/190617_1…

Na: http://webpagetest.org/result/190617_X…

De page size is hiermee ook van 7.904kb terug gebracht naar 914kb een aanzienlijke besparing van 88,4%

Wat zijn de voordelen van WebP, JPEG 2000, JPEG XR en AVIF afbeeldingen via deze tool?

Hieronder een opsomming van de voordelen van het tonen van afbeeldingen in het next-gen formaat:

• Creëer de beste ervaring met afbeeldingen op elk apparaat.
• Verbeter je laadtijd, SEO en conversie. Door intelligente en geavanceerde compressie strippen wij elke onnodige byte van de afbeeldingen. Dit zorgt voor enorme prestatieverbeteringen op het gebied van laadtijd, SEO en conversies.
• Creëer verschillende varianten vanuit 1 basisafbeelding (formaten, overlays, tekst, watermerken).
• Versnel asset delivery wereldwijd door middel van een best-in-class CDN.
• Vervang meerdere afbeeldingsmanagement tools met 1 complete oplossing.

De oude flow is als volgt:

• De klant upload een afbeelding
• Afosto slaat de afbeelding op in 5 vaste formaten
• Wij creëren een job om de afbeelding te optimaliseren.
• Deze job optimaliseert de jpg: bijvoorbeeld door hem progressive te maken en onnodige elementen er af te strippen
• De afbeelding wordt gebruikt in webshop

Hoe is dit bij Afosto geregeld?

Afosto heeft een losse service opgezet waarmee afbeeldingen via een zogeheten proxy kunnen worden geoptimaliseerd, naar o.a. een next-gen format. Hiermee worden de afbeeldingen vanaf een CDN geoptimaliseerd, verkleind en in het juiste formaat teruggestuurd naar de website waardoor je dus een enorme besparing kunt realiseren op je page size en page speed. Beide essentieel voor een goede gebruikservaring van je website en een goede SEO score.

Wat zijn de kosten voor het gebruik van deze tool?

14 dagen gratis! Alle abonnementen hebben een gratis proefperiode van 14 dagen.

Tevens zijn de 1e 100.000 optimalisaties en 25GB aan bandwith gratis, iedere maand, voor altijd!

Indien je meer dan 100.000 optimalisaties of 25GB gebruikt hebben we voordelige pakketten. Onderaan deze pagina vind je een aantal rekenvoorbeelden. Tevens wordt tijdens de gratis proefperiode aangegeven op basis van je daadwerkelijke verbruik hoeveel je na de proefperiode gaat betalen. Zo weet je dus exact wat je gaat betalen na je proefperiode.

Files - Image processing

€0.01 per 100

Files - Transfer mb

€0.23 per 1000

Ter illustratie:

Voor een website in de meubelbranche met 11.000 bezoekers zijn de kosten ongeveer € 20 per maand.

Voor een website in de fashion retail met 40.000 bezoekers per maand en veel afbeeldingen zijn de kosten circa € 120,- per maand.

Meer weten?

Wil je ook je afbeeldingen optimaliseren, je SEO verbeteren en een snellere website?

Bekijk dan alle informatie over Quicq op deze pagina of maak direct een account aan

Geschreven door

Ton Koop

Mijn naam is Ton, mede-eigenaar van Afosto en in het bezit van een masterdiploma in International Business and Management. Bij Afosto fungeer ik als een stuwende kracht achter het ondernemerssucces van onze klanten. Mijn diepgaande expertise in e-commerce en mijn passie voor het uitbouwen van bedrijven zijn fundamenteel in mijn werkwijze om retailers te ondersteunen. Met het geavanceerde headless commerce platform van Afosto bied ik inventieve oplossingen die niet alleen de efficiëntie verhogen, maar ook de groei van bedrijven stimuleren. Ik hou er van om mijn kennis te delen zodat we samen succes kunnen hebben.

Meer van Ton Koop