What is the best size for massive header images on front page?

Question

Most sites these days have wide screen images that are responsive and fit most of the screen on home page.

Height seems to be at around 600 and width at 1920

However...when responsive it can shrink and so on...

I have access to images 5000*3000 pixels, so can crop to any size I want.

What is the best recommended size for this?

Answer 1

the best size is the smallest. Because such images, the bigger their file size is, the longer they take time to be downloaded. I see such images too, and they make me pretty wonder: people are trying to win something on the design side, but loose much more on the user experience side, because the big (and doubtless beautiful) images take more and more time to be loaded.

These are best practice for minimizing of load time impacts of big images - try to follow them aligning to your site's needs:

• Make use of or load images with help of media query depending of device type,
• create image versions for each device type (desktop, smartphone, tablet)
• strip images metadata before publishing
• use images in the web (low dpi) resolution
• optimize image size with something like compressor.io
• better load this big image asynchron and deferred: make a <span class="image-defer" data-src="my-big-img.png">Hello World!</span>, write into the span one or two meaningful sentences, and include on the end of the page's source code this javascript. On this way people come on the page and read your sentences in the span, while the image loads. Author of the deferring javascript describes this technique on his Gist page.

Answer 2

On the modern web you don't have to choose.

You can now use the srcset specification for responsive images. See this great series from cloudfour for more details, be sure to read the entire series. This allows you to serve different size images to different screen sizes.

You can use srcset today. 64.65%(at the time this was written source caniuse) of global users have browsers that support it.

Using a the picturefill polyfill you get even more support.

The great thing about srcset is, that it still works as before for browsers that don't support it.

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

browsers that don't support it will just use cat.jpg, while browsers that support srcset will choose the best fitting image for their viewport from the srcset attribute.

To get you started you can have a look at the new tool responsivebreakpoints to start determining some breakpoints for your website.

Oh and as Evgeniy says in his anwser, don't forget to optimize the images.