adun.studio
KPCKevin Powell - Community
•Created by Adedoyin Adeyemo Muhammed on 8/25/2023 in #front-end
Image Optimization
1. As others have suggested, having your images in .webp and .avif would help a lot.
Use can use squoosh.app to convert your images to .webp format.
This alone is not enough. You should also use the...
<figure>
<picture>
<source>
<img>
... tags in that order.
This helps you to have 100% control on your image responsiveness. With the <picture><source> tags, you could specify different sizes of your image for specific device breakpoint.
Use squoosh.app to resize your images too.
Always use the right image size for the right breakpoint.
2. To achieve this automatically in all your builds, you can use ShortPixel API, or subscribe to Cloudflare Image Optimization. It's $5/m and comes with extra features.
If you're building with WordPress, you can use EWWW Image Optimization plugin. The pro version comes with extra features and very cheap.
14 replies