Images Hidden on Phones but Still Downloaded

A picture nobody sees, paid for anyway

A responsive theme rearranges a page to fit a phone. To keep the small screen tidy, it often hides things: the slider across the top, the panoramic header, the photograph behind the menu.

The visitor never sees them and assumes they are not there. The phone downloads them anyway.

Hiding an image is an instruction about how the page looks. It says nothing about which files to fetch, and by the time the browser reads it, the download has usually started.

Why the phone fetches it

A browser reads a page from the top. As soon as it meets an image in the page's code, it asks for the file, often before it has worked out the layout at all.

The rule that hides the image lives in the stylesheet and only affects the display. Browsers fetch every image in the code whether or not it will be shown, since a script could reveal it at any moment.

Background images set in the stylesheet behave a little differently. One assigned only for wide screens is usually skipped by a phone. One assigned for every screen and then hidden on small ones is often downloaded regardless.

What usually gets hidden

• Home page sliders of five or six full-width photographs.
• Panoramic headers sized for a large desktop monitor.
• Background photographs behind the menu or the whole page.
• Sidebar graphics such as badges, awards and promotions.
• Two versions of one image, with a different one hidden at each size.

The fifth is the most wasteful. The theme puts a large and a small copy of the same picture in the page and hides one at each screen size, so the phone fetches both and shows the small one.

What it costs the visitor

A phone on a weak signal fetches files slowly, and a few large photographs can make up most of a page's weight.

Hidden files also compete with the ones the visitor needs. While the slider photographs download, the stylesheet, the logo and the text wait their turn, so the page starts to render later.

And mobile data is metered for most people. A visitor who watches a page crawl in, or notices the bill, is less inclined to come back from a phone.

Checking what a phone really downloads

Nothing on the screen gives this away. The only way to see it is the list of files the phone requested.

WebPageTest, a free service, loads a page as a phone would on a slow mobile connection, then lists every file requested and how large it was. Compare that list with what actually appears on a phone's screen.

Chrome's developer tools do the same on a computer: switch on the device mode to imitate a phone, open the Network panel, reload, and sort the files by size.

Whoever maintains the site can also connect a real phone to a computer and watch its downloads directly. Any large image that is in the list but not on the screen is the problem.

A smaller file for the images that stay

Some images should appear on a phone, just smaller. A picture that fills a phone's narrow screen has no need to arrive at the width of a desktop monitor.

The simplest fix is a resized, compressed copy for each place an image appears. Newer markup lets the browser choose from several sizes of one picture; Chrome supports it now, and a small script covers other browsers.

Background photographs belong in the stylesheet only for the screen sizes that show them, so phones never ask for them.

Or none at all

Many hidden images are decoration, and the honest question is whether they earn their place on any screen.

A slider of six photographs is often there because the theme came with one. On a phone it can usually be replaced by one good photograph, or by nothing, with the slider loaded by a script only on wide screens.

Galleries can show small previews and fetch the large photograph only when someone taps it. The visitor then pays only for what they chose to see.

A worked example

A mountain bike park on forested land outside a small town runs shuttle-served trails and a skills area from May to October. In February it sells season passes, and people check the site on their phones.

In season, riders also check trail status from the parking lot, where the signal is weak.

Its home page carried a slider of six riding photographs and a panoramic trail map, both hidden on phones. In their place, phones saw a trail status box and a link to buy passes.

A test as a phone on a slow connection showed all six photographs and the full trail map downloading, several megabytes before anything useful appeared. The trail status text waited behind them.

The fix was modest. The slider now loads only on wide screens, phones get one compressed photograph, and the trail map has a smaller phone version with a link to the full one.

The background texture behind the menu moved into the wide-screen part of the stylesheet. The phone version of the home page now weighs a fraction of what it did, and the status box is the first thing to appear.

Caching helps later, not first

Browser caching lets a returning visitor reuse files instead of fetching them again, which helps the second page and the next visit.

It does nothing for the first visit, which is the one that decides whether there is a second. Every hidden image is paid for in full at the moment the page is making its first impression.

The counter-case

Some sites have less to gain. If nearly all your visitors arrive at office desks on fast connections, a hidden slider costs them little, though it is still worth removing at the next redesign.

And where photographs are the product, a portfolio or a gallery of finished work, they should not be hidden on phones at all. They should be shown there, at a size that suits the screen.

For most small business sites, the rule holds: if a phone does not show an image, it should not download it.

The check

1. Load the home page as a slow phone would.
2. List every image the phone downloaded.
3. Mark the ones that never appear on the phone.
4. Load sliders on wide screens only.
5. Move background photographs into wide-screen styles.
6. Resize what stays to the size it is shown.
7. Weigh the page again and note the figure.

Step three is where the problem becomes visible. Until someone compares the download list with the screen, a hidden image looks exactly like an image that was never there.

Keeping files from being fetched again on every visit is covered in files the browser downloads again on every page.

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.