Change image based on screen size

Mobile based viewers of your website are going to be on smaller screens and  (in theory) have slower internet, thus making a decent means for smaller sized and lower quality images. These smaller images become hideous for the PC or “full sized” view ports.

Being able to switch your images based on screen size is a task easily done, in fact you don’t even need JavaScript!

The magic lies in the picture element and then obviously the source tag is involved too.

In this example below if the viewing screen is 1000px or wider the image will be red (red.jpg), if it is 470px to 999px the image displayed is blue (blue.jpg). On screens less than 470px the image displayed is green (green.jpg).

<picture>
    <source media="(min-width: 1000px)" srcset="red.jpg">
    <source media="(min-width: 470px)" srcset="blue.jpg">
    <img src="green.jpg" alt="imagealttext">
</picture>