1

I have been creating a website on my laptop. And I keep the width of header image to 100% and height 400px. I optimize my images of sizes ranging from 800 px x 600 px to 1920 px x 1800 px to fall around 20 Kbs with optimizing tools online and offline. Whichever looks good on my screen i use them. But images loose their quality in bigger screens.

I guess I am totally wrong in my approach.

I am at a loss as to how to get my header images to have super quality on all screens without being heavier than around 20 kbs. (I believe that is a reasonably good weight per image on a page vis a vis loading speed). I could be totally off the mark here. I need to know how do professional developers and templates manage to have those perfect low weight high quality images. Is it totally a Photoshop process or are there some other methods too ?

The page I am referring to is here http://www.mylaundrywla.com

user3526204
  • 509
  • 5
  • 22
  • 1
    It is almost impossible to save a JPEG to high enough quality for every screen size at 20 Kb (unless its a flatly colored plane). You can't win them all, you will have to decide on the ideal size (probably around `1200px` at this point, which covers standard screens as well as high res mobiles) and maybe a very high resolution one for bigger screens. People with big screens have -in all likelihood- a powerful computer and a good internet connection, so you can serve them higher quality using media queries. But they're niches. – somethinghere Jan 05 '17 at 14:07
  • 1
    **If you're looking for a photo:** you're going to have to bite the bullet and accept that at larger screen sizes your image is going to be heavier than 20kb. That's less of a concern as larger screen sizes generally correlate with a broadband connection. **If it's a vector graphic:** check out SVG as it scales seamlessly without increasing file size. – Josh Burgess Jan 05 '17 at 14:23
  • Thank you guys, that does clear a lot of things. At least that I am not totally off the mark. And @somethinghere, I guess media queries would be the way to go as Shannon Young points out in the Answer. Thanks for the input. – user3526204 Jan 05 '17 at 14:33
  • @josh Burgess, I am looking at photos. Yep, I guess I need to bite that bullet. Thanks for the input – user3526204 Jan 05 '17 at 14:34
  • However as both of you mentioned, larger screen sizes do not always correspond to better computer or broadband connections in this part of the world (India). It was only as recently as last month mine got upgraded from 2Mbps to 10Mbps. Which again is the latest here...! – user3526204 Jan 05 '17 at 14:34
  • 1
    But then you are also not used to high resolution images as the internet connecting would be boring if you had to download them, so in terms of experience it will be similar to other websites, right? My main point is that people with large screens that need these high resolutions is a pretty small group and they're usually better equipped than the regular person. :) – somethinghere Jan 05 '17 at 14:37
  • Guess that line of thought should keep the perfectionist in me satisfied. ...thanks.. :) – user3526204 Jan 05 '17 at 14:38

1 Answers1

4

You should be using the picture element.

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media queries, it gives developers control as to when and if those images are presented to the user.

Source - http://responsiveimages.org/

Global browser support is at 74.27% according to caniuse.com

Picturefill

This can be polyfilled with Javascript to work in unsupported browsers.

A responsive image polyfill for <picture>, srcset, sizes, and more.

https://github.com/scottjehl/picturefill

Shannon Young
  • 1,536
  • 1
  • 17
  • 26
  • Thanks a ton, Shannon, I feel this is the best way to go about it ! And your statistic about browser support is much needed info too. I will have to work on the polyfills. At least I have some direction to work on now. Thanks again. – user3526204 Jan 05 '17 at 14:37