how to create effective header images to adapt to all screen sizes without pixelating

Question

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

Answer 1

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