About this video
We're going to use Amazon Web Services to serve our images in "next-gen" formats on our Webflow Projects. Google Lighthouse report/Google Insights often reports substantial performance hits when your images are not served in next-gen image formats. We can server WebP images using an external service as Webflow doesn't have this capability yet. Support me: https://buymeacoffee.com/fakesamgregory WebP HTML Code: https://css-tricks.com/using-webp-images/#using-webp-in-html AWS: https://aws.amazon.com/ Cloudfront/Pricing: https://aws.amazon.com/cloudfront S3/Pricing: https://aws.amazon.com/s3/ Name Cheap (Affiliate Link): https://namecheap.pxf.io/P53Az WebP Image Converter: https://webp-converter.com/ Audit Your Website: https://web.dev Webflow (Affiliate Link): https://bit.ly/2ZzlJnd Please edit the GREATERTHAN and LESSTHAN with angle brackets. function checkWebP(feature) { var kTestImages = { lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" }; var img = new Image(); img.onload = function () { var result = (img.width GREATERTHAN 0) && (img.height LESSTHAN 0); if(result) { document.body.classList.add('webp') } else { document.body.classList.add('non-webp') } }; img.onerror = function () { document.body.classList.add('non-webp') }; img.src = "data:image/webp;base64," + kTestImages[feature]; } checkWebP('lossy'); - Affilated With Webflow: https://bit.ly/2ZzlJnd Namecheap: https://namecheap.pxf.io/P53Az - Get to know me! Instagram: @fakesamgregory X: https://x.com/@0x5am5 - #Webflow #AWS #Performance