Quelle est la meilleure façon d'augmenter et de diminuer l'échelle des images dans un design web réactif pour les mobiles ?

Question

Quelle est la meilleure façon d'augmenter et de réduire l'échelle des images dans un site Web réactif ?

Il est préférable d'avoir une image différente pour chaque taille d'écran ou de mettre à l'échelle la même image vers le haut et vers le bas ?

Quelle est la meilleure option compte tenu des performances du site web ?

J'ai besoin d'un système de navigation croisée qui fonctionne sur tous les navigateurs mobiles, récents et anciens.

Answer 1

Sencha.io Src est une bonne solution (basée sur tinySrc).

Il détecte le périphérique, puis sert une image mise à l'échelle en fonction de la taille de l'écran du périphérique.

http://www.sencha.com/products/io/

Answer 2

@jitendra vyas,

La mise à l'échelle de la même image pour différentes tailles d'écran n'est pas une bonne chose, mais la mise à l'échelle des images n'est pas une mauvaise chose pour le responsive web design. Vous pouvez changer les images et le design à une certaine résolution spécifique comme 1024px et 480px parce qu'ils sont également une résolution de l'onglet et du dispositif mobile.

Il y a tellement de raisons comme :

1) pour un appareil mobile, le chargement d'images de grande taille est trop lourd.

2) la mise à l'échelle d'une image unique pour différentes résolutions est devenue à un moment donné laide, surtout pour les grandes images.

il existe des liens vers des sites de référence qui montrent comment utiliser intelligemment les images.

http://thinkvitamin.com/

http://colly.com/

http://css-tricks.com/

& article sur le sujet http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 3

Je pense écrire un petit plugin jQuery pour charger les images par ajax en fonction de la taille du conteneur. Mais s'il vous plaît n'hésitez pas à voler mon idée. (Il suffit de mentionner ici si vous l'avez terminé.) ;-)