Les images réactives, servant petit sur mobile avec téléchargeable comme original

Question

J'espère que le titre n'est pas trop confus. J'utilise des images adaptatives pour détecter la taille d'écran d'un visiteur et créer, mettre en cache et distribuer automatiquement des versions redimensionnées des images HTML intégrées de la page Web. Maintenant, certaines personnes souhaitent enregistrer des images sur leurs mobiles/smartphones, mais l'utilisation d'images adaptatives pour afficher une image de plus petite taille (pour économiser la bande passante/temps de téléchargement) leur donne une image plus petite - plutôt qu'une belle image. taille ou l'image originale.

Est-ce que quelqu'un a des idées sur ce qui suit?

1. Au service des images mises à l'échelle
2. Avoir la mise à disposition d'origine si les gens veulent les sauver

Answer 1

Depuis le site Web Adaptive Images:

Il crée et gère ses propres images redimensionnées en utilisant vos «images existantes en tant que source», et il s'adaptera aux mêmes parenthèses de résolution que votre site avec les requêtes CSS3 @media utilisées dans votre Responsive Design.

Vos images sont toujours la "source", c'est seulement en les adaptant à la visualisation. Essayez de télécharger une image et d'afficher les propriétés. Il conservera les dimensions d'origine, I've linked a jsFiddle demonstrating how @media queries work. Si vous rétrécissez l'écran et essayez de télécharger l'image, vous verrez les propriétés "originales" lors de la mise à l'échelle appropriée.

requête @media:

@media screen and (max-width: 480px) { 
    #lincoln img { 
    height: 100px; 
    width: 150px; 
    } 
}