Guide to Properly Size Your Hero Images and Optimize Them for Site Speed
Tags: css, beginners
Published: 2018-05-24 13:42:58

---
title: Guide to Properly Size Your Hero Images and Optimize Them for Site Speed
published: true
description: 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 but you can't remember exactly what size you should make it.
tags: css, beginner
---

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
![Example of a hero background image](http://photos.lauraleeflores.com/n9bS/hero_bg_image.jpg)
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
![Example of Full Page background Image](http://photos.lauraleeflores.com/n9dE/full_page_bg_image.jpg)
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](http://photos.lauraleeflores.com/n8Ji/hero_image_template.sketch). 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](https://tinypng.com/). 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](https://itunes.apple.com/us/app/png-compressor/id434886325?mt=12) (macOS app) for all my images that are png. I use [Compressor](https://itunes.apple.com/us/app/compress/id405850942?mt=12) (macOS app) if the image is a jpg.

### Summary
[Download this sketch template](http://photos.lauraleeflores.com/n8Ji/hero_image_template.sketch) 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.