Google PageSpeed Insights is a wonderful tool for improving your website. However, it can also be difficult to tell which improvements you should focus on first. For mobile devices, deferring offscreen images can improve page speed significantly. But keeping track of the user’s scroll position can be costly, and you do not want to trade download time for processing time. This post will explore an option using pure JavaScript that does not rely on scroll position.
The Solution
First off, how do you even know if this post applies to you?? You can use an automated reporting tool, such as Lighthouse or PageSpeed Insights, to check for offscree images that should be deferred. In most browsers, you can open the developer console, click on the Audits or Lighthouse tab, and then click Run Report to kick off a new report. Otherwise, you can visit the PageSpeed Insights website and paste in the URL you want to audit. If “Defer offscreen images” is in the list of improvements, then this post will apply to you! Here is an example of what that recommendation looks like in my browser.
Now that you know this post applies to you, we can cover the general approach. The basic idea of this approach is to load in a small base-64 image as a placeholder until the onload event, and then after the onload event we will replace the placeholder with the actual image. This process is based largely on the wonderful post here.
Encoding an Image
For this website, we’re going to use the strangePy logo as the placeholder image. All you need to do is upload your desired image to an encoder website, such as base64-image.de and then copy the output. Below is the raw output of the base64 encoded image.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAQAAABNTyozAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfkAQECMiOITkyMAAADPklEQVR42u3dTUiTcQDH8d9yYQeNioKKoDdJKjoICWGX6jiCTkJh5MFLnTpYBwnxJNQtCuwQVIQQeQkhIgkKqUMlHQSJQupSRNgbFmjZix3G3Nvz7Den25j7fnbZ/v//nmfPl82NqZsEAAAAAEC4Uc0W4TSpPbl2uqzcR112KzWkzeHTlRRotkjb3aB7WhU2SSBJ2qU7qg2eIlDcAV1XJGiCQAnH1B00HC33Uc/DwgJ91zU90ZQa1aa9gSt69EoD5T7IhRhZwJP5U62f205EZ0JWTWt/5k4j87qJqa6qqYgxOjWcNfZczQVu7bN2ayJtpE+nQla2aHxxDmG4KC/bEqcjAXt8VvDWzmVta51mQtaOa23qwur4IT2UNfJJL0LWNmhQK5IXqyPQt4Cxr6GrW3Qz2aU6Am0LGNueY32rzifOVkegtqyRZjXmvMZZnYyfqaRAhTuug2mXa9Vnr3NZMamyAhV+D6rRoNrnjnWHHoS8VEwV1W01Vc8r6XrdUI8e6q+26FCeR12nu9pXOYE2pbwWLsxWdczzGht1q3IeYrvVUPJ9/lJX5QQqvVmd0GMChevWQGU9i5XWFfVKBAozpNPxMwQKMqpW/Y6fJVC2d4rpR+ICgTJNKqYPyYsESvdHRzWWOlDsQGsUyTj1lrtBTp26nz7APSjVBV3KHCJQUr+6sgcJlPBIHUHvFxAo7rVaNRM0QSBJmlBMX4KnCCRN6bDehk0S6J/aNRI+XTnvKOanXxfneY1pvcw1vdQCfQz9jWmBeIgZBDIIZBDIIJBBIINABoGMaOAfF2Wa0fty39ByiepNHqvGcv9HzFLGQ8wgkEEgg0AGgQwCGQQyCGQQyCCQQSCDQAaBDAIZBDIIZBDIIJBBIINABoEMAhkEMghkEMggkEEgg0AGgQwCGQQyCGQQyCCQQSCDQAaBDAIZBDIIZBDIIJBBIINABoEMAhkEMghkEMggkEEgg0AGgQwCGfl9wNLOgO8xqS/q7epPfBrvnOWlSpIuv0A1Wl3i21VX+hTBeIgZBDIIZBDIIJBBIINABoEMAhkEMghkEMggkEEgg0AGgYxo4PcgL57sr/L4WdQ9Thf1aAAAAAAAJfEfaGgQuLoUUnMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDEtMDFUMDI6NTA6MzUrMDE6MDAAFiETAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAxLTAxVDAyOjUwOjM1KzAxOjAwcUuZrwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==
The text above looks lengthy, but we’re not going to be typing that in anywhere. This is what the image looks like when it actually renders on the page (you can even inspect it in your browser to see how it works).
Now that we have the base-64 encoded image ready to go, we can start implementing the image deferral logic into the website. First, we’ll want to write a few lines of Javascript to swap the encoded placeholder image for the proper image. Then, we’ll want to update our webpages to use the encoded placeholder image by default, and add a data-src parameter onto the <img> tag in order to hold the proper image source.
JavaScript
To get things started, we want to write a function to swap out the image source of one image. We should check to make sure the data-src parameter is attached to the image. If it is, then we can set the src attribute from the base-64 encoded placeholder image to the data-src attribute containing the path to the proper image.
function deferImg(image){
if (image.getAttribute('data-src')) {
image.setAttribute('src', image.getAttribute('data-src'));
}
}
Next, we’ll grab all of the images and put them into one array so we can later apply the function to each image in this array.
var images = document.querySelectorAll('img');
We have all the logic set up, but nothing to actually run the new function. This implementation may vary depending on if you are using jQuery or another JavaScript library. For this example, we’ll use pure JavaScript and an event listener for the document.state to be complete.
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') images.forEach(deferImg);
});
That’s it! Just a few lines of JavaScript and we are all set to add the encoded placeholder images. For completeness, here is all of the JavaScript logic put together.
var images = document.querySelectorAll('img');
function deferImg(image){
if (image.getAttribute('data-src')) {
image.setAttribute('src', image.getAttribute('data-src'));
}
}
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') images.forEach(deferImg);
});
HTML
The specific HTML will be a bit different depending on how your site is structured. In general, you should have an image with a src attribute by default, and you want to switch the src value into the data-src parameter, and then set the src to your base-64 encoded placeholder image.
<!-- Before -->
<img src="/img/mstile-144x144.png" >
<!-- After -->
<img data-src="/img/mstile-144x144.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAQAAABNTyozAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfkAQECMiOITkyMAAADPklEQVR42u3dTUiTcQDH8d9yYQeNioKKoDdJKjoICWGX6jiCTkJh5MFLnTpYBwnxJNQtCuwQVIQQeQkhIgkKqUMlHQSJQupSRNgbFmjZix3G3Nvz7Den25j7fnbZ/v//nmfPl82NqZsEAAAAAEC4Uc0W4TSpPbl2uqzcR112KzWkzeHTlRRotkjb3aB7WhU2SSBJ2qU7qg2eIlDcAV1XJGiCQAnH1B00HC33Uc/DwgJ91zU90ZQa1aa9gSt69EoD5T7IhRhZwJP5U62f205EZ0JWTWt/5k4j87qJqa6qqYgxOjWcNfZczQVu7bN2ayJtpE+nQla2aHxxDmG4KC/bEqcjAXt8VvDWzmVta51mQtaOa23qwur4IT2UNfJJL0LWNmhQK5IXqyPQt4Cxr6GrW3Qz2aU6Am0LGNueY32rzifOVkegtqyRZjXmvMZZnYyfqaRAhTuug2mXa9Vnr3NZMamyAhV+D6rRoNrnjnWHHoS8VEwV1W01Vc8r6XrdUI8e6q+26FCeR12nu9pXOYE2pbwWLsxWdczzGht1q3IeYrvVUPJ9/lJX5QQqvVmd0GMChevWQGU9i5XWFfVKBAozpNPxMwQKMqpW/Y6fJVC2d4rpR+ICgTJNKqYPyYsESvdHRzWWOlDsQGsUyTj1lrtBTp26nz7APSjVBV3KHCJQUr+6sgcJlPBIHUHvFxAo7rVaNRM0QSBJmlBMX4KnCCRN6bDehk0S6J/aNRI+XTnvKOanXxfneY1pvcw1vdQCfQz9jWmBeIgZBDIIZBDIIJBBIINABoGMaOAfF2Wa0fty39ByiepNHqvGcv9HzFLGQ8wgkEEgg0AGgQwCGQQyCGQQyCCQQSCDQAaBDAIZBDIIZBDIIJBBIINABoEMAhkEMghkEMggkEEgg0AGgQwCGQQyCGQQyCCQQSCDQAaBDAIZBDIIZBDIIJBBIINABoEMAhkEMghkEMggkEEgg0AGgQwCGfl9wNLOgO8xqS/q7epPfBrvnOWlSpIuv0A1Wl3i21VX+hTBeIgZBDIIZBDIIJBBIINABoEMAhkEMghkEMggkEEgg0AGgYxo4PcgL57sr/L4WdQ9Thf1aAAAAAAAJfEfaGgQuLoUUnMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDEtMDFUMDI6NTA6MzUrMDE6MDAAFiETAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAxLTAxVDAyOjUwOjM1KzAxOjAwcUuZrwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==">
The above is an example for one specific image. You likely don’t want to manually do this for every single one of your images on your website. How to set it for your website may be different than mine. My website is hosted on GitHub pages and uses Jekyll with Liquid variables, so the change is quite a bit more concise here.
<!-- Before -->
<img src="" >
<!-- After -->
<img src="data:image/png;base64,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" data-src="">
Note that the above is only possible due to the support for Liquid variables. If you do not use the Liquid templating engine in your website, then this approach will not work, but you should have something similar for dynamically loading in images without manually setting each one. One more note on the example above, I saved the base-64 encoded image into a site variable named encodedlogo so there is just one easy place for me to update the encoded image in the future if I ever need to.
Closing Thoughts
This should be all you need to do on your website! Just encode an image (such as your logo), enter the encoded image into your src attribute, and set the data-src attribute to the proper image reference. The few lines of JavaScript that we wrote earlier will take care of the rest!
For a quick sanity check, we can run another audit and confirm that “Defer offscreen images” is no longer one of the recommendations. You can expand the “Passed audits” section to verify that the check has passed.
