What is the best image size for the hero banner?

Here are some best practices when it comes to optimizing your image for the hero banner module with CLEAN.

Right of the bat, there isn't one perfect size.

Generally speaking, you want to keep your image width between 1600 - 1920px. This will ensure that your big beautiful image will look good (not fuzzy) across devices. 

The height of your image will really depend upon how tall the hero banner is once you've added your content in. If your hero banner isn't very tall, you can crop the top or bottom of the image. This will help you save a little bit on file size.

If your hero banner fills more than half of the screen you may not want to be as aggressive with what you crop out of the top and bottom.

Want to keep it simple?

When you download a (landscape) image, simply resize the width and let the height set automatically according to the ratio of the image.  Use that!

What NOT to do... 

Download a high-resolution photo from a stock library and upload that without optimizing the image first.  This will make your website super slow and impact speed and performance.