Drupal Performance: Image Optimization
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 that 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.
Image Naming
It's 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.
Image Dimensions
In Drupal, you should use and configure image style to output the correct dimensions per the image displayed. If images are too big, you will slow down the page loading time. Mobile users' experiences would especially be hurt. If a bigger image is necessary, place it on a separate page or utilize a popup/Javascript to dynamically load it as needed. If images are too small, then they will get blown up and pixelated, making your website look ugly.
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.
Deliver customer-focused digital experiences that generate results
Reduce Image File Size
The important factors that determine an image file size are:
-
Image file format
-
Image quality
-
Image dimensions, as mentioned previously
-
Color
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.
Our favorite is Image Optimize reSmush.it. This uses the free reSmush.it service to best optimize the images generated in Drupal. The whole process is automated and transparent.
Lazy Load 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.
In Drupal 8, you can install Blazy, which integrates with Blazy Library. Blazy is a lightweight pure JavaScript script for lazy loading and multi-serving images. This works with all techniques previously mentioned.
Image Sitemap
Consider using image sitemaps to help the Google search engine discover images on your website. Sitemaps are especially helpful if your site uses Javascript galleries or image pop-ups to improve the viewing experience. Image sitemaps will help get your images noticed by Google.
Check out Google’s help files here to learn more about image sitemap.
In Drupal 8, Simple XML Sitemap provides the option to generate image sitemap. The support for Media images is still in the works, though.
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? Speak to one of our qualified Drupal experts by scheduling a call below!
Biweekly