More than 50% of a website weight is caused by images.
Half of the web users expect a website to load within two seconds.
1s delayed page load time decreases 16% visitor & drop conversion of 7%.
Nearly 40% of users abandoning a page after 3 seconds.
Golden Rules for Website Image Optimization
Infographic: Website images optimization tips for better load speed and user experience (UX).
If you want to learn in details you can read – How to Optimize Images for Web (Brief Guide)
Using the correct dimension:
People feel the bigger size image will serve the best. But it is not! Use the exeat dimension it shows on the web.
Here you can see the chart vs necessary vs. unnecessary pixels.
The truth about Resolution factors in image optimization
Most people think that resolution is the quality of an image. DPI and PPI do not work on the web. Moreover, on our test on image optimization, we don’t find any relation to this 72dpi or 92dbi for web images. But, for some cases, images with high DPI create a blurry effect and add KBs. The only thing that matters is pixels.
Using the correct image format:
In particular, file extension aka file formats is relevant to the image size. Each image format has pros and cons. So, you will need to choose it wisely.
Similarly, we recommend using JPEG if there is no need transparent or animated image. Moreover, it also allows for background removing.
Compressing The images:
Generally, you can compress a photo in several ways. There are many tools that allow automating this process. However, you can easily automate this process.
Photoshop, Gimp and some other tools are substantial for manual image editing. Although, there are some free websites and tools that help to achieve the automated ones.
Mainly there are 2 types of compression.
- Lossy compression,
- Lossless compression.
Lossy optimization: It means reducing the image quality for achieving a minimal size.
This will require AB testing. However, studying the end result allows the best optimization.
Lossless optimization: This technique allows optimizing the image without losing quality.
Using Progressive jpg:
Progressive JPEGs can be much fully optimized, resulting in small output size.