Ideal banner size


#1

Ok…really need a bit of guidance from ‘banner users’!! What is the best size/pixel dimension for banners
normal and hero size.
All input gratefully received…there seem to be so many differences out there.
Thanks in advance


#2

You could follow the suggestion of the built in banner drop zone in RW for a normal banner(RW7). Then experiment from there. For a hero banner the size should be larger. Use a program on your Mac to compress the file size to optimize the image. I tend to go large and then reduce the size and use the compression app to reduce the file size. Rapidweaver podcast goes into detail about compression apps and image optimization. Check out the community site for that. It’s a great resource.


#3

@Wendyb I checked Rapidweaver for their suggested banner size. It is 1080 x 720 pixels. Also, the tool I use for the image optimization is ImageOptum


#4

thanks a lot, will experiment a little, and see what it all looks like.


#5

Experimentation in web design is key. You have to see what works best for your situation. :+1:


#6

Hey All,

So I have been experimenting and on a macBook Retina headers look great. Yet when I pop the site on a 27" monitor, the image really pixelates and gets soft.

I tried the 1080x720 as suggested by RW and even a 2700 pixel. Same deal.

Any suggestions?
Thanks all!
Blessings,
—Mark


#7

What suggested banner size are you referring to? The Banner stack has no suggested size. It is up to the designer to choose the size banner that works for their site design. If you’re concerned with retina display you’ll want to choose an image that will look good on retina first. You don’t want to design for the lower resolution screen first.


#8

I should have been more clear. I am in the midst of finishing a manuscript so I spend the better portion of a day at the keyboard and at the end of the day I tend to lump my shining together.

The suggestion I was referring to is not Foundry but rather the RW 7 baked in header banner tool in the General Setting on themes that support it like your Voyager and Voyager Pro.

Reina is where ei have been banging my head against the wall. I look at in image on my MacBook Pro and it looks perfect. Pop it in a RW project and throw it up on on Acer 27" monitor or even my iMac, and as it expands it gets really soft and out of focus. Ug.

I guess I need to keep experimenting. Thanks.
Blessings,
—Mark


#9

The suggestion I was referring to is not Foundry but rather the RW 7 baked in header banner tool in the General Setting on themes that support it like your Voyager and Voyager Pro.

Gotcha. Since Foundry doesn’t use the drag-and-drop banner setup of RW 7 for its banners, that will not apply to it.

Reina is where ei have been banging my head against the wall. I look at in image on my MacBook Pro and it looks perfect. Pop it in a RW project and throw it up on on Acer 27" monitor or even my iMac, and as it expands it gets really soft and out of focus. Ug.

Retina is tricky. Really. For it to look good on both your image will need to be 2x in size. You’d figure out the space you need to cover on the standard display, then double it. The original image though has to be that doubled size. You can’t simply up the size of the image.

For instance – If I have a 1,000 x 400 px banner area I need to cover, my original image needs to be 2,000 x 800 px in size. I wish RW offered some kind of support for this by itself. I’ve thought on good ways to do this automatically in Foundry and there’s not yet a great way that is easy an approachable yet thatI’ve hit on.


#10

Thanks Adam!

That explanation of retina is really helpful. Not knowing is an image needs @2x or not and all that is confusing. You explanation helps me see it in perspective.

Thanks. Off to tinker!
Blessings,
—Mark