Image Optimization
Whether you're building your own website or creating website content for a company, it's crucial to understand the importance of image optimization. Image optimization ensures an image on a website is in the correct format, dimension and resolution for any platform while also keeping the smallest possible file size.
By using optimized images, it allows your website to have a faster performance, the images can be ranked higher in Google Images and it improves the overall search engine optimization (SEO) of your website.
How to Optimize
To get started on optimizing my image, the first step I did was create a copy of my image and place it in Squoosh. Here, I optimized the image by choosing a Browser JPEG format and bringing the quality down by 83%. This brought the file size from 443 KB (443,117 bytes) to 73 KB (73,199 bytes). The file size was reduced by 369,918 bytes! The image size remained at 900 x 600 pixels for both images.
After optimizing the image in Squoosh, I then optimized the image even further by dropping it in ImageOptim to remove extra bloated metadata without losing the image quality. Other optimization and compression platforms include Adobe PhotoShop, Adobe Illustrator and TinyPNG.
The Difference
Before the image was optimized, the file size was very large with over 443k bytes while the optimized image is a smaller size with over 73k bytes. When both images are zoomed out, it's hard to notice a difference. The zoomed image to the left is the original image while the zoomed image on the far right is the optimized image. The quality of the optimized image zoomed in is slightly more pixilated. However, the quality doesn't visibly change much when a screen size is shifted.
Conclusion
Optimizing images is a simple, yet effective way of uploading quality images onto a website. By ensuring the content being uploaded is the best quality it could be and can attract the most amount of traffic to your page, the faster your website will build against other competitors!