Adaptive images et responsive web design

Bonjour,

je code un site qui exploite des ressources externes (des jpegs), lorsque je les code pour les écrans d'ordi (portables et ordis de bureau), je mets l'image en background url d'une div à laquelle je mets en width et height les dimensions en pixels de l'image, jusque là tout le monde aura compris je pense (sauf si je m'explique mal):D.
Le problème est que je dois exploiter ces ressources aussi sur smartphone, et comme idée j'aurais donc de faire la même chose que expliqué précédemment, donc je répète mettre l'image en background url d'une div mais cette fois en ayant modifié les dimensions de l'image et donc en adaptant les width et height de la div aux nouvelles petites dimensions de la nouvelle image (nouvelle image qui est une réplique de l'initiale mais avec de plus petites dimensions). Le problème avec cette solution c'est que sur smartphone on ne dicernera rien de ce qu'il y a sur la petite image.
Et pour résoudre ce problème j'ai trouve ce lien:
http://blog.nursit.net/Adaptive-Imag...nsive-Web.html
..c'est compliqué ce qui est expliqué sur ce lien.

Pour ce type de problème, savez vous ce qu'il est possible de faire?

merci

Bonjour,

Citation:

---

Envoyé par abc.xyz

...je mets l'image en background url...
...sur smartphone on ne dicernera rien de ce qu'il y a sur la petite image...

---

1/ Je ne vois pas l'intérêt de mettre l'image en background, sans balise img, car elle perd sa valeur sémantique d'"image".

2/ Sur une petite image : un simple lien dessus pour afficher la grande image et le tour est joué.
Affichage en marie poppins, par exemple.

Bonjour,

je ne comprends pas la réponse qui m'a été faite.:?

"Sur une petite image : un simple lien dessus pour afficher la grande image et le tour est joué.": Je ne comprends rien à cette phrase:weird:

Bonjour,

Code:

---

<a href="./images/grande-image.jpg"><img src="./images/petite-image.jpg" alt="" /></a>

---

On peut ajouter un système de popin (lightbox). :google:

Bonjour,

merci jreaux62 de te pencher sur mon problème, cependant, au risque de dire une belle bêtise, je ne vois pas en quoi ta solution d'afficher une grande image avec un lien résoud le problème.:roll:
En effet mon problème est que la consultation sur les petits appareils soit bonne c'est à dire que ce qu'il y a sur l'image soit net à l'oeil nu, comment veux tu que ta grande image "rentre" correctement dans l'écran d'un telephone? Avec un plugin peut être c'est ça que tu veux dire?Seul un plugin le permettrait?c'est ça?:)

Bonjour abc.xyz,

Ce que jreaux62 t'explique est que tu peux opter pour une fonctionnalité permettant à l'utilisateur, en faisant un tap sur l'image, de la visualiser en plus gros dans une popin qui s'affiche par dessus le site. Ce procédé ne résout pas le problème de taille directement visible, mais permet malgré tout de pouvoir voir l'image en détail si on le souhaite.

Si ce procédé ne suffit pas, par exemple si ton image prend déjà toute la largeur sur mobile et que malgré ça elle n'est pas bien visible, la question à se poser est : est-ce que cette image est réellement nécessaire ? Tu la poses en background, j'aurais tendance à dire que non. Si elle est importante, comme disait jreaux62 plus haut, préfères la mettre dans une balise img. Une autre question : est-ce que cette image ne serait pas trop détaillée pour être vue sur mobile. Si les traits sont trop fins et/ou l'image trop grande, peu importe tes efforts, elle ne sera pas visible sur mobile.

Si cette image passe en plus petit, je te conseille d'avoir au moins 2 images à des tailles différentes, pour une question de poids. N'oublions pas que les smartphone ont une bande passante limitée et forfaitaire. Enfin, sache que tu peux redimensionner une image en css (préfère les max-width et max-height aux width et height pour éviter les déformations). N'oublie pas cependant que redimensionner une image en css, c'est joli, mais ça ne change pas son poids.

En espérant t'avoir aidé.