Images, sizing, and layout shift

This article covers three common image problems in Reign: pictures that look soft or blurry, working out what size to upload, and the page jumping around as it loads. None of these need a developer. Most come down to the size of the file you upload and the aspect ratio you pick on the section or block.

Why images look blurry or soft

The most common cause is a source image that is too small for the space it fills. Reign scales an uploaded image up to fit its slot. When the original has fewer pixels than the slot needs, the browser stretches it, and the result looks soft on a wide screen or a high-resolution phone.

To fix it:

Find the original file you uploaded. Check its pixel width (right-click the file on your computer, then open its info or properties).
Compare that width to where it sits. A small thumbnail can be narrow. A full-width banner spans the whole screen and needs a much wider source.
Re-export the image at a larger width from your design tool, then re-upload it. Replace the existing image in the same setting so nothing else changes.

A few things that make this worse:

A logo or graphic saved from a web page is often already small. Use the original master file, not a screenshot.
Saving a photo repeatedly as a low-quality JPG softens it each time. Export once from the original.
Stretching a square image into a wide slot crops and enlarges it. Match the image shape to the slot (see the next section).

What size to upload

Shopify serves the right size of each image to each visitor automatically, so you do not set widths in the editor. Your job is to upload a source that is large enough for the widest place it appears, then let the theme scale it down.

A safe rule:

Full-width banners and heroes: upload the widest version you have. These cover the whole screen, so they need the most pixels.
Product photos: upload a high-resolution export. Product images get zoomed and shown on large screens.
Smaller images (icons, small cards, logos): a modest size is fine, but still larger than the slot, not smaller.

It is better to upload an image that is too big than one that is too small. Shopify shrinks a large file for you with no loss of sharpness. It cannot add detail to a small one. Very large files do add weight, so do not upload print-resolution masters where a web export will do.

Reserving space so the page does not jump

Layout shift is when content moves after the page has started to show. A common cause is an image that has no reserved space: the browser paints the text first, then the image arrives and pushes everything down. Reign reserves space for images ahead of time, so in a default setup the layout holds still while images load.

The shift usually comes back when an image does not match the shape the section expects. Many image sections and blocks have an Aspect ratio setting. The theme reserves a box in that shape, then drops your image into it. If you pick a shape that fights your image, you can see a jump or a crop.

To keep things steady:

Open the section or block that holds the image.
Find its Aspect ratio setting and pick the shape closest to your image. If you want the image to keep its own proportions, choose Original or Adapt to image where that option is offered.
Use the same shape for every image in a repeating row (a collection grid, a slider) so the row does not stagger.

Tips

When you swap an image, replace it inside the existing setting rather than removing the block and adding a new one. That keeps the reserved space and the rest of your settings intact.
If one card in a row sits taller or shorter than its neighbors, the images in that row are different shapes. Set one Aspect ratio on the section so every card matches.
If a banner looks sharp on your laptop but soft on your phone, the phone screen packs in more pixels. Upload a larger source rather than trying to fix it with editor settings.
A slow first load with a big image at the top is normal on a weak connection. Keep the top image well-sized but not oversized, since it is the first thing a visitor waits for.