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.
Top comments (5)
I'm super confused by the pixel measurements because they don't seem to map to aspect ratios:
but 1600x500 isn't 16:9? What am I missing?
Same question with the later images that you say should be 4:3 but then list 1600x1000 (which would be 4:2.5)
Both JPEG and PNG will also have an easier job compressing blurred parts, because of the lower signal amplitude change (JPEG in most cases even more than PNG). By blurring unimportant parts of your images, you can reduce the resulting compressed file significantly. For compressing JPEG, use github.com/google/guetzli; PNG is best reduced in size by using pngquant --strip (to strip out metadata).
For images that are not photography/-realism, seriously consider using SVG (and svgo to optimize it; if you're a front-end developer like me, you could hand-optimize frequently used image parts with the use-tag even more).
For JPEG, be sure that your image dimensions can be evenly divided by 8, because this format will store the image in 8x8 blocks anyway. If you support modern browsers, also consider WEBM and using the picture-tag and/or minimal CSS/SVG shims to have something during the time a larger image is loading.
I like using squash on Mac for optimisation
Thanks, that's extremely useful and practical!
Hi: I am trying to download the sketch template and it doesn't seem to be available.