Pour mon code, l’idée c’est de dire :

Les images de classe « intro », remplace les, dans l’ordre, par :
– le contenu dont l’url est dans l’attribut « data-big » si l’image doit être affichée avec une largeur supérieure à 300px
– le contenu dont l’url est dans l’attribut « data-small » si l’image doit être affichée avec une hauteur inférieure à 50px
– sinon on affiche le contenu dont l’url est dans l’attribut « src » (l’image quoi)

La seconde partie c’est du CSS tout classique qui détermine des hauteurs et largeurs, et du coup change l’url qui est utilisée à cause de la règle plus haut.

L’avantage du bazar c’est que pour ce que j’en ai vu (mais 90% de chances que j’ai loupé quelque chose), ça respecte la grammaire de base CSS et c’est rétrocompatible (si ce n’est pas supporté, rien ne change).

Note que ma solution ne règle pas le problème du double download, qui AMHA doit pour le coup être réglé côté HTML, avec un attribut ou un meta qui limite l’analyse prédictive.