Image Sizes

Tells the browser how wide the image will be on screen, so it can download the right version.

Where to find it
Labelled Image Sizes in the "Selected Component" section of the Modify drawer.
Offered by
The Image component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

RuleCMS serves your images in several sizes and lets each browser pick the one it needs. But the browser has to choose before it has finished working out the page layout, so unless you tell it, it assumes the image will be the full width of the screen — and downloads a much larger file than necessary.

This setting is that hint. If the image will occupy about a third of a wide screen but the full width of a phone, you say so, and each visitor downloads a file that suits their device. It is one of the highest-value performance settings available to you, and it is the most commonly skipped.

The format looks technical but reads left to right as a list of conditions with a fallback at the end. "(max-width: 600px) 100vw, 33vw" means: on screens up to 600px wide the image fills the screen; otherwise it takes about a third of it.

You only need this for images that change size across devices. A logo that is always 120px wide can simply say "120px".

When you would use it

  • A large image whose width changes noticeably between phone and desktop.
  • A hero or banner image, where the file size has the biggest effect on how fast the page feels.

How to change it

  1. Click the image component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Image Sizes".
  3. Enter a value. Common patterns: "100vw" for a full-width image, "(max-width: 600px) 100vw, 50vw" for one that is half-width on desktop, or a fixed "120px".
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Leaving this empty is not an error, but the browser will assume full screen width and may download a file several times larger than needed.
  • Describe the image's width, not the screen's. This is the mistake almost everyone makes first.
  • This setting only affects which file is downloaded. To change how large the image looks, use the column's Width or Max Width.

Related settings

For developers

The technical reference for what this setting produces: MDN: the sizes attribute. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next