Preventing Hidden Mobile Image Requests Using HTML & CSS
When working with designs that require an image to only be visible on wider displays, i.e. desktop, it can be tempting to solely rely on CSS to hide the image. We can apply a CSS rule of display:none to the image, or its container, for screen widths below a certain value and the image will then only show in the browser for the relevant screen size.
This approach, however, is problematic. It may hide the image, but it doesn’t prevent the browser from requesting the file. While the webpage’s visitor may not see the image, they will be hit by the performance cost of retrieving it. This is important to consider as mobile Internet connections can often be slow and most mobile users pay for the data they use. We want to keep the size of the requested page as low as possible.
You can confirm that the hidden image is still being requested by the browser by looking at the Network tab of your browser’s dev tools.
Why does the browser request the hidden image? Simply because browsers start parsing HTML before they apply CSS. Therefore, as the browser encounters image resources it will start requesting them, even if it is going to later have to hide them due to the page’s stylesheet.
THE SOLUTION
One potential solution is to replace the relevant images with CSS backgrounds instead of using img elements. However, this is less SEO friendly and less accessible for those reliant on alternative image text. Thankfully, we can reduce the impact of loading hidden images using just HTML instead.
As an example, let’s consider the following simple markup:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> @media screen and (max-width: 999px){ .hide-on-mobile { display: none; } } </style> <title>Example of hiding image on mobile</title> </head> <body> <div class="hide-on-mobile"> <img src="https://placebear.com/1200/800" alt="Brown bears"> </div> </body> </html>
Our image will only be displayed when the width of our browser is 1000px or larger, but the browser will request the image regardless. To prevent an unnecessary network request for the file we are going to use the picture and source elements introduced by HTML5.
The picture element allows us to define multiple sources of alternative images to display based on the display size or device. When the browser encounters a picture element, it checks each source to see which matches the current browser conditions, then renders the most relevant source as the image. If a match isn’t found, then it falls back onto the picture element’s child img element. We can utilise these tags here to remove the image request when the CSS is going to hide it and improve the page performance.
The body content of our simple example markup can be rewritten as the following:
<div class="hide-on-mobile"> <picture> <source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 999px)"> <img src="https://placebear.com/1200/800" alt="Brown bears"> </picture> </div>
Within our picture element we define a single source for handling the ‘hidden’ image, and then use our original img element as the fallback. If the width of the browser is below 1000px, i.e. we want our image to be hidden, then we will use a tiny 1px square image instead of requesting the full image. For our alternative source, we have used a very small base64 data image, avoiding the need for a network request when the browser uses this.
The picture and source elements are supported by all modern browsers. However, for browsers that are not compatible with these elements, for example Internet Explorer, the browser will just fallback on the img element and render the original image.
If you require expert support with your next web development project, check out our development services today.
With more than two decades’ coding experience under his belt, Senior Developer Andy continues to prove an integral part of the Evoluted development team. Having been with Evoluted since 2012, he has worked on countless projects for our clients. An analytical thinker, his background includes time spent working as a theoretical physicist; which involved research into Quantum Optics.
