| Refer -> [How to Optimize Images for Web: A Step-By-Step Guide for Better Site Performance | WP Engine](https://wpengine.com/resources/optimize-images-for-web) |
Image optimization is the act of decreasing file size without losing quality.
It’s important for 2 reasons :
- To get faster load times as a result of smaller file size.
- To make the most of the limited server storage for your website.
Steps taken for optimization
Benchmark your site’s speed
Benchmark your site’s speed using tools like PageSpeed and WebPageTest.
Image file type
- JPEG : Best for showing complex colour photographs. Doesn’t work with transparent backgrounds.
- PNG : Used for flat illustrations, icons, logos or images with transparent background.
- GIF : Just…think why would you use this.
Use tools like Photoshop for this purpose.
Resize images before uploading
Crop or resize images with massive resolutions to reduce their size and save disk space.
Use tools like Canva or the built-in image editing software to do this.
Compress images
Compressing images makes their size smaller and doesn’t reduce their quality.
There are 2 types of compression :
- Lossless compression : Maintains same level of quality before and after compression.
- Lossy compression : Discard elements of a photo in a way the human eye won’t notice.
Use tools like TinyPNG for this purpose.
Blur up to load a lower quality image first
Load a lower quality image first to let the user look at something while they wait for the details. One way to do this is to ‘blur up’.