{"componentChunkName":"component---src-templates-post-index-js","path":"/nl/blog/afbeeldingen-optimaliseren-next-gen-formaat/","result":{"data":{"site":{"siteMetadata":{"logo":"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png","siteUrl":"https://afosto.com","siteName":"Afosto.com","twitter":"https://twitter.com/afosto","facebook":"https://twitter.com/afosto","company":{"foundingDate":"2014","founders":["Tjeuke horsten","Peter Bakker"],"phoneNumber":"050 711 95 19","email":"support@afosto.com"},"address":{"streetAddress":"Kieler Bocht 15C","locality":"Groningen","region":"GR","postalCode":"9723 JA","country":"NL"}}},"strapi":{"blog":{"title":"Afbeeldingen optimaliseren in next-gen formaat - Quicq","slug":"afbeeldingen-optimaliseren-next-gen-formaat","id":"2","locale":"nl-NL","localizations":[],"seo_title":"Snellere website door je afbeeldingen te optimaliseren in next gen formaat | Afosto.com","seo_description":"Ben je opzoek naar een manier om je website sneller te laten laden? Lees dan deze blog over het optimaliseren van je afbeeldingen. In deze blog leggen we uit hoe je je afbeeldingen kunt comprimeren en kunt serveren in het WebP formaat. Dit zorgt voor een aanzienlijke besparing op de grootte van je website pagina's wat zorgt voor een betere laadtijd. ","reading_time":"00:03:00.000","published_at":"2021-02-26T16:27:56.703Z","author":"Ton","updated_at":"2022-05-20T11:10:03.294Z","body":"## Quicq\n\nIn 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](/nl/apps/quicq/).\n\n## Waarom afbeeldingen optimaliseren?\n\nAfbeeldingen 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.\n\n## Wat zijn next-gen afbeeldingen?\n\nNext-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).\n\nVia de tool: [https://developers.google.com/speed/pagespeed/insi...](https://developers.google.com/speed/pagespeed/insights/) kan getest worden hoeveel tijd er bespaard kan worden op de laadtijd door over te stappen naar andere bestandstypes voor uw afbeeldingen.\n\n## Welke bestandsformaten zijn next-gen volgens Google?\n\nGoogle 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...](https://developers.google.com/web/tools/lighthouse/audits/webp) kunt lezen gelden deze afbeeldingen voor Google als next gen:\n\n- [AVIF](/nl/blog/avif-vs-webp-formaat/)\n- [WebP](/nl/blog/wat-is-webp/)\n- JPEG 2000\n- JPEG XR\n- JPEG XL\n\n\nAfhankelijk 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.\n\n## Hoeveel laadtijd scheelt het mij als ik mijn afbeeldingen in next gen aanbiedt t.o.v. mijn huidige afbeeldingen?\n\nVoor 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/](https://www.go-britain.nl/schoenen/)\n\nDit leverde een besparing op van maar liefst 13 seconden! Zie hier de resultaten van Webpagetest.org:\n\n**Voor:** [http://webpagetest.org/result/190617_1...](http://webpagetest.org/result/190617_1B_3f8d406dbfc409e952d38ab2e3e7eeae/)\n\n![s_5D9E7F7FB12E14F78F62F8DCE814D8B2FF7034BBA9A3BE274037C32730219EDB_1560865219778_image.png](https://paper-attachments.dropbox.com/s_5D9E7F7FB12E14F78F62F8DCE814D8B2FF7034BBA9A3BE274037C32730219EDB_1560865219778_image.png)\n\n**Na:** [http://webpagetest.org/result/190617_X...](http://webpagetest.org/result/190617_XT_a4a030b141cf8be76eb89b99b93db350/)\n\n![s_5D9E7F7FB12E14F78F62F8DCE814D8B2FF7034BBA9A3BE274037C32730219EDB_1560865246368_image.png](https://paper-attachments.dropbox.com/s_5D9E7F7FB12E14F78F62F8DCE814D8B2FF7034BBA9A3BE274037C32730219EDB_1560865246368_image.png)\n\nDe page size is hiermee ook van 7.904kb terug gebracht naar 914kb een aanzienlijke besparing van 88,4%\n\n## Wat zijn de voordelen van WebP, JPEG 2000, JPEG XR en AVIF afbeeldingen via deze tool?\n\nHieronder een opsomming van de voordelen van het tonen van afbeeldingen in het next-gen formaat:\n\n- Creëer de beste ervaring met afbeeldingen op elk apparaat.\n\n- 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.\n\n- Creëer verschillende varianten vanuit 1 basisafbeelding (formaten, overlays, tekst, watermerken).\n\n- Versnel asset delivery wereldwijd door middel van een best-in-class CDN.\n\n- Vervang meerdere afbeeldingsmanagement tools met 1 complete oplossing.\n\nDe oude flow is als volgt:\n\n- De klant upload een afbeelding\n\n- Afosto slaat de afbeelding op in 5 vaste formaten\n\n- Wij creëren een job om de afbeelding te optimaliseren.\n\n- Deze job optimaliseert de jpg: bijvoorbeeld door hem progressive te maken en onnodige elementen er af te strippen\n\n- De afbeelding wordt gebruikt in webshop\n\n## Hoe is dit bij Afosto geregeld?\n\nAfosto heeft een [losse service](/nl/apps/quicq/) 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.  \n\n## Wat zijn de kosten voor het gebruik van deze tool?\n\n14 dagen gratis! Alle abonnementen hebben een gratis proefperiode van 14 dagen. \n\nTevens zijn de 1e 100.000 optimalisaties en 25GB aan bandwith gratis, iedere maand, voor altijd! \n\nIndien 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.\n\n\n**Files - Image processing**\n\n€0.01 per 100\n\n**Files - Transfer** **mb**\n\n€0.23 per 1000\n\n**Ter illustratie:**\n\nVoor een website in de meubelbranche met 11.000 bezoekers zijn de kosten ongeveer € 20 per maand.\n\nVoor een website in de fashion retail met 40.000 bezoekers per maand en veel afbeeldingen zijn de kosten circa € 120,- per maand.\n\n## Meer weten?\n\nWil je ook je afbeeldingen optimaliseren, je SEO verbeteren en een snellere website? \n\nBekijk dan alle informatie over Quicq op [deze pagina](/nl/apps/quicq/) of [maak direct een account aan](/nl/apps/quicq/registreren/)","primary_image":{"url":"https://qcqcdn.com/afosto/Quicq_banner_931c054f8b/Quicq_banner_931c054f8b.jpeg"},"blocks":[{"title":"Hoe kan je je afbeeldingen optimaliseren voor je website? ","contents":[{"body":"Het kan op twee manieren. Handmatig of automatisch. Handmatig kan door je afbeeldingen van je website te downloaden te bewerken in afbeelding software. Zoals bijvoorbeeld Photoshop en ze daarna weer uploaden op je website. Automatisch kan door slimme tools zoals bijvoorbeeld Quicq van Afosto. Waarmee alle afbeeldingen van je website automatisch in het kleinst mogelijke formaat door middel van een CDN (Content Delivery Network) worden geserveerd op je website."}]},{"title":"Waarom moet ik foto's optimaliseren? ","contents":[{"body":"Als je je foto's verkleind dan zorg je ervoor dat je website pagina veel sneller laadt. Klanten gaan snel naar een concurrent als ze te lang moeten wachten op je website. Dus als je te veel ruimte besteed aan foto's duurt het heel lang voordat je website geladen is. Door je foto's kleiner te maken voorkom je dit."}]},{"title":null,"contents":[{"body":null}]}]}}},"pageContext":{"slug":"/nl/blog/afbeeldingen-optimaliseren-next-gen-formaat/","id":2,"locale":"nl-NL"}},"staticQueryHashes":["4130126704","494587200"]}