When a page on your site loads faster it gains better rankings.
The web is full of images and its a key component of every site. According to Google, images make up for more than 60% of data loaded.
With such critical importance, there is huge scope for the optimization of images from SEO purposes. It includes their format, speed of loading, a lazy load of images on your pages and so on.
image: pixabay
Image optimization will include according to their purpose to the visitor, which are – load lighter, load fewer and load faster. These discussed techniques will largely help your site get better rankings due to faster web page loading, especially on image-heavy websites.
1. Use adaptive images and consider resizing them
A larger percentage of your web page weight is on images. You can start using Picturefill or Adaptive Images on your site to save bandwidth and improve page speed.
Make sure to resize your image before uploading to your site and not just adjusting their resolution in CSS or HTML.
For example, if you have a 4000x3000px beautiful product image and you are using its 200x300px image on one page and 800x1000px image on other pages, make sure to reduce it to the maximum required size already before uploading to the server.
The resized images are much smaller than the original image and will load much faster compared to the original one.
Most of the web owners avoid these and its the biggest area of optimization. Third-party services such as ImageKit and one of the good sources to optimize images. It provides real-time URL based resizing and cropping.
2. Optimize your images for latest formats
With a perfect quality output and still to have lower file sizes are achieved by some of the latest image formats such as JPEG 2000, JPEG XR, and WebP. These will reduce the file size by almost up to 30% and supported on almost 75% of the modern websites.
For faster loading results, you can use WebP format wherever possible. Image quality and its size is directly proportionate to each other, however, the latest image compression methods take advantage of limitations of the human eye to distinguish between small changes in color information to compress images.
As a standard, a quality level of 80 to 90 is usually a good tradeoff between image size and quality.
3. Optimize site for mobile view
In today’s scenario, avoiding mobile traffic is a huge potential loss. Make sure to optimize your site for the mobile view. Almost up to 60% of global traffic originates from mobile devices. Here is an amazing article for statistics on Hostingtribunal Site.
And yes, while mobile phones have powerful hardware and faster networks available, still data suggests that mobile data speeds are still much slower than broadband speeds.
You can look for responsive website designs to suit both desktop and mobile and hence responsive images to perfectly fit all the browser sizes.
The ‘sizes’ attribute gives image layout information and the ‘srcset’ attribute gives the image list with the actual width specified for each URL.
Again Pixel Ratio or the DPR value plays important role as far as desktop screen and mobile screens are concerned. Modern mobiles have higher density screens which pack more pixels in the same square inch area.
So image looking fine on regular devices will look slightly blurred on the high-density latest smartphone, having said that, you can load a 2x size image on screens with DPR 2, a 3x image on screens with DPR 3 and the normal size 1x image on other devices. See this tutorial on webdesign.tutsplus.com.
More briefly you can use modern specification called Client Hints, which makes it easier for responsive image settings and cleaner codes.
4. Load fewer necessary resources
Here is a smart technique followed by most of the site owners nowadays. Lazy loading of images. It is not necessary that your page loads all of its images at once. With lazy
loading enabled, the user will only see the images above-the-fold screen, (part of page visible to a visitor at first), rest images can load slowly when the user scroll down to read more.
It is not about using fewer images, but loading fewer of them at once.
Enabling lazy loading is quite simple using JS libraries such as jQuery Lazy. You can also use the latest IntersectionObserver API which is much more efficient than the JS libraries available for lazy loading.
5. Using CDN for image delivery
Far beyond lazy loading, the next concept is to deliver images from a good content delivery network (CDN). CDN delivers files loading from the nearest servers available hence drastically decreasing load time and help your site get higher rankings on search engines.
Content Delivery Networks or CDNs are a set of globally distributed caching / proxy servers that help user load files distributed from a server nearby.
6. Check your website’s performance for image-related issues
One of the great free tools by Google is PageSpeed Insights. It will not only guide you for image optimization but also other issues causing speed lags. Another by Google is Lighthouse. This tool comes integrated into the latest versions of Chrome and can perform a thorough analysis of your site and advice on most of the common issues.
Others good include website analyzer by ImageKit. You can check with any of your website URL and get a complete analysis.
If you want to manage everything at one step such as reducing image quality at a time to time basis, change image formats simultaneously, reduce image dimensions, CDN and serving images over HTTPs at once and re-do everything again, Sirv is a great service.
