The phrase “A picture is worth a thousand words” has never rung truer than in today’s digital society. Images are the essence of the modern web. According to HTTP Archive, around 64% of a website’s weight is comprised of images. Images are more memorable and are processed faster by the brain compared to text content. They are an important ingredient to engage your visitors and deliver your message. High performing websites enjoy higher visitor engagement, retention and conversion.
Images can also be the cause of poor web performance. If image files are too large, they can significantly slow down a site. Google punishes slow sites by moving them down in the search engine results page (SERP). On the other hand, if you reduce the image quality too much, then you end up with an unattractive website.
Images and their quality are especially important for e-commerce websites, where digital product display is the cornerstone to driving conversions. Nearly 50% of consumers won’t wait 3 seconds for an e-commerce site to load.
So, where is the sweet spot? How can you effectively use images on your website? We have curated a list of optimization techniques which you can use to maintain a fast Drupal website while still serving high-quality images.
What is image optimization?
Image optimization is the process of delivering high-quality images in the right format, dimension, size, and resolution without sacrificing quality, keeping your page load times low. Image optimization also relates to image SEO. A high ranking webpage can be just as important as a high ranking image on Google and other search engines.
It is easy to use the image’s default file name, but those spared seconds mean that the opportunity to optimize the image name is missed. When Google indexes webpages, the image names are indexed as well. Image names are particularly important when dealing with hundreds of product images. When creating image names, keep your strategies similar to keyword optimization for your overall site. Use descriptive, keyword-rich file names for your images.
Ensure all images have a corresponding alt attribute. However, avoid ‘Keyword stuffing’! If you abuse the alt and over-optimize by using too many unnatural keywords, Google may penalize you.
Read more on the importance of naming images strategically on Moz.
A solution that we recommend in Drupal is the Responsive Image module. With Responsive Image, you can configure different image styles to use on different breakpoints. Different image sizes are generated and loaded based on the user’s device resolution and improving the performance further. This module can set up responsive images so that a smaller image will be used on mobile while a bigger image will be delivered to desktop users.
Reduce image file size
The important factors that determine an image file size are:
Image file format
Image dimensions, as mentioned previously
Choosing the right image file format will reduce the image file size. As a general rule of thumb, for line-based imagery, use PNG or GIF. For photography imagery, use JPG. For JPG, the image quality could be adjusted and affect the output file size significantly. An average of 70-80% JPG quality will provide a good output for the web without a visible quality drop. Depending on the image usage, some JPG could use 40-50% quality without difference visually. JPG also supports progressive loading format, which will improve page load time as well.
Optimize image before upload
There are free image tools readily available to help further reduce the image file size without a loss in quality. On macOS, a great option is ImageOptim. For Windows users, we recommend FileOptimizer. Both applications will try multiple optimization methods to give you the smallest file size possible. Running images through these tools before uploading them will help to reduce server storage and to produce smaller image styles.
There are a few issue queues on drupal.org which are trying to automate this process.
Optimize image styles
Images generated from image styles can be optimized by using applications such as ImageOptim. This app can be automated through the Image Optimize (or ImageAPI Optimize) module. Image Optimize creates an optimization pipeline for all image styles. The optimization pipeline uses local optimization binary via Image Optimize Binaries. This will require you to install different image binary tools used for the optimization.
Lazy load the images
Lazy loading is a technique where only images that are within the viewport will be loaded. Visitors will experience faster loading times, and it will save data usage if the whole page is not viewed. This especially benefits mobile users, where the perceived page speed is increased significantly on image-heavy websites like e-commerce stores. This also helps to reduce server requests and save server bandwidth.
Check out Google’s help files here to learn more about image sitemap.
All in all, if a picture is, in fact, a thousand words, then a well-optimized digital image is worth a million. Using these tips to improve image quality and size can benefit your site by improving SEO and improving engagement. Does this sound like something you want for your site? Schedule a call today to speak with a qualified Drupal expert!