Responsive Images Arrived With WordPress 4.4

Smaller images for smaller screens

WordPress 4.4, released on December 8, changed how images inserted through the editor reach visitors.

Until then, a photograph placed in a page was sent at one size to everyone. A phone with a screen a few inches wide downloaded the same file as a large desktop monitor.

Now WordPress lists the smaller copies it already keeps of each image, and the visitor's browser picks the one that suits its screen. On a phone that usually means a much smaller download.

Nobody has to edit a page for this to happen. It also covers less of a typical site than many people assume.

How it works

Every time an image is uploaded, WordPress keeps the original and makes several smaller copies. Version 4.4 added one more, an in-between width suited to tablets and large phones.

When a page is shown, WordPress now attaches a list of those copies to each image in the content, with their widths. The browser chooses, allowing for sharper screens that need more pixels.

Because the list is added as the page is shown rather than saved into the post, older posts benefit too. Browsers that do not understand it, Internet Explorer 11 among them, simply load the image that was inserted, as before.

What it reaches and what it misses

• Images inserted through the editor: covered, in new and old posts.
• Featured images: usually covered, if the theme shows them the standard way.
• Home page sliders: usually not, since they write their own code.
• Page builder layouts: often not, for the same reason.
• Background images set in a theme or builder: not covered.
• Headers and widgets: it depends on the theme.

The third is usually where the weight is. A slider of five large photographs is often the heaviest thing on the site, and it sits outside the content area that 4.4 looks after.

Oversized originals still cost

WordPress can only offer copies of what was uploaded. A photograph straight from a camera can be several thousand pixels wide and several megabytes.

Inside the content, phones now get a smaller copy. Elsewhere the original still turns up: when an image links to the full file, in lightbox galleries, and in sliders or builders set to use full size.

Browsers that ignore the list download whatever was inserted, and an image inserted at full size is the original.

Resizing photographs to around 2,000 pixels on the long side before uploading keeps every copy reasonable, and keeps the hosting account and its backups smaller.

Images uploaded before the update

The new in-between size is only made for images uploaded after the move to 4.4. Older uploads have fewer copies to choose from, so a phone may get a larger one than it needs.

A plugin can regenerate the copies for every existing image, so older photographs get the in-between size as well.

It is safe on most sites. On a large library it takes a long time and works the server hard, so run it after a backup and at a quiet hour.

A worked example

A Punjabi sweet shop in a strip mall makes barfi, ladoo, jalebi and gulab jamun on the premises, and takes orders for weddings, birthdays and festival boxes.

The shop's WordPress site gives each family of sweets its own page, with a dozen photographs on each, taken by a family member with a good camera and uploaded straight from the memory card.

The home page opens with a slider of six of the best, and the sweets pages were laid out with a page builder so the photographs sit in neat grids.

After the update to 4.4, the photographs inserted the ordinary way got lighter on phones. The builder grids and the slider did not change: they still sent every visitor the camera-sized originals.

Their developer resized the originals, regenerated the smaller copies, and set the slider and the grids to use a large copy instead of the full file.

The pages look exactly as they did. A phone opening the wedding boxes page now downloads a fraction of what it used to.

Weighing a page

The quickest way to see what a page costs a phone is to weigh it. A browser's developer tools, in their network view, list every file a page loads and its size.

Most can also imitate a phone screen, so the list shows what a phone would choose. PageSpeed Insights and similar online tests point at the largest images directly.

On many small business sites, images make up most of that weight, which is why the change in 4.4 matters at all.

Weigh the home page and the heaviest gallery before and after any change, and keep the figures. They settle the argument the next time someone wants a bigger slider.

The 4.4.1 security release

Yesterday WordPress released 4.4.1. It fixes a cross-site scripting flaw that could allow a site to be compromised. Cross-site scripting means an attacker getting their own code to run in visitors' browsers through your site.

The flaw affects 4.4 and every earlier version. The release also fixes 52 bugs in 4.4.

Security releases like this one install themselves on most WordPress sites, usually within a day. The dashboard's Updates screen should already show 4.4.1.

If it still shows 4.4, automatic updates have been switched off, by the host, a plugin or whoever built the site. Someone needs to install it by hand, after a backup, this week.

The counter-case

A site with few photographs, or one already built with carefully sized images, will see little difference from the change in 4.4.

And on a fast office connection the difference is hard to notice. It matters most on phones, on mobile data, away from good coverage.

None of it replaces sizing images properly in the first place. Keep WordPress current, upload sensible sizes, and check the parts of each page that 4.4 does not reach.

After the 4.4 update

1. Confirm the dashboard shows 4.4.1 under Updates.
2. Ask why if automatic updates are off.
3. Weigh your heaviest page as a phone.
4. Find images outside the content area.
5. Point sliders and grids at a large copy.
6. Resize camera photographs before uploading.
7. Regenerate older image sizes after a backup.

Step four is where most of the remaining weight is found. The update only reaches images in the content, and on many small business sites the largest files live in sliders, grids and backgrounds.

Images are one part of a site that needs revisiting after launch; dates are another, covered in the footer still says copyright 2013.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.