Image sizing for width of browser

I’m having difficulty with an image of a donor wall with large lettering in a name. I’ve been messing with all my Sparkle settings, but I think I have to go back and downsize the original image to allow that pad on full browser width. I’m fine with landscapes, but I’m dealing with letters. Other than downsizing the image are there any tips formulas. I think I’ll just uncrop the image in AF. I’ve included the image.

Many thanks always

Probably not what you’re asking for, but as a pro photographer the first thing I’d do is straighten this so the text is more readable, then adjust exposure a bit. Attached is my quick work-up. That will make it easier to read at different screen sizes (one’s eyes are not always fighting with the perspective).

To correct the perspective, I used DxO Perspective (suitably enough!), available on the Mac App Store. The exposure and slight sharpening were done in Photoshop Elements but could also be done in Affinity Photo (“AF”). Cheers!


@antonygravett I can’t Thank You enough for what you did to that image. Awesome. Doesn’t solve my problem completely but that image is terrific. I may have to live with a 960 width, but certainly headed in the right directIon. Our animals and volunteers Thank You again.

1 Like

Hi @Woodrow,

Sparkle full width boxes have a fixed height, which means their aspect ratio varies when the site visitor resizes their browser window.

In particular most of the time the image in the live site will have a different aspect ratio than the original image, so if you set the image to fill the space, it will be clipped.

There’s no food solution for this currently, so if you must have the image fully visible it can’t also be full width.

What you can do is make it suitably large, but also zoomable in the browser, so that visitors can click and read all details in an enlarged image. The size of the zoomed image depends on the browser window size, on a desktop it’s probably going to be larger than the in canvas one.

1 Like

Thanks Duncan. I actually only need the Top of the photo with the large lettering. I might adjust my page width to 1000 or so, and make a little space. All my other top images fill nicely as they’re pictures of animals and events. This image in particular may be the only one that I can’t use browser width completely. But a major sponsor with shelter namesake so I’m best to leave it.
Thanks @duncan.