Hero Image Size Guide to Properly Size Your Hero Images and Optimize Them for Site Speed

If you're like me you've run into this too many times to count.

Your web page needs a new image for the hero section or top part of your page. You want this image to be large enough for any size screen but not so large that it will significantly slow down the load time on your page. You don't want it too tall either.

You've done this a bunch of times but each time you open up your design tool to create your hero image, you can never remember what size that hero image should be.

You know the first thing is to get the dimensions of the image right.

Hero Background Dimensions

If your image is going to be header/hero background image you'll want to maintain a 16:9 aspect ratio. I make my header images 1600 x 500px.

Full Page Background Image Size

If you're creating a full page background image you'll want to maintain a 4:3 aspect ratio and I make these images 1600 x 1000px or sometimes 1920 x 1200px. I usually do both sizes and then compress them. If the larger image compresses well and isn't too large I go with the larger image.

Mobile Image Size

Depending on how things respond and look on mobile I will sometimes switch out the hero image on mobile (using a media query) to use the correct aspect ratio for smaller screens. I typically make these mobile images 800 x 1200px.

You can swap out hero images like this:

.hero-image {
  background: url('my-hero-image.jpg') no-repeat center top;
  background-size: cover;
}
@media (max-width: 768px) {
  background: url('my-mobile-hero-image.jpg') no-repeat center top;
}

This would show your background image until the screen size is down to 768px wide. And then anything smaller than 768px wide view port the hero image will instead show the mobile image.

Download Sketch File

In order to save yourself time and energy from having to search for this next time you have to create your next header, just download this sketch template. The template has an artboard for each a header image, a full page image and a mobile image.

Save it someplace you will know to look for it the next time you will need to create an image for your website. So that next time you need to create a new image you only have to open up this sketch file and you're off.

Image Optimization

Once you know the height and width of your image you want to shift your focus on keeping the size of the image small enough.

Sometimes a jpg is smaller and sometimes a png is smaller. Typically, for this type of image the jpg is going to be smaller. But, if you're unsure export both the jpg and the png. Use which ever one is smaller naturally for the next step.

Now you'll want to compress your image to make it the smallest possible size without making it pixelated. As a general rule try to reduce the size of your image to be at around or smaller than 400 kb.

Image Compression Tools

If you haven't done this a thousand times already you should do this for every single image you put up on your website. Every time you do this you are in essense speeding up the load time of your web pages.

If you don't have a tool you can use Tiny PNG. I personally prefer to have the tool on my computer to use anywhere and anytime without the need for an internet connection. That's why I use PNG Compressor (macOS app) for all my images that are png. I use Compressor (macOS app) if the image is a jpg.

Summary

Download this sketch template of each of the header images you will likely use for each page. Once you've downloaded the image export it and compress it so that it's the smallest size it can be without being pixelated (hopefully less than 400kb). And remember only put images on your website that have been compressed.