How To Serve Images in Next-Gen Formats in Webflow - WebP
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
Watch video How To Serve Images in Next-Gen Formats in Webflow - WebP online without registration, duration hours minute second in high quality. This video was added by user Samuel Gregory 06 July 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,287 once and liked it 119 people.