Drupal website image optimization as one of recipes for good speed

At first glance, interesting and high-quality images are your website’s best friends. Images often decide whether a busy user will even give you a second glance.

They attract, they convince, and they carry your message. However, there’s also another side of the coin — images can significantly slow down your website’s loading speed. Does it mean you have to sacrifice them and do without their powers of attraction? Not at all! What you need is the right image optimization. Then both sides of the coin will be lucky for you!

Image optimization services for Drupal websites

While discovering what a particular site needs to unfold its wings and gain speed, we regularly come across unoptimized image issues. We find them in the process of Drupal website performance audit (alongside issues related to caching, extraneous modules, and more). We can also do the analysis of images alone, and see what exactly they need for optimization.

And, of course, we bring all these recommendations to life. Usually, image optimization services deal with the permanent images on Drupal websites, not the ones uploaded by users. They include logos, design elements, and so on. The price depends on the amount of images and their size.

Drupal has lots of methods to optimize images that deal with the ways the images are loaded, as well as with their actual size reduction. To implement it all, there are plenty of ready-made Drupal modules, but sometimes custom solutions work better. So let’s look at some of these methods!

Some methods for optimizing Drupal website images

• CSS sprites

Organized into CSS sprites, multiple images can be served in one HTTP request. Fewer requests equal better performance! This idea has its roots in videogames. For creating sprites on Drupal websites, modules like the CSS Sprite Generator and the Spritesheets can be a great help.

• Base64

To continue the topic of reducing the number of requests to the server, we should mention the technique of putting your images into the Base64 encoding format and embedding them directly in your CSS. Compared to just one additional request in cases with CSS sprites, Base64 means zero requests! However, it should be noted that the files are a little bit larger, although GZIP compression helps with this.

• “Lazy” images

An interesting technique to save your website’s energy is to make your images “lazy” by letting them upload only when they appear in a user’s view on the screen. We described it as an example of the Image Lazyloader module. In addition, there are similar modules like Lazyload, Lazy Image Loader, Block Lazyloader, Node Lazyloader, Jail, and more.

• Responsive images

It’s important to take care how images are displayed on the small screens of mobile devices with different resolution. Mobile users will be grateful! One of the ways to deal with it in Drupal is to use Drupal 7’s Picture module. The respective Drupal 8’s functionality is now included in the core.

• Image size

Drupal websites can also enjoy various ways of actual image size optimization. Among them, there is a toolkit for ImageAPI called ImageAPI Optimize module, with a whole ecosystem of useful modules around it. It lets you optimize your images without losses, and thus increase loading speed.

Final Thoughts

There is no other website like yours, so there is no standard image optimization solution. But the website support specialists will choose what works best for you and turn images into your website’s best friends forever!