A more permanent solution exists however, in the form of a new HTML element - <picture>. This allows you to load certain images to show, based on the user’s screen size or pixel density - meaning you can serve high quality images to large screens on fast connections while serving optimised images to smaller screens on slower mobile connections. This will speed up the loading time of your website… saving your audience time and data allowance.
The <picture> element is fairly simple to construct; for example, the below will serve large.jpg to any screen size of 1024px or above, while smaller screens will be served small.jpg. Older browsers will only see and serve the <img> tag, allowing for some backwards compatibility.
<source media="(min-width: 1024px)" srcset="large.jpg">
The only downside to this new element is a lack of cross-browser compatibility - until the last month or so the <picture> tag has only work on the bleeding edge version of certain browsers. However, recent fundraising means that support for the <picture> tag will be coming to Google Chrome/Opera fairly soon, with Firefox and Safari support in the near future and Internet Explorer support under consideration.