How to Fully Optimize Images for Speed and SEO in a WordPress Site

We hear it all the time…

A fast web site gets and retains more traffic. And, traffic is the lifeblood of many an online business, right?

And let's face it, images are often the main culprit in slowing down our web sites.

So, how do we properly optimize the images? Is there more to it than just making smaller file sizes? Let's explore that and more in the coming paragraphs.

I feel that to properly serve an image from our web site, we need multiple versions of that image.

Why?

We should only load an image that fits within the display area of the viewer's screen, because it will load faster than one with larger dimensions. And, of course, this needs to be done dynamically because there are a variety of people viewing our sites on a variety of screens at any given time.

Beyond that, we should utilize the best format for the image when available. In today's landscape that means loading the WebP version of the image when the browser supports it. WebP is a special image format that can look exactly the same as its JPEG and PNG cousins, but actually take up less space on disk, and load quicker in a web browser, all things being equal. Additionally, loading Progressive JPEGs rather than standard Baseline JPEGs has its advantages, and so does LazyLoading. Most solutions will add these extras as a side benefit to image conversion and optimization.

I don't know about you, but here are the maximum number of steps and considerations that I would like to be responsible for personally when uploading an image to WordPress, whilst maximizing my image optimization:

1. Find/take an appropriate high-res image.


2. Put my insertion point (cursor) where I want my image to load within my blog post.


3. Initiate the upload of the image to be added to the Media Library.


4. Cite the image when appropriate (give credit where credit is due, and stay true to Copyright law).


5. Decide whether I want the image to float left, float right, be left justified in a space all by itself, or be centred within the space that it's in.


6. Decide on the max size (in terms of dimensions) for the image.


7. Insert it into the post with one more click.


8. And that's it!

And here's the list of things that I would like to happen on my behalf:

1. Have a WebP version of the main image and all of its thumbnails created.


2. Have multiple images created with different dimensions.


3. Have all images optimized (smaller file size, but looking pretty much the same after reduction)


4. Have the code placed that will dynamically load the *best* sized image for the current visitor to my web site, whether the page is a regular HTML page, or an AMP page. Firstly though, the server should know to serve the WebP version of the image, when it's supported, before displaying the JPEG or PNG version.

The above of course is beyond all the other magic that we now take for granted such as: digital communication between devices, transfer of bytes through TCP/IP, and whatever else happens that we generally stop consciously appreciating after awhile.

Worth noting: AMP pages (Accelerated Mobile Pages), when leveraging the Google AMP Cache (AMP CDN), will perform image reduction/optimization, WebP creation, and dynamic image/WebP serving from a single image call, without any pre-steps on our part. Cool!

OK, so, how do we easily and simply prepare our WordPress web site for the proper creation and optimization of images without a lot of effort and expense?

Well, there are lots of ways to accomplish these tasks. Here is the general list of things we can do that will allow us to leverage other people's digital intelligence.

1. Find and use a plugin that creates a WebP version of an image upon upload. [Here's one and the EWWW plugin does it too]


2. If you want to be kind to Apple or double-density screen users, and while this doesn't have a lot to do with speed and SEO more than it does *beauty*, find and use a plugin that creates a Retina (double resolution) version of an image upon upload. [Here's one]


3. Find and use a plugin that optimizes all versions (sizes and types) of images. [Here's one that supports WebP and Retina]


4. Find and use a plugin that will render the proper *image HTML* for the AMP version of our web pages (you are creating AMP versions of your web pages, yeah?) [Here's one by Automattic]


5. Enable WebP support on the server, or more simply (and with more significant speed advantages)… find and use a caching plugin that will enable the server to serve WebP, and also honour the loading of a WebP version of the image when appropriate (it would create 2 static HTML files, one for the WebP version, the other for the regular version of the image). [Here's one]

Expected WordPress automation: The above assumes that WordPress is also creating *thumbnail* versions of each image in all formats (which is the default nature of WordPress, so it's a safe assumption). In other words, it is creating images (based on the originally uploaded image), that have different dimensions. Therefore, when the image is being viewed in a web browser, the size of the *screen* is considered to determine the best possible *sized* image to show. Also, the proper code should be in place in the resultant HTML that indicates to the web browser which image to load. WordPress will do that for you too.

Note: Another layer we could add to this would be to have our images load from servers close to the geographic location of the visitor (so they don't have to travel so far, and can therefore show up faster). Google: “content delivery network” or “free cloudflare” or “keycdn” for more on this topic. For AMP pages, as mentioned, when using the Google AMP Cache, this is in-built!

Below is a video showing WordPress image optimization configuration in action:

To recap the settings demonstrated in the video that allows us to setup WordPress to: create/optimize Retina (double-density) images, create WebP images, optimize the uploaded image and all of the thumbnails, plus configure the server to deliver WebP images (when relevant), and create a secondary cache for when WebP image delivery makes sense:

1) First, using the WP Retina 2x plugin, go to Settings >> Retina >> Basics, and be sure that “Auto Generate” is selected.

2) Next, using the ShortPixel Image Optimizer plugin, go to Settings >> ShortPixel >> Advanced, and be sure that “WebP versions” is selected.

3) Lastly, using the Cache Enabler plugin, go to Settings >> Cache Enabler, and be sure that “Create an additional cached version for WebP image support” under “Cache Behavior” is selected.

After that, when uploading an image to the Media Library:

• WordPress will create all the thumbnails defined by the currently activated theme (and perhaps some plugins)


• WP Retina 2x will create Retina versions of the thumbs


• ShortPixel will create WebP versions of all images


• ShortPixel will optimize all images and thumbs (including Retina)


• Cache Enabler will enable WebP support


• WordPress will place the HTML necessary for the web browser to know which image to show based on the screen size of the current visitor

Take care to name your images (the filenames), and to add title and alt tags, for added SEO benefit.