How To Serve Images in Next-Gen Formats in Webflow - WebP

Опубликовано: 24 Июль 2026
на канале: Samuel Gregory

4,350

119

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-ima...

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