taille image responsive designFaire du responsive design oui, mais dans la simplicité. J'ai lu toute une flaupé d'articles / billets traitant du sujet et en particulier d'optimisations pour le traitement des images. Il est clair que l'avènement de la data sur mobile nous pousse depuis quelques années à repenser l'approche du développement web afin de répondre à ces nouvelles problématiques d'ergonomie et de design pour ne pas perdre le trafic des mobinautes. La question est complexe à traiter si on veut le faire de manière rigoureuse.

J'ai eu du mal à trouver des solutions qui me conviennent car il était important pour moi d'avoir du code extrêmement simple à maintenir et de pouvoir poster très rapidement du contenu. J'ai donc fini par adopter pour unblogdetrop des media query et j'ai été très rapidement confronté à la questions de la taille des images. En effet les media query permettent de faire appel à des feuilles de styles css spécifiques en fonction de critères comme par exemple la résolution. J'ai fais le choix de créer 2 feuilles spécifiques: une pour écran larges (desktop) et une autre pour des écrans plus petits (smartphone/tablettes). La simplicité du flux de données, la typographie et la cible du blog me permet de faire ce choix un peu réducteur face à l'étendue de la problématique mais vous pouvez imaginer des imbrications de styles plus complexes en gardant malgré tout à l'esprit qu'il faut économiser le nombre de requêtes http et donc limiter au maximum le nombre de feuilles de styles.

Ainsi, après la mise en production des media query, vous rencontrerez certainement le cas où la taille d'une image dépasse la largeur du viewport. Vous pouvez obtenir des problèmes d'affichages assez improbables, il est donc tout naturel de vouloir contrôler la taille des images afin qu'elles s'adaptent quelque soit la largeur du flux. Une petite astuce css permet de palier ce problème:

Citation :

img {max-width: 100%;height:auto;}


En définissant une taille d'image à 100% et une hauteur "auto" l'image s'adaptera ainsi automatiquement proportionnellement à la largeur du conteneur et donc du viewport. Attention cela a pour conséquence d'annihiler tout effet de zoom, par exemple sur mobile un utilisateur qui zoome pour mieux voir l'image, puisque la taille de l'image ne pourrait être plus grande que son conteneur (par extension le viewport). Vous pouvez par exemple faire un lien sur l'image si celle-ci mérite d'être étudiée en détail.

Enfin cela ne réduit en rien le volume échangé sur le réseau mobile puisque les même images sont affichées sur tous les types d'écrans mais cette solution a pour avantage d'être très simple, rapide à implémenter et me parait être un bon compromis pour des sites au trafic modeste et n'ayant pas de contraintes particulières.
Partager sur:
A propos de l'auteur:
Guillaume Jeantet: titulaire d'une licence pro et fort de quelques années d'expériences je suis administrateur système et développeur mais surtout un autodidacte dynamique et passionné. Je partage sur UBDT mes coups de coeurs et astuces.

Autres articles qui pourraient vous intéresser.

optimiser mise cache mutuOptimiser la mise en cache sur les mutu ovh et autres hébergeurs
Optimisez le chargement de vos pages web en utilisant le mécanisme de cache sur les serveurs ovh et d'autres hébergeurs. Voyons comment faire avec mod_expires.
internet explorer erreur 404 font faceErreur 404 css @font-face avec internet explorer
Des erreurs 404 sont générées en utilisant le sélecteur css @font-face par internet explorer, découvrez pourquoi.
unblogdetrop version 3Unblogdetrop V3: nouveau design !
Je vous présente la version 3 d'un blog de trop, celle-ci intègre désormais de nouveaux effets CSS3 tels que des transitions, transparence, ombres portés, arrondis etc.
css3 transformations transitionsCSS3: transformations et transitions
Css3 ouvre de nouveaux horizons pour les développeurs et designers web, découvrez comment mettre en œuvre les transitions avec des transformations et obtenir des effets cools en CSS3 !

Proposer un nouveau commentaire

Votre pseudo s'il vous plaît :

Email (Facultatif, n'est pas affiché et permet de recevoir des notifications de validation / réponses):

Votre site Web (facultatif) :

Exprimez vous :

:arrow::D:confused::cool::cry::eek::evil::!::idea:lol:mad::|:?::p:redface::rolleyes::(:):wink: