Problems with picture headers

I’ve got a lot of landscape photos for my headers on this site which I’m flipping to Sparkle.
I’m using full width on the header photos, but end up cutting way too much of the photo from the top.
On some of these photos I’m adding a black bar on top of the photo in Affinity so I can fit the picture.
Am I missing something here? . I’ve played with many settings to approach the problem but I just can get it right. Ideas Sparklers? Perhaps I should go for a 960px website, and add some long boxes behind the images to get them right.

I’ll add a few header pics later. Thanks all.


I think it’s just a question of cropping your images to suit the aspect ratio you need. On desktop and laptop your images can be full browser width so it extends beyond the page edges. However, on tablet and mobiles, you need to use an image that keeps the centre of focus within the page width (a normal width box). This is because these devices do not display anything beyond the edge of the page. So, the best idea is to use a full-width box on the desktop and laptop versions, and use a different header image for tablet and mobile versions. Even on the desktop/laptop versions, make sure your image focus of attention remains within the page boundary. Use the display on device options to decide which version appears on the various devices.

Agree with you on the 360px iPhone and tablets Frank. But I can’t figure out how these images could be full width, even with cropping. Ive enclosed a couple.

What you are dealing with is the puzzle of aspect ratio. When you place an image or video on the Sparkle canvas, that isn’t how browsers will render (draw) the image/video on screen.

The proportion between the height and width of a rectangle is the aspect ratio. Cameras take pictures in 4:3 ratio, almost 1 to 1. Smartphone video is recorded in 16:9, almost a 2 to 1 ratio. A third is 21:9, used mainly in cinema but I find useful for Headers and Hero images.

The trick is to adjust your image/video to match the aspect ratio of the container on the Sparkle canvas. Then you preview in browsers and move back and forth between the Sparkle canvas making adjustments.

Search online for aspect ratio calculators. I can’t recommend one as I make the calculations in my head since I deal with this so often.

1 Like

Here’s one.

I’ll be darned if I can understand this stuff. If your going for a 960px width how can that work if the image is stretched, full width of the browser? Or can one say the width would be a very wide browser window, say 1200px then figure from that number.

I realize this isn’t the specific answer you’re seeking, but to me you answered your own question. I’d look for a better website calculator. That one is overly complex. This concept does take a while to wrap your mind around.

Aspect ratio in action: Place an image in the middle of a blank Sparkle canvas. Grab a corner handle and expand and contract the image. See how width can’t increase/decrease without increasing/decreasing height? You have control over the aspect ratio in Sparkle canvas, but not in browsers. Now place a word of text over the image and Preview the page in your browser. If the text appears to have moved, it didn’t, the browser resized the image.

So now you have to figure out if the image will fit in a container in the canvas without the image being unacceptably cropped or distorted. If the image doesn’t fit to your liking, then you need another image or another placement on the canvas.

When designing a website you have to make the decision as to make images fit your design, or your design fit your images. I’m a content creator so my work flow starts with story, then images/video, then text, then animation, then colour platte, and finally place these elements into the canvas that tells the story. I always design websites around content.

Hey Bill,

Images in a wide box scale equally in height and width.

Your two best options in this situation are:

  1. Instead of using a wide box use the image option, which will give you a fixed width image
  2. At the next gig ask the photographer to take some shots with a lot more space framing the subject on the sides and top, which will work better for a wide box use.

1 Like

I would keep things very simple. Get out your image editing app and create some header images that better suit the aspect ratio you’re trying to achieve.

Below are your images that have been placed on a canvas sized 2500 x 600 px (just an example size). These would now be ready to add as a narrow banner image, whether full width or page width. What I’ve done here is place your images over a plain colour background and sized to fit the height of the canvas. Then, with a soft brush, loaded with the background colour, brush around the edge of your image so that it blends into the background.

Sometimes, it’s easier to create such banners in an external image editing app, and then import them into sparkle at their correct aspect ratio. It’s a whole lot easier than trying to have sparkle crop them within the confines of wide box. The app I used was Pixelmator, but almost any imaging app will do the job.

P.S. If the above images are of use to you, please feel free to download them and use them in your project. To download them, just drag them to your desktop - they will be smaller when dragged. If you want the full size images, click the image first to enlarge, then drag to your desktop.

I’ve also attached a link to a sparkle file so you can see the settings used to display the banner correctly on each device variant.

1 Like

One more thing…Don’t lose sight of what is really important, the content. Easy to do when buried in technical details.

Use what seems like a limitation to your advantage. Crop in tight and see what visual drama emerges. Out of drama comes interest. Crop tight to his face, his hands, his guitar, keep going here. Sparkle’s Box style options are both positional and crop. Move your image around in the box and see what emerges.

If you know of Ken Burns, think what he achieves with his cropping/focus technique. At the most basic level Ken Burns elevated cropping to an art form.

1 Like

Thanks everyone!

Excellent Frank. Most generous of you.