Hello axko, I do realize you may have already looked at the help section. The documentation is really quite extensive and helpful on working with images. If you have not looked at it you may find that helpful. You can also send a note to Duncan directly at feedback@sitely.app. He is always very helpful and answers quite quickly.
When you add an image to a web page, the image is always placed inside some kind of container - for example a box, placeholder, or wide/full-width image area.
The Fit and Fill options simply tell Sitely how the image should behave inside that container.
Fill makes sure the entire container is covered by the image.
If the image and container have different shapes (aspect ratios), parts of the image may be cropped off to avoid distortion.
Fit makes sure the whole image is visible inside the container.
Usually the longest side is adjusted to fit first, while empty space may appear around the shorter side.
Both options are designed to keep the image looking correct and prevent stretching or distortion.
If you’re using a normal image box or placeholder, you can manually resize both the image and its container by dragging the handles. However, you can only scale within the page boundaries - you can’t drag the object wider than the page itself.
A Full Width Image works differently. In this case, the browser window controls the width automatically. Because of that, you can only adjust the height of the image area in Sitely.
This also means that different visitors may see slightly different portions of the image depending on the size and shape of their browser window or device screen. Wider screens will reveal more of the image horizontally, while narrower screens may crop more of the sides.
I now better understand the technical difference between “Fit” and “Fill”, as well as the behavior of normal image containers versus Full Width Images.
However, this also confirms the core issue I am struggling with:
The official Sitely templates visually suggest that large cinematic hero banners can be used in a predictable and stable way across devices. As a user, this creates the expectation that the visible image composition will remain reasonably consistent on desktop, tablet and mobile screens.
In practice, however, it seems that Full Width Images are fundamentally dependent on the visitor’s browser/window aspect ratio, meaning that image cropping is unavoidable and can vary significantly from device to device.
From a technical perspective I understand why this happens. My difficulty is more related to workflow and predictability:
When designing a visually important banner (especially one containing people, typography or carefully composed elements), it becomes difficult to know in advance which parts of the image will remain visible on different screens.
This makes it challenging to create controlled visual compositions without constantly testing different browser sizes and devices.
So my question would be:
How do Sitely template designers typically approach this problem themselves?
Do they:
intentionally use oversized images with large “safe areas”,
avoid placing important content near the edges,
design specifically for certain aspect ratios,
or use another recommended workflow for responsive hero images?
I think additional guidance or best practices in this area would be extremely helpful for users, especially because the templates themselves create the impression that full-width banners behave more consistently than they actually do in practice.
Yes, it would be great if we had more granular settings but there are ways in getting around it…
You would create an image the way you want it on desktop.
If you also what control over the tablet, remove the desktop image from it in the right-hand panel and then create an image for the tablet hiding it from the desktop - also in the right-hand panel.
Now also repeat this on mobile with an image that shows everything you want visible.
Overall you will have created three separate images instead of the one being used across all your chosen devices.
The solution offered by @FlaminFig is the most practical one. The thing to remember is that it’s only desktop and laptops where there is a degree of unpredictability. This is because browser windows can be resized on those devices, whereas on tablets and smartphones, browser windows are commonly full width. For the desktop/laptop version of your site, choose images where the main subject matter is more centred. When it comes to tablet and smartphone layouts things get little easier. Simply create hero images that are the full device width. Make those images only visible on the respective devices and hidden on the desktop/laptop version. Likewise hide the desktop/laptop version from all other devices.
I think the templates do in fact work as advertised, because in practice a the cropping of a fill hero image is going to be limited, insofar that the lack of automatic height-to-width proportion will mean that on a specific device layout the range of widths vs. the chosen height will not vary much.
We certainly can improve on this, but your framing feels unfair to me, as if it’s consistently producing terrible layouts.