Taille des images RWD

Bonjour,


Je travaille sur un projet e-commerce html5 responsive design, le client me demande de lui fournir les tailles des visuelles des produits pour mobile et ipad ma question est comment calculer la taille d'une image pour mobile par apport a l'image d'origine (image pour desktop).

Dans le design les images des produits taille de : 244 de largeur et 136px hauteur.

Merci en avance pour vos réponses.

Bonjour

Regardez de ce côté

merci rodolpheb, j’utilise déjà un pluging jquerry qui permet de garder les image flexible selon le device mais j'ai toujour besoin de definir 3tailles d'images 1large, 1 meduim et 1 small (desktop, tablette et mobile) ce qu'il me faut c'est comment definir les tailles de ses 3 images.

Quel plugin par curiosité.

https://github.com/scottjehl/picturefill

J'ai un peu cherché et j'ai trouvé 2 liens:
lien1 et lien2

Oui, cette partie est déjà intégré sur mon site ce qu'il me faut c'est la façon dont il ont calculer les images

<picture alt="description">
<source src="small.jpg">
<source src="medium.jpg" media="(min-width: 400px)">
<source src="large.jpg" media="(min-width: 800px)">
</picture>


de large a small cest quel calcule ?

Je pense que ça va dépendre de votre mise en page:
sur mobile: les images sont alignées une par une verticalement ou 2 images par ligne.

Je n'ai pas vu de règle absolue dans ce domaine.

En proposant des maquettes sur les supports souhaités vous pourrez présenter votre projet.

Exact, mais on a toujours besoin des dimensions d'images je pense que je dois proviser et que y a pas vraiment de règle genre if mobile image de 100px dois être xx px ou quelque chose comme ca

Un article intéressant :
http://www.cafe-web.fr/tutoriels/responsive-design-pour-les-images.html

Merciiii

Sympa le lien pour tester les plateformes.

J'ai celui-ci :http://ami.responsivedesign.is

Sinon je suis en train d'adapter un site en responsive et je me rends compte que la maquette n'est plus du tout la même que celle prévue pour écran large (c-à-d qu'elle n'est pas une copie réduite) et il m'aurait été difficile de prévoir la taille des images à l'avance car entre temps j'ai effectué des changements de cap (après avoir testé en réel):
-suppression de certaines images, marges, augmentation/diminution de la font, etc.

Dans un premier temps je teste sous firfox (ctrl+Maj+M) une fois termine la page je vais un teste sous un smartphone + ipad.

Sinon pour ma maquette j'ai des bloc a cacher pour desktop et d'autre pour mobile