Advanced Image Optimization: The Blur Up Technique

In today’s world image optimization is an increasingly important feature of websites.  With most users on their phones using a slow 3g connection, optimizing your images is make or break.  To make things worse, our users’ attention spans are getting shorter, and their expectations are getting higher.  They spend most of their time using sites like Google, Facebook, and other tech giants.  The problem with this is they’re really good at what they do, which makes it more difficult to keep up to par.

If you want to learn more about why page speed optimization is important, check out my last post Adapting to a Mobile World

Luckily for us, these tech giants publish papers and open-source their technological advancements all the time.  It’s just our job to stay current and keep learning to stay at the top of our game alongside these giants.

The “blur-up” technique:

Basically, all modern forms of quality image optimization use some form of the blur up technique.  The idea behind the blur-up technique is deceptively simple, the fact it took so long to become common is actually amazing.

Ready? Here it is: Load a really bad quality small image, then once the page is loaded, load the full-size image

Simple right? The idea is simple but if you’re new to making websites, or not a developer at all,  you might ask how do I actually do this?

There are many ways we can implement this functionality in a website. I’ll go over two in this post.

The easy way (less optimal but still way better than a plain image):

  1. Save two copies of your image, make one of them REALLY small (around 1×1 or 5×5 pixels)
  2. Use the HTML tag <picture> (info)
  3. Inside the picture tag, we first place a <img> tag where the src is the LOW-QUALITY image
  4. After the low-quality image use a <source> tag with the higher quality image
  5. That’s it, now the low-quality image loads first and then when it’s ready it’ll load the high quality

The best way:

This process is similar to the easy way, but with one extra step that might sound a bit intimidating to some developers.  The problem with loading a small compressed image is it’s still using a network request.  This means that you’re still utilizing server resources and hurting load time, especially if you’re running a high traffic site.

So what do we do? We base64 encode the low-quality image. If you want to try base64 encoding an image you can try here or if you’re feeling ambitious you can use what I use: imageSharp.

If you felt a little lost that’s okay, it’s not something that comes easily to anyone.  If you’re worried about your site speed contact us today for a free site audit!

Recent Blog Posts

Contact Us Today!