Conception réactive: différentes images pour différentes tailles d'écran

Notre client veut avoir une autre image de la bannière sur des écrans plus petits que sur les grands écrans. Pas simplement rétractable/étirer pour s'adapter, mais le fait de substituer une image différente. L'image plein taille est assez complexe -- plusieurs personnes, deux logos, et des éléments de décor du texte -- et donc, pour la petite image qu'ils veulent rogner quelques personnes, déposer les logos, etc. Ils veulent donc le plus grand, le plus complexe de l'image pour les ordinateurs de bureau, d'un petit plus simple de l'image pour la mi-taille des appareils, puis les plus petits et encore plus simple pour les plus petits.

Quelle est la meilleure façon de le faire?

Ma première pensée est pour inclure tous les trois images, et l'utilisation de @media min/max largeur à faire deux d'entre eux, invisible à tout taille. Comme:

@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px)  { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px)  { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }

Cela devrait fonctionner, mais il serait de télécharger tous les trois images à chaque fois, ce qui semble plutôt un gaspillage de bande passante.

Je pouvais changer les images à partir des balises img css images d'arrière-plan. Serait-ce mieux? Serait-évitez de télécharger tous les trois ou serait-il encore le faire?

Je pensais à écrire du JavaScript pour mettre à jour dynamiquement l'URL dans la balise img basé sur la taille de l'écran, mais ça semble être un tas de complexité.

J'ai brièvement pensé à faire le logos et le texte des images séparées et de casser l'image réelle en morceaux et puis d'essayer de les assembler de toutes les images qui se chevauchent. Mais cela ressemble à beaucoup de travail pour obtenir le droit, et puis j'aurais à assurez-vous qu'il regarde, à droite, à tous les possibles de tailles, pas si facile de simplement rétractable ou extensible, etc. Et tandis qu'il est probablement possible dans ce cas particulier, je préfère une solution générale que je peux utiliser dans l'avenir.

Quelqu'un fait quelque chose comme cela et d'avoir quelques idées sur la meilleure façon de le faire?

source d'informationauteur Jay