Optimum Hero Banners?

Foundry
1

Hi, can anyone recommend optimum dimensions for a hero banner in the Foundry banner stack.
Obvs. I want my image to look as crisp as possible after compression.

Also, does anyone have any good tips for compression. I’ve been combining photoshop with compressor.io. Compressor.io is pretty good and compresses a lot but sometimes theres a noticeable loss in quality.

2

Hi @James249 ,

if you have photoshop at hand you can make perfect jpgs. I use ‘save for web’ and visually compress to obtain the best result in size/quality. Sometimes I even use a quality of only 30 with good result. I never go over 1400 px wide. Sometimes, adding some 3 or 5 % noise (Filter) can do miracles to camouflage the loss of quality as well.

The human eye is forgiving, and even more if an image is used as background and the attention is drawn to a text or title.

Hans

3 Likes
3

thanks Hans. I’ll try that . I’ve been using ‘Save for Web’ at about 80% and then dragging them into compressor .io afterwards for good measure. It’ll be much quicker to do everything in PS.
If you’re going 1400px wide - how much height would you give it for a full screen banner ?

4

@James249 , I May have been a little sloppy earlier. Normal banners are ok with 1400 pix wide. Hero Banners need a little more. I usually set them 1720 x 1300 px.

Sorry for the confusion

1 Like
5

thanks Hans. I’ll have a go at 1720 x 1300px. This is larger than i’ve been trying - so it may be why i’ve been getting some pixelation/loss in quality.

6

@James249 , if you like to see an example, I’ve used a nice effect on One Page Website at the bottom of the page (4 images at 1720 x 1300). Depending on the complexity of the photo they vary between 180k and 360k.

Cheers,

Hans

2 Likes
7

brilliant, thanks Hans. I love those big parallax banners on that page.
I’ll try my banner at that size

1 Like
8

Thanks to @elixirgraphics who pointed me in the right direction to do this nice banner effect.

Hans

2 Likes
9

To keep crispness and reduce file size plus for Google and better SEO, I’ve been converting all JPG’s and PNG’s used in banners or anywhere on my sites to WEBP.

I do the same with video formats changing MOV and MP4 to WEBM files.

I use https://cloudconvert.com/

1 Like
10

Don’t forget some versions of Safari, that aren’t all that old, don’t support WEBP.

2 Likes
11

thanks, I’ll give that a try