Image Optimization
They say, “a picture is worth a thousand words”, which is undoubtedly true. We love to interact with visuals rather than words. The importance of images on e-commerce, travel, and media websites has been increasing over the time. According to HTTP Archive, on an average, around 64% of a website’s weight is comprised of images. If we are able to reduce the size of these images without reducing the image quality, then it will have a direct and positive impact on page load speeds and user-experience of visitors on your websites
Optimizing web images is a process of delivering the high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size.
Image optimization can be done in different ways, be it by resizing the images, caching, or by compressing the size. Enter ImageKit, an intelligent Image Optimization tool, which optimizes images using an intelligent compression algorithm. Combined with a global content delivery network (CDN) for faster delivery, it can improve your website performance significantly.
Importance of Optimizing Images on Website:
Improves Page Load Speed
Improves SEO Ranking
Boost Conversions
Image Optimization Methods:
Image Compression
Vector Images
Image Caching
Image optimization techniques & examples for websites and mobile websites:
1. Resize images (saves 50% image bandwidth)
Resizing is the most important image optimization. A large image takes up more bandwidth to load as compared to a smaller image. So, if you can use a smaller image at a particular place on your website, then use that instead of a larger image. Consider these images for an example. The smaller image is 1/5th the size of the original image and can be used wherever you need product thumbnails.
Full-size image:
Resized image
2. Compress images (saves 40% image bandwidth)
With the improvements in camera quality and resolution, images have become huge in terms of size. But, in almost all the cases, you wouldn't need such a heavy, high quality image on your website. You can safely compress an image to a lower quality level because human
Original image
Compressed image
Compressed & Resized image
3. Choose correct file format (saves 30% image bandwidth)
As explained in this post choosing the appropriate file format can have a lot of positive impact on reducing the image size. JPEG images work best for photograph-like images whereas PNGs work best for logos, textual banners etc. WebP is a new format that has the best of all image formats but relatively poor cross-browser support.
JPG image
PNG image
4. Lazy loading of images
Even if you have to show 100 product images on one page, you need not start loading all the 100 images at the very beginning. Because the user can see, let's say, only 20 images at a time on his screen. Thus, the remaining 80 images can be loaded later. May be once the user scrolls down on the page, and when these images (or their containers) start appearing on the user's screen, you can load the next set of images.
This can be implemented by writing some Javascript or using a plugin JS library like LazyLoad.
5. Optimize image delivery
Your image servers or storage will be located in one particular city. Whereas your users are located in a lot of different cities. Use a Content Delivery Network to deliver your images. It will not only make image delivery faster across the globe but, also reduce the load on your image server.
Priya Kesharwani [MBA]
Marketing Manager
https://www.portrait-business-woman.com/2022/07/priya-kesharwani.html
priya.aircrews@gmail.com
aircrews.priya@gmail.com
.jpg)
.jpg)
.jpg)
.jpeg)
.jpeg)
.jpeg)
.jpg)