Complementing Lazy Loading with Image Compression

Over the past few months, we have talked up the importance of image compression. Whether in Joomla , WordPress, Drupal or any other CMS, image compression improve the page weight, therefore the global loading time. On the other hand image lazy loading facilitates browsing your website by postponing image loading until when your readers get to images.

By postponing image loading, mobile readers can save on their data plan. Everyone else benefits from faster loading times, which in turn boosts your SEO score. The positive impact of lazy loading is significant enough that Google Chrome is planning to adopt the technique natively in future updates.

Image lazy loading is not the be-all and end-all solution to all blog loading woes. In some cases, you need to preload images. In other cases, you have large images that take too long to load. What is common in these scenarios is the fact that images have the final say on loading times. This is where image compression comes in.

Diligent Image Compression

Image lazy loading postpones when pictures are downloaded until they are needed. The time that it takes to download images depends on how big the image is - whether a few kilobytes or megabytes in size. Image compression hastens the actual downloading process by reducing the size of images. Why lazy load full-sized images when you could lazy load compressed images?

ImageRecycle is takes on the role of the image optimizer. ImageRecycle is designed to reduce the size of images without compromising on quality. Images comprise some of the most common and large elements in modern web pages. Reducing their size means paying for less storage space and a faster browsing experience. The effects are astounding. I would add that the effect are even more impressive when the lazy loading uses advanced technique like preloading viewport, meaning that one or two screen height have already their images preloaded.

ImageRecycle can be used in any project thanks to a handy API, but you don't have to be technically-minded to use ImageRecycle. The image optimizer is part of two plugins that help you optimize your WordPress and Joomla blogs: WP Speed of Light and Speed Cache and can be used on almost any platform with the PHP image compression script.

The process to use ImageRecycle in any of these two plugins or in the script is relatively straightforward. First, you need to activate a free trial of ImageRecycle or buy a subscription. Then, install and activate the WordPress or Joomla extensions and the ImageRecycle plugin, and add your ImageRecycle API key and secret in the settings page. Once you successfully activate your ImageRecycle account, you can harness its benefits without having to leave WordPress, Joomla, opencart or any CMS.

If this is the first time you are using ImageRecycle in your website, then you can immediately get all your media files up to speed. With the plugin activated, you can compress all images and even PDF files in bulk right away. In the future, you can optimize files individually or compress media in bulk. Best of all, this process happens in the background.

Fine-Tuning Image Compression

Being able to optimize all images is a blessing, but ImageRecycle's biggest show of strength is its control. With ImageRecycle, image optimization is given a whole new dimension of control. You can include specific media folders for compression, leaving other images in their original state.

You can even specify the level of compression independently for different file types - PDF, PNG, JPG and GIF files. The compression levels range from best saving, cutting file sizes by up to 80%, to the less permanent original quality level, to no compression at all.

In some cases, you might want to precede image compression by a preliminary resizing step. Consider uploading images that have huge dimensions to a blog that does not focus extensively on media. These images are likely to be scaled down when rendered in the frontend anyway.

Most worryingly, these large images hog too much space and need to be downloaded in their entirety to be displayed. ImageRecycle lets you automatically rescale images to a maximum width or height to avoid storing large images that have a detrimental effect on your blog.

Lazy loading is a good solution to curb loading times on your blog, but sometimes it can be almost superficial - a temporary speed-up of webpages. Image compression complements lazy loading by making it fully effective through image optimization. Still undecided, or excited to give image compression a go? Try ImageRecycle for yourself with a free trial!