> For the complete documentation index, see [llms.txt](https://support.storefront.co.za/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.storefront.co.za/release-notes/september-2026/responsive-banners-and-images.md).

# Responsive Banners and Images

Content images and banners now load at a size suited to the visitor's screen, with separate desktop, tablet and mobile artwork served from a single content block.

**This includes:**

* Separate desktop, tablet and mobile artwork on a single content block
* Only the image appropriate to the visitor's screen is downloaded
* Images are published with their width and height, so the page does not jump around as they load
* Applies to images placed on content pages, blogs, news and zones

**How it benefits the Merchant**

Previously, showing different artwork per device meant adding three banners and hiding two of them. Every visitor still downloaded all three, which slowed the page down, and if each banner carried a heading the page ended up with duplicate headings, which works against your search engine ranking.

Now you upload the artwork for each screen size on one block. A visitor on a phone downloads only the mobile image, the page loads faster, and the page has one heading as it should. Because image dimensions are published up front, content also stops shifting as the page loads, which is one of the measures search engines use to judge page experience.

**Potential FAQs**

Q: Do I have to provide all three sizes?

A: No. Provide the sizes you want to control and the storefront uses what is available.

Q: What happens to banners I have already built?

A: They continue to work as before. You can move them to the new approach when it suits you.

Q: Is this the same as the Image Sizes settings?

A: They work together. Image Sizes controls the versions generated from an uploaded image; this controls which of those versions a visitor actually downloads.