1

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?

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.
1

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.

  • THis is quite complicated...my ideas come from the top 20 searches on Google for "Chicago web designers", are any of these sites with big images using any of these techniques? I'm using boostrap with Drupal Carrousel slideshow, shouldn't that optimize my images automatically? – Bruno Vincent Feb 4 '16 at 11:00
  • @BrunoVincent A big site with using this is theguardian.com I doubt that Drupal Carrousel slideshow will do any optimzations. My drupal days are just too long ago to help you there. But i think there must be some extensions/plugins that do responsive images using srcset. – Marco Tolk Feb 4 '16 at 11:08
  • Actually I did a quick survey of website size for the best design firms in New York, LA and Chicago. Agencies that design sites for massive corporations like Pepsi and Mc Donalds ect...their image and site sizes are humongous, up to 7 megs (I remember the keep page under 100 kb days...) Doesn't seem to make a big difference (pingdom.com). Simply optimizing image as best as you can seems to be enough, and of course media queries.One of my sites (satearn.com) with a big header sits at only 368 kb...tiny! – Bruno Vincent Feb 4 '16 at 12:30
  • If you try those sites on mobile networks it does start to make a difference. Chrome on cable 9sec onload webpagetest.org/result/160204_X3_R3P Nexus5 on not too fast 3G over 30sec for onload webpagetest.org/result/160204_JN_R53. To see difference: webpagetest.org/video/…. But it's up to you what is good enough. using responsive images is just a technique that can be used to send smaller images to devices that don't need the big images. It's a way to save bytes on those devices. – Marco Tolk Feb 4 '16 at 12:41
  • Well yes..I didn't think about that... – Bruno Vincent Feb 4 '16 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.