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.