Size of a Hero Image

Design help General
1

I am trying to create an image that will be a hero image on my website. I would like it to take up the entire screen while in view. What size do I need to make the image?

Thanks!

1 Like
2

Hi @mktgmeg, you can have the image be a background to your full screen container, and use the Cover property for your image, center anchor if you want the image anchored to the center of the page, and then set repeat to off.

You should use that size image, which can expand beyond it’s own normal size, and not get so pixelated. You can make the container for your image be either 100% full height and width, or you can set fixed dimension. What I like to do with Hero sections, is size that with 16:9 aspect ration layout, and then put pictures or videos that are also 16:9 aspect ratio, so that everything resizes nicely, and I resize the hero image to smaller 16:9 versions for each viewport (desktop, tablet, mobile landscape, mobile portrait.

I hope that helps, the main thing to think about is aspect ratio, and then file size, so make sure you compress your larger images and smaller images to lower than 500kb for hero image and then lower than 100kb for section bg images. There are many ways to build your site in this way, but optimize for aspect ratio and image size :slight_smile: that’s my tip :smile:

3413x1920 will get you some high quality 16:9 while 1067x600 may be enough for you for some blurry background and considerable smaller file size. Both dimensions are 16:9 widescreen format, so will resize the same way, just with different clarity and pixel density :smile:

You can of course maintain any aspect ration you want :slight_smile: I just use 16:9 as an example, you choose :smile:

Here is an aspect ration calculator for different target aspect ratios.

http://www.digitalrebellion.com/webapps/aspect_calc.html

I hope that helps, Cheers, Dave

4 Likes
3

Thanks so much dave for your suggestions! I’m looking over the ratio calculator now! Thanks again for getting back to me so quickly!

1 Like
4

I prefer using aspect ratio calculator from ninjaunits, here is a link if still needed http://www.ninjaunits.com/aspect-ratio-calculator/ Hope that helped you :slight_smile:

2 Likes