Images make up 42% of an average web page's total weight.
Image files should be formatted as WebP (next-gen format) or PNG formats, don't use JPG/JPEG as it can't maintain quality properly.
Prefer WebP (next-gen format) over PNG, use PNG only in particular cases when size/quality is better with PNG.
Define critical area of your page, the first visible piece of a page that will be shown without any scrolling, it's usually consists your page's first 900px-1400px for desktop and 900px for mobile.
Images and videos in critical area are very important resources and needs to be shipped very quickly, so optimize them well.
Web platform has the ability to specify an image loading strategy. There are two main strategies: AUTO, EAGER and LAZY, where AUTO refers to EAGER.
Images inside the critical area should load EAGERLY, other images below should load LAZILY.
If you are using webflow, wordpress, or another CMS, you can find this configuration in the image options.
Consult with Engineering to figure this out for your specific tool.
Cover image size of content pages like blog posts, news, articles and landing pages should consist between 30kb-180kb, it's enough to be 60kb-80kb (possible with next-gen WebP format).
Don't compromise the quality too much, there is no practical benefit for resource to be less than 30kb
- WebP: https://tiny-img.com/webp/
- PNG: https://tinypng.com/
- FFmpeg: Command Line tool
-
Simply use WebP tool and see the result (version 1).
-
If results of the 1st step (version 1) is not satisfactory in terms of quality or size, consider optimizing your image with PNG (version 2) tool then use WebP tool on already optimized PNG to get best possible result (version 3).
Compare all three versions to get your size/quality balanced image.