The Must-Have Tools for Image Optimization in 2019

The world of image optimization is in a much better place than ever. But, even now, there is still a lot of room for improvement. Especially if you have been using only one solution, thus not looking at the other tools that are available for free.

Over the last couple of years, we have seen the rise of new image formats such as WebP and SVG. And, we have witnessed new and exciting techniques for improving site speed. And yet, images continue to take up most of the web-page weight.

What can you do to ensure that your images stay optimized in accordance with this year’s trends?

This post is going to show you the latest tools, plugins, and resources that will drastically improve your site’s speed and performance.

Ready to roll? Let’s get to it.

1. Image compression is still relevant

I don’t think there is anyone who can say that they don’t need to compress their images. The benefits of compression are so tremendous that it would seem ludicrous to avoid doing it every time you upload a new image.

And one of the best tools for this mission is ShortPixel Image Optimizer.

The ShortPixel WordPress Plugin provides an incredibly potent compression ratio, without sacrificing photo quality. Moreover, ShortPixel will optimize photos as soon as you upload them, so you don’t need to revisit each photo and do it manually.
You can also do things like convert images into WebP format (Google’s love child), and you can resize featured photos on the fly.

And if you don’t have WordPress handy or you simply need a non-WordPress solution, then check out Squoosh by Google. Squoosh is a phenomenal browser-based tool for quickly compressing images. It works with JPG, PNG, SVG, and WebP files.

And best of all, you can do things like image format conversion from JPG to WebP or PNG to WebP. Additionally, you can adjust individual parameters such as Sharpness, Alpha Filters, and Noise to get a satisfying result.

2. Reducing page bloat with image galleries

One of the reasons why web pages accumulate so much weight is because bloggers often forget to augment their photo presentations. You don’t need to bloat up your pages with endless piles of stationary images. Instead, you can use gallery plugins to arrange your photos for easier viewing and better performance. Not only that, a gallery plugin will prevent your pages from loading the full-size photos unless they have been directly requested by the user.

And one of the best plugins that rises to the task is the NextGEN Gallery from Imagely. Not only is their plugin used by millions of WordPress users, it’s also one of the plugins that ShortPixel supports by default.

So, even though you are uploading galleries, ShortPixel will intuitively detect the new uploads, and automatically optimize each image.

NextGEN offers layouts such as slideshows, thumbnails, compact, and list albums. And you can adapt the plugin to pretty much any environment, including eCommerce stores and membership sites.

3.  Using Quicklink to detect images in-viewport

Google is relentless when it comes to promoting any kind of performance optimization. And not only does Google publish extensive papers on performance, they’re also avid contributors to the open-source community.

Quicklink is a library that attempts to streamline page-to-page navigation. Quicklink (once installed) will monitor any active links within the users’ viewport, and prefetch those links during browser idle-time.

Also, the library is built in a way that it can detect whether a visitor is on a fast or a slow broadband connection. As a result, you won’t be forcing large 100MB files down your visitors’ throats.

Fortunately, WP Munich alongside Google has created a WordPress plugin for Quicklink. All you have to do is activate it and the plugin will automatically do the rest.

Last but not least, if you have a lot of internal links on your site and you deal with a lot of image-heavy content, then Quicklink can greatly enhance your site’s performance by prefetching images ahead of time.

4.  Using site-wide prefetching (Browser hints)

So, Google offers a simple solution (Quicklink) to automatically prefetch in-viewport links whenever your readers are idling. But, what if you did site-wide prefetching? This is also known as Resource Hints. With Resource Hints, you can tell the Browser to perform certain tasks in advance.

E.g. You can pre-render a page before a visitor navigates it. And this is beneficial because it literally doubles your website performance.

It’s a completely different user experience to have pages load instantly.

Rather than making site visitors load consecutive pages anew, you can use resource prioritization. This plugin from Sam Perrow simplifies the process a bit. The only way to add Browser Hints is by editing the source code, so having a plugin that lets you do it without the coding side is great.

5.  Instant Page for just-in-time preloading

There is a lot of focus on preloading and prefetching, this being the most potent trend when it comes to any kind of image optimization in 2019. And thanks to such massive growth, more developers are spending time innovating how to implement resource hints in everyday browsing.

One example comes from Alexandre Dieulot who built Instant Page. This wonderful JavaScript library will preload your website links just-in-time, or in other words, whenever a visitor hovers over the link. The goal for this library/snippet is not to provide enormous 1s or 2s boosts to loading times. Rather, Instant Page focuses on minuscule and incremental performance improvements in the 100ms to 500ms range.

Rest assured that page loading times have a tremendous effect on conversion rates and sales in general. Looking at it from this perspective, even the tiniest of improvement can make all the difference.

Conclusion

If your plan is to push image optimization to the edge this year, then the tools discussed in this post will provide great help.

Here’s a quick recap of what we learned:

– Compression is still relevant, and you can automate most compression-related tasks using a plugin.
– There’s no need to share piles of full-size images, and instead, it’s better to use a gallery plugin that can deliver images on-demand.
– Quicklink is a new tool from Google, created to utilize preloading to increase performance optimization.
– Resource Hints can be used to create site-wide preloading and prefetching environments.
– Instant Page implements to-the-second preloading for links/pages that a user has just hovered over. Expect marginal improvements in the 1-2% range.

Let us know in the comments if you have any questions. Happy to point you in the right direction if you’re struggling to understand some of the concepts!

Author bio: Alex Ivanovs has worked with WordPress and other Web Technologies for more than a decade. His work is published in many of the largest editorials and brand websites in the industry. And when Alex is not writing about tech, you’ll find him sharing interesting stories on his portfolio site Stack Diary.

Image 1 by Thomas B. from pixabay.com
Image 2 from shortpixel.com
Image 3 from squoosh.app
Image 4 from imagely.com
Image 5 from github.com
Image 6 from keycdn.com
Image 7 from author
Image 8 from instant.page