One of simplest solutions could be the Cascading Style Sheets, level 2 (CSS2) content property. With a code like the following:
@media only screen and (min-width: 501px) {img[src="img_front4_small.jpg"] {content: url("img_front4_big.jpg");}
It might be possible to replace img_front4_small.jpg
with img_front4_big.jpg
. The relevant images (defined by content:
statement) are being downloaded by the browser only when the media query condition is met. The brilliant simplicity of this concept is dimmed by the following two facts:
This is now only possible in Chrome, Safari, and Opera. In theory, content is a part of the CSS2 specification that is relatively old and widely implemented. This use case is a special one though and it is not well supported. The same applies to CSS
:before
and:after
pseudo elements. Its wide support doesn't apply to theimg
tag.CSS is really handy when it comes to managing content versions. To make...