Banner Image & Impact stack - What's the right responsive size?

(Adriano ) #1

Hello everybody,

I am using RW8 with Foundation.

I need your help to put a image I downloaded from AdobeStockPhotos into one of my webpages as a banner image.

The original size of the image is 5760 × 3840. When I put the image inside my Impact stack it gets cropped like this:

I have Photoshop, so I tried to change the size, but with no success. I tried 2000 x 1030 for example, but still it came out very much cropped as the original size.

Any ideas on this?

Thanks for your help.

(Bill Fleming) #2

Try setting Impact setup size to Proportional and edit your image to one of the proportional size in the drop down box.

(Adriano ) #3

Hello Bill,

Thanks for your advice.

I set-up the Impact stack to Proportional and then I tried to literally edit the picture with PP according to all the size options listed in the stack itself.
I then tried each and every different size, but none of them is showing full picture. :frowning:

(Robert Ziebol 🖖🏼) #4

What are the image dimensions? Choose OTHER in the stack settings and put in those dimensions, that should make it fully seen.

(Bill Fleming) #5

Here what mine look like

The very top first image are the impact images. All the images size are at 1200 x 515 which is 21:9 ratio and attached is a screenshot of my impact settings.

(Adriano ) #6

Thank both of you for your precious suggestions.

I did exactly the same as you both suggested. But with no success. My image is not showing well. Is it possible that there are some CSS that are on the way here?

(Jason Bostick) #7

Your original image (5760 x 3840) is a 1.5:1 ratio, have you tried putting that in your Impact settings (select custom)?

(Adriano ) #8

Hi Jason,

thanks for your help. Yes, I have tried this before, but the max custom Aspect Ratio is 3.000 x 3.000 on the stack settings.

(Jason Bostick) #9

Well, using a 1.5:1 ratio you could use say, 3000 x 2000 (or 2000 x 1333, as 3000px is likely overdoing it for a web image)

(Bill Fleming) #10

I have to agree with other on the original image size 5760 × 3840. it way too big. You need to scale it down to around 1400 px width preserving the same ratio if you don’t want to chop off any part of the image.

I keep all my hero or impact images at 1400 width or smaller. You can take the same image you have and scale it down but still keep every detail in the image also it will have a lot less page weight (smaller file size) which mean fast page loading time for the visitors.

(Joe Workman) #11

(Adriano ) #12

Thank you everyone for your support.

I went down with a really bad cold and fever on Sunday evening and didn’t have the strength to work on the project!. Now I am finally up and running again!.

I am happy to share with you how I managed the sizing for your reference.

First off I changed pictures.
Then I re-seized them to 1200 x 515 (21:1).
Even doing so and setting the stack appropriately, Impact was cutting it anyway on the top. I didn’t give up and out of the blue, almost by mistake I think, I though why not doing like this?

…eh eh. I just figure out: “why not saving the image with that little blank gap on the top, so that when Impact is cutting me out on the top, it shows me the full picture as it will cut the white part?” and indeed… success! it did work.

Like some of you suggested with custom settings it showed the full picture, but still cutting minimally on the top; I decided to go with 21:1 ratio, so I get a nice modern look throughout the site.

Thanks to everyone, once again for your encouragement and support.

Happy Weaving

(Adriano ) #13

Good morning all,

I noticed over the weekend that the Impact Header is scaling my images on mobile device… you can have a look at my site here

I prefer to have the image 1200 x 515 able to show fully on mobile as well. I know it’s possible to create such a responsive header as @TechBill’ site clearly show.

Any help on this one would be great guys!

(Robert Ziebol 🖖🏼) #14

First, I think you have your aspect ratio set wrong. When I go to this page:
and enter 1200x515, I get an aspect ratio of 240:103, not 21:1, so I am not sure where you got that.

This is probably is why the issues you are seeing are happening. Where did you get the aspect ratio of 21:1??

(Bill Fleming) #15


My impact images’ aspect ratio are 21:9

not 21:1