5160 sujets

Le Bar du forum

[Résolu] Images de contenu extensibles

Salut,

Je souhaiterai vous demander un avis objectif, avec les arguments pour et contre, du procédé suivant :
J'ai dans l'optique de faire un site semi fluide (avec une largeur minimum de 980 pixels et maximum de 1240 pixels). Ce site doit comporter une galerie d'image.
Je me posais la question de savoir s'il serait viable ou non selon vous, d'afficher les images à 100% de la largeur dont elles disposent (variant ainsi entre 400 pixels et 660 pixels), ceci afin de remplir l'espace quelle que soit la résolution.

Bref qu'en pensez vous ?
Modifié par Mikachu (22 Apr 2010 - 10:51)
Salut,
Mikachu a écrit :

Je me posais la question de savoir s'il serait viable ou non selon vous, d'afficher les images à 100% de la largeur dont elles disposent (variant ainsi entre 400 pixels et 660 pixels), ceci afin de remplir l'espace quelle que soit la résolution.
Bref qu'en pensez vous ?
Pas bien compris, tu voudrais redimensionner la largeur des images via CSS sans tenir compte de leur taille intrinsèque? C'est pas possible qu'est ce qui t'arrive Mikachu, quelle est donc cette drogue qui te fait revenir 10 ans en arrière? Smiley lol
Hum je sais pas, à mon gout tu pourrais éventuellement faire un mix de plusieurs solutions grace à Smart Columns qui permet d'adapter la largeur des blocs de façon dynamique pour ne pas perdre d'espace... Ca peut éviter d'agrandir forcément si la place si libère pour une colonne entière.
Merci de vos réponses.

@Hermann : Non pas de drogue, juste beaucoup de kleenex ces derniers jours.
La taille intrinsèque des images serait prévue pour la plus grande des résolutions possible de l'image, à savoir 660px. A voir ensuite pour l'optimisation du poids si 620px ou 580px pourrait suffire, nécessitant un léger agrandissement maximum, mais avec la compression qui va bien ça peut passer sans se voir.
En plus faible résolution, l'image pèsera forcément plus lourd que nécessaire vu qu'elle sera réduite, mais vu les connexions actuelles, peut être est-il possible de se le permettre, surtout pour une galerie.

@HammHetfield : Merci pour ton lien, mais cela ne s'appliquerait pas réellement à mon cas, car il n'y aurait pas plusieurs éléments par ligne, mais bel et bien un seul.
Hello,

- Pas trop choqué par le fait d'afficher en 400px une image de 660px. Bien sûr pour ce cas de figure précis le poids de l'image téléchargée sera plus important que nécessaire, mais pour un site pour lequel tu ne peux pas passer des jours à optimiser ça reste acceptable.

- Redimensionner une photo JPEG vers une taille légèrement ou sensiblement inférieure, ça donne un rendu très correct dans les navigateurs. À tester dans divers navigateurs. Pour IE6 je te suggère de laisser tomber. Pour IE7 tu devrais pouvoir utiliser -ms-interpolation-mode (astuce by dew).

- Les effects JavaScript + CSS du type Lightbox font déjà ce genre de chose en affichant une fausse pop-up dont la taille maximale tient dans le viewport, ce qui demande de redimensionner l'image en CSS quand elle est plus grande que le viewport.
Merci de ton avis Florent, et pour l'astuce aussi, je ne la connaissais pas.
Pour le site je n'ai pas d'impératif de date précisément, donc je peux l'optimiser.
Mais je trouve mes choix limités en réalité, au nombre de 3 :

- soit je reste sur une largeur fixe, vraisemblablement 980px de large, ce qui permettra de connaitre la dimension des images à l'avance.

- soit je suis en largeur variable, et les images sont enregistrées à la taille minimale. Elles rempliront l'espace mais en cas d'agrandissement de la fenêtre, il y aura du coup un espace qui va se créer entre elles et le contenu latéral.

- soit je suis en largeur variable et j'adopte ce principe d'images à 100% de largeur, ce qui fait que le contenu occupe un plus grand espace dans la fenêtre du navigateur du visiteur, en gardant toujours une mise en forme similaire. L'agrandissement de l'image améliorant l'expérience du visiteur, qui en profite proportionnellement à la largeur du navigateur.

L'idée du site semi fluide me plait bien, mais sur un site présentant des images cela présente malheureusement ce désavantage que j'aimerai contourner, d'où la demande d'avis pour savoir si c'est vraiment à éviter totalement, et si ou pourquoi, ou si au contraire pourquoi pas.

Merci d'avance d'autres avis, n'hésitez pas ! Smiley smile
Bonjour,

J'utilise pour ma part un script côté serveur pour retailler les images. Ça donne une url du genre http://monsite.com/monimage.jpg?width=440 , le width=440 pouvant tout à fait être ajouté/modifié via javascript.

Ça permet d'avoir une image de qualité et de poids correct sur tous les navigateurs. Reste à savoir si le boulot supplémentaire demandé au serveur en vaut la chandelle, et ça, c'est à voir au cas par cas.

a écrit :
- soit je suis en largeur variable et j'adopte ce principe d'images à 100% de largeur, ce qui fait que le contenu occupe un plus grand espace dans la fenêtre du navigateur du visiteur, en gardant toujours une mise en forme similaire. L'agrandissement de l'image améliorant l'expérience du visiteur, qui en profite proportionnellement à la largeur du navigateur.


Moui. Ça va agrandir en hauteur aussi, et avec un écran large, mais pas très haut, ça peut être frustrant.
Modifié par Lanza (28 Feb 2010 - 17:44)
Salut, et merci de ta réponse.

J'ai pas tout saisi, en fait quand tu dis que tu retaille les images, c'est que tu les rogne en fait ? Tu supprime la partie qui dépasse ? Car dans mon cas c'est pas possible de le faire !
Si c'est juste une redimension, pourrais-tu m'expliquer un peu plus le procédé s'il te plait ?

Sinon pour la dimension, pas de soucis car il s'agira d'image plutôt horizontales (300px de haut maximum, même si c'est pas défini précisément encore). Par ailleurs le public cible ne devrait même jamais avoir besoin de la version 1024x768, et devrait toujours être en bien plus grande résolution. C'est plus une sécurité.
Salut,
si tu veux faire au plus simple et partir sur du semi fluide, une astuce pour diminuer la taille de l'image proportionnellement (syntaxe qui exclue IE6)

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

Modifié par Hermann (01 Mar 2010 - 17:31)
Merci. Mais d'après ce que j'avais testé, si on ne spécifie aucune hauteur, j'ai eu l'impression que l'image s'adaptait automatiquement quelle que soit la largeur.

Concernant la prise en charge pour les utilisateurs sous IE6, vu leur nombre actuel il est pas sûr qu'il soit nécessaire de s'en préoccuper. A voir si ça complique trop les choses ou non.
Rapidement: j'ai pour ma part longuement lutté (avec raison et finalement avec succès) pour que ce genre de pratiques ne soit pas proscrites via Opquast. Tu fais du redimensionnement d'image côté client dans un objectif de qualité bien délimité et tout à fait défendable. Pour info, j'ai vu le choix d'un projet de parc de sites publics se porter sur une solution de galerie d'images parce qu'elle comportait ce type de fonctionnalité, récemment. Va où le vent te pousse...

Le pire problème que tu puisses rencontrer est d'avoir à montrer que c'est anodin.
Modifié par Laurent Denis (08 Mar 2010 - 21:29)
Merci de ton avis.

Tu résume bien ma vision, à savoir que je contraint un peu plus les petites résolutions en terme de poids de fichier, ils auront plus de pixels à télécharger que nécessaire, mais c'est aussi dans leur intérêt, vu que cela améliorera leur expérience utilisateur en évitant une barre de défilement.

Pour les utilisateurs en résolutions supérieure ou égale à 1280 pixels de large (soit une très grande majorité, 72% si ma mémoire des statistiques du site est bonne) cela ne devrait en rien changer leur visite. Et qui plus est ils bénéficieront d'une dimension d'image plus confortable que si je me laisse contraindre par les petites résolutions.

Je vais donc me laisser pousser par le vent alors ! Smiley ravi

Merci encore.
Sujet clos
Aller à