Here at Digital Developments, we bang on a bit about website speed. That’s because it is not only a ranking factor for search engines such as Google but it also significantly affects the user experience of potential customers.
One of the major factors causing websites to be slow is having a large number of images loading on a page but also images with a high resolution (or large in dimension) as modern computer monitors get bigger. This can frustrate users and quickly turn them away from your website, losing you traffic and sales.
While having large images that allow for large monitors can’t always be avoided, you don’t want those same images loading on smaller devices such as tablets and mobile phones, especially considering these devices are most likely used out and about where they may be relying on slower connections.
One way to combat this is by serving up a different image depending on the size of the screen. Obviously, there is no point loading all of the different sized images and showing/hiding them with CSS because the element will still be loading in the background, slowing down your website.
In the last few years the W3C community has been developing the <picture> HTML element to offer a declarative approach toward loading images. This allows you to easily define <source> sub-elements and set what resolution they load for. Within this you can also use the standard <img> tag to allow for browser fallback.
Here is a working example. You will notice if you drag in your window, the image of the cat will change. 
The only downside is that this may not working in all web browsers, so keep an eye on the Can I Use page for compatibility information.
The stock standard <img> tag has also had some updates, allowing for the sizes and srcset attributes. The sizes attribute tells the browser what percentage of the viewport image will take up, while the srcset attribute sets the images and what screen width they will show at.
Again this may not work in all web browsers, so you should also keep an eye on the Can I Use page for compatibility information.
As mentioned above, you can use the <img> element with sizes and srcset attributes in conjunction with the
For those who the Zurb’s Foundation framework, they have incorporated a little plugin to their package called Interchange. This does the resource loading using Javascript. Simply define each of the images in the data-interchange attribute along with the breakpoint you want it to appear in and interchange does the rest. These days most modern browsers use Javascript so the compatibility should be pretty high.
The other advantage of Interchange is you can use this feature for elements other than images. You can have it load a different HTML page into the section of a page depending on the size of the device. For example you might load a Google Map for desktop devices, where as a tablet and mobile may load an image with link to open the location in the Google Maps phone app.