Images Sized for a Billboard on a Phone Screen

Four thousand pixels for a phone

A photograph straight from a current phone camera is about four thousand pixels wide. One from a good camera can be wider still.

A phone held upright needs roughly a thousand pixels to fill its width sharply, counting its high-density screen, and a little more on the largest models.

Upload the photograph as it came off the camera, and the phone downloads several times the image it can show, then shrinks it to fit. The visitor waits, and pays in mobile data, for pixels that are thrown away.

The fix has existed for years, and on many sites it is already half in place.

One file cannot suit every screen

A photograph across the top of a desktop page needs to be large. The same photograph on a phone needs far less, even allowing for its sharper screen.

One file is therefore either too heavy for the phone or too soft for the monitor. For years the usual compromise was a single large file, sent to everybody.

Responsive images remove the compromise. The page offers the same picture in several widths, and each browser takes the smallest one that will look sharp on its screen.

What the browser needs to know

• The files available, listed in an attribute called srcset, each with its width.
• The width on screen, given in an attribute called sizes.
• The screen's density, which the browser already knows.
• A fallback file, for Internet Explorer and anything else that predates all this.

The second is the one that goes wrong. The browser picks a file before it has laid out the page, so it trusts sizes to say how wide the image will be. Wrong sizes, wrong file.

What WordPress already does

Since version 4.4, released at the end of 2015, WordPress has done most of this automatically.

Every photograph uploaded to the media library is saved in several sizes: a small thumbnail, a medium version, a medium-large one 768 pixels wide, and a large one up to 1,024 pixels, plus any sizes the theme asks for.

Images placed in a page or post through the editor then get srcset and sizes added on their own, listing those copies.

The original stays on the server exactly as it was uploaded, at full camera size. That matters, because anything that asks for the full size receives it.

Themes that ignore the sizes

The smaller copies exist on most WordPress sites. The trouble is that the page often never asks for them.

Large images at the top of a page are frequently set as backgrounds in the stylesheet, which cannot offer a choice of files in the same way. The theme picks one, and often it picks the original.

Sliders, galleries and page builder elements commonly default to the full size. Custom templates sometimes write the image's address by hand, skipping srcset altogether.

The result is a site where WordPress has made the right files and the theme serves the wrong one.

The guess in sizes

Even where srcset appears, sizes can mislead the browser.

WordPress does not know the layout, so by default it says the image may be as wide as the screen, up to the image's own width.

In a three-column gallery on a desktop, that guess is about three times too large.

A theme that knows its own columns can give the true figure for each layout. Many never do, so desktop visitors download files far larger than the space they fill.

A worked example

A small commercial art gallery photographed each work with a good camera and uploaded the files as they came, about six thousand pixels wide.

Its exhibition pages used a gallery plugin set to full size, and the home page showed the current exhibition's key work as a background image across the top, also at full size.

On a phone, an exhibition page of twenty works took a long time to fill in. PageSpeed Insights listed every image under properly size images, each several times larger than displayed.

WordPress had made the smaller copies at every upload. Nothing on the site asked for them.

The gallery was switched to the large size with srcset, and the top image became an ordinary image element offering a choice of widths.

New uploads are now resized to about 2,500 pixels first, which still allows a close look at the brushwork.

Which file actually loaded

A quick check needs no tools. On a computer, right-click an image, open it in a new tab, and read the end of its address.

WordPress adds the dimensions to the names of the smaller copies, so a file ending in something like 1024x683 is a generated size. A name without dimensions is usually the original.

PageSpeed Insights does the same job across the whole page, under properly size images, with the potential saving for each file.

After a change of theme

A new theme often registers new image sizes. WordPress creates them for photographs uploaded afterwards, not for the ones already in the library.

Where a size is missing, the theme quietly falls back to the original. A regeneration tool, run once after the switch, creates the missing copies for every existing image.

The counter-case

Some sites have little to gain.

A site with a dozen photographs, already resized before upload, loses only a little to imperfect srcset. A photographer or an architect needs large images on project pages, though the same principle still serves each screen the right one.

And responsive images do nothing for a slow server or a page full of scripts.

For any site with many photographs, though, make the page ask for the sizes WordPress has already made.

This week

1. Run your main pages through PageSpeed Insights.
2. Note every image flagged as oversized.
3. Open each one to see which file loaded.
4. Find the template or element asking for full size.
5. Switch it to a generated size with srcset.
6. Regenerate sizes after any theme change.
7. Resize photographs before uploading them.

Step four is the one that fixes it for good. Resizing a few files helps this month; correcting the template that asks for the original fixes every page that uses it, including the ones not yet written.

Holding back the images further down the page is covered in native lazy loading arrives in Chrome tomorrow.

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.