Afbeeldingen Optimaliseren in Next-Gen formaat - Quicq

Quicq

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.io. 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:

- WebP

- JPEG 2000

- JPEG XR

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_1B_3f8d406dbfc409e952d38ab2e3e7eeae/

Na: http://webpagetest.org/result/190617_XT_a4a030b141...

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 en JPEG XR 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?

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? Neem dan contact op met Afosto via support@afosto.com of bel ons op 050 711 95 19