Featured Image Sharpen Up WordPress plugin released

Today I am launching the first release of a new WordPress plugin called Featured Image Sharpen Up.

Some of the biggest resources to download on a web page can be the included images. If you are using featured images in your WordPress site theme, then large images can delay rendering of the page while a user downloads them.

The Featured Image Sharpen Up plugin aims to speed up page load times of a WordPress site by moving the images off the main load, and loading them asynchronously as the user scrolls down the page.

The plugin works by creating a tiny version of the image, which it embeds in the page base64 encoded inside an encoded SVG file, which blurs and stretches the tiny file to fill the space where the image will be. The images are only loaded when the user’s browser approaches the point in the page where the image is, so the browser does not download all images on the page immediately during page loading, hopefully increasing the initial load speed of the page by quite a bit, depending on the amount and size of the images.

The plugin runs wherever a featured image is used in theme (this is called a post thumbnail internally in WordPress), such as on single post pages and on home and category listing pages. The plugin does not run on images included within posts.

This technique was inspired by medium.com and is also used by Facebook for loading cover photos on mobile devices. There’s also a good write-up of the technique and its benefits at CSS-Tricks.

For a demo of the plugin, if you go to the home page of this site or any of the other main pages of the site, you will see the effect in action on the main featured image.

The plugin is available now from the WordPress plugin directory.

The page before the image loads
Before the image is loaded, showing the tiny placeholder image
Featured image as seen after image is lazy loaded
Here the original image has now been loaded into place
Lazy loading of featured images
Here you can see the images being lazy loaded after initial page load as the user scrolls down the page.

The plugin is also available on GitHub, and can be installed via composer by adding the following to your composer.json :

"require": {
    "mabujo/featured-image-sharpen-up" : "^1.0.0"

and running ‘composer update’.

The plugin used Hugh Lashbrooke’s plugin template as a project base, and includes version 0.6.4 of the jQuery Lazy library, and is released under the GPL-2.0 license.