Discussion :

[atira]

J'ai une image assez grande, qui est dans une logique d'affiche.
elle est de format rectangulaire en hauteur.

je vais la diviser en quatre zones (donc 4 div, contenu dans un conteneur général), avec l'idée de conserver l'image en fond de l'affiche.
Ces quatre div auront:
en haut à gauche: du texte
en haut à droite: rien d'autre que le fond de l'affiche
en bas à gauche : un formulaire.
en bas à droite: des zones sensibles avec image cliquable.

Pour optimiser le temps de chargement j'ai découpé en plusieurs images chaqu'une des quatre partie de mon affiche, suivant les 4 div.

Ma question:

Pour placer ces imagettes les unes sous les autres, je ne sais si je dois insérer autant de "sous" div ou si je dois utiliser une autre balise?
Bien entendu, l'image ne peut être substitué à une couleur de fond.

merci de l'info.

[Erwan31]

Bonjour,
le problème n'est peut-être pas tant de savoir comment découper ton affiche
que de minimiser au maximum son poids et de choisir le format le plus adéquate (le JPEG progressif voire même le gif entrelacé éventuellement) pour un affichage progressif. Le temps de chargement sera le même ( à peu de chose prés pour les format progressif) au final même si ta' démarche est tout à fait compréhensible.

Tout dépendra aussi de ce que tu souhaites rendre accessible (visible et exploitable par les robots des moteurs de recherche, indexation du nom de l'image...).
Donc il faudra nous en dire d'avantage sur le contexte, la cible etc.

[pop_up]

a titre d'information, est ce que le fait de couper une image en quatre change vraiment le temps de chargement ?

Parce que qu'on ait un image de 80Ko ou 4 images de 20Ko, au final on aura toujours 80Ko à charger non ?

[Erwan31]

a titre d'information, est ce que le fait de couper une image en quatre change vraiment le temps de chargement ?

Parce que qu'on ait un image de 80Ko ou 4 images de 20Ko, au final on aura toujours 80Ko à charger non ?

Oui le temps total de chargement sera sensiblement le même (peut-être un peu plus long s'il le nombres d'image à charger est important > multiplication des requêtes) Mais là pour le détail il faudrait demander à un spécialiste!

Ceci dit le fait de couper une image de très grande taille qui permet de voir l'image morceau par morceau peut être intéressant... mais comme beaucoup de chose c'est une question de choix personnel et de ce que l'on souhaite montrer et comment.

[CUCARACHA]

Salut,

Le titre est une toute petite touche d'humour que , je l'espère, vous me pardonnerez...

Le mieux est de limiter au maximum les grandes images ou de déclencher leur téléchagement sur ordre après que les éléments les plus importants soient arrivés.

Bien sûr, il faut une picée de javascript, un soupson de patience et un chouilla de savoir faire...

Concernant les image, 80ko arrive plus vite en une fois qu'en 4 (il n'y a qu'un seul header http contre 4) mais ça parât plus long.

A mon avis, le mieux (et c'est ce qui sera dispo dans la nouvelle version de mon CMS pour les fonds) est de récupérer la taille dispo de l'écran et de redimensionner l'image avant de la transmettre, ça sollicite moins la bande passant mais ça fatigue plus le serveur.

Comme d'hab pour le web, il faut chercher le meilleur compromis en fonction du cas...

++

Laurent

[Erwan31]

Concernant les image, 80ko arrive plus vite en une fois qu'en 4 (il n'y a qu'un seul header http contre 4) mais ça parât plus long.

C'est bien ce que je me disais

A mon avis, le mieux (et c'est ce qui sera dispo dans la nouvelle version de mon CMS pour les fonds) est de récupérer la taille dispo de l'écran et de redimensionner l'image avant de la transmettre, ça sollicite moins la bande passant mais ça fatigue plus le serveur.

Tu veux dire redimentionnée via un éditeur graphique? (pas en html/css?)
C'est un peu ce que fait IE non?

[CUCARACHA]

Salut,

En fait, je ne développe pas uniquement la couche cliente. Je m'occupe aussi de la couche serveur. En conséquence, il est possible traiter les images lorsqu'elles sont appelées.

Personnellement je travaille en asp.net c# mais tu peux le faire aussi en asp ou en php (à vérifier).

Sous IIS, il suffit d'associer les suffixes possibles des images .jpg, .gif et .png à la bibliothèque .net avec laquelle tu travailles.

Ensuite il faut implémenter l'url rewriting pour que l'utilisateur n'y voie que du feu (pour éviter que le nom de l’image ne finisse par .aspx au lieu du suffixe normal de l'image).

Enfin, lorsque ton application reçoit l'ordre de traiter un .jpg par exemple, le système redirige la demande vers une aspx. Tu changes le type mime pour qu'elle renvoie une image et tu utilises la bibliothèque qui va bien pour la redimensionner.

Du coup, si tu ouvres une page sur un navigateur 1024x768 ton fond prend cette dimension, si c'est 1600x1200 l'image est redimensionnés en conséquence.

Personnellement, je stocke mes fonds en 1600x1200 et je les rends plus petit. Lorsque l'écran est > 1600x1200, je ne fait pas grossir l'image avant le transport, c'est le CSS qui s'en charge côté client.

Attention, si tu utilises des images 1600x1200, veilles bien à ce qu’elles soient bien compressées. Pour ce faire j'utilise Corel Photo Paint mais tu peux aussi utiliser Gimp qui est gratuit ou Paint .Net qui est moins puissant mais qui est super light et tout aussi gratuit que Gimp.

Voili voila...

++

Laurent

[Erwan31]

Merci pour ces explication Laurent, moi qui ne fais pas de dev. je ne pouvais par savoir tout ça de toute évidence, même si je peux parfois deviner de loin
certains aspect...

Appart ça je ne sais pas quel est le meilleur soft pour optimiser le JPEG mais personnellement j'utilise Photoshop (un inconditionnel du produit) et il fait ça
bien je trouve. Ce qui ne fait pas bien en revanche c'est l'otpimisation des PNG.

[MasterOfChakhaL]

Salut,

J'ai l'impression qu'on s'écarte un peu du sujet...

Plutôt que de découper ton image en zone suivant la position, je te conseillerai plutôt de la découper de manière logique.

Ce que j'entends par là, c'est de faire un peu comme les calques avec photoshop (ou équivalent).
Tu pourrais séparer le fond, l'image qui reprend ton texte, l'image qui contient des zones cliquables...
Puis tu positionnes tout ca avec une touche de css.
L'image de fond serait placé grâce à un background en css. L'image avec les zones cliquables serait directement dans l'html. L'image avec le text serait aussi dans l'html avec un attribut alt qui reprend le texte.

Je vois plusieurs avantages à faire cela de cette manière:
- tu découpes ton document en t'appuyant sur le sens qu'il véhicule, ce qui le rendra surement plus google friendly
- découper ton image en différente partie plus homogène te fera certainement gagner en qualité lors de la compression. Certains motifs seront moins dégradé dans un format que dans un autre. Tu gagneras soit en qualité soit en poids.

Quelques précisions sur les formats d'images sur le forum webdesign/ergonomie:
http://www.developpez.net/forums/sho...d.php?t=227379

[CUCARACHA]

Salut,

Si tu connais Photoshop et que tu le maîtrises (et que tu as payé la licence ouille, ouille, ouille) très bien.

En fait les PNG ne s'optimisent pas du moins, ils le font de façon automatique.

En revanche, ce qui est intéressant c'est la gestion des transparences.

http://ezwebagency.ezlogicmonaco.com...811011012.html

Le dispositif de dimensionnement dynamique n'est pas encore en place.

Ce lien pointe sur la nouvelle version en beta derrière ma freebox (donc super lent) qui va remplacer

http://www.trailblanch-fontromeu.org

Actionnes la barre de défilement et tu pourras constater la puissance des PNG (Ne fonctionne pas avec IE6 mais très bien avec IE7, Safari, firefox et opera).

++

Laurent

[Erwan31]

Désolé MasterOfChakhaL de dévier du sujet initial, il faudrait presque créer un topic unique pour ça mais je ne suis pas en mesure de le faire. Je répond à Laurent et je m'arrête là

Pour la transparence des PNG je connais "bien" tous ça, je suis Webdesigner

En fait les PNG ne s'optimisent pas du moins, ils le font de façon automatique.

Oui je vois ce que tu veux dire dans l'idéal ils sont déjà optimisés, mais il se trouve que Photoshop ne sait pas bien le faire et ce n'est pas pour rien qu'il existe un certain nombre d'utilitaires d'optimisation comme Png OUT ou PNG optimizer ou alors cet outil (que je te conseil au passage).

Ta réponse (s'il y a) par Message privés, si tu n'y vois pas d'inconvénient

[atira]

Ooops je rentre à peine....

Alors concernant l'organisation des fonds, image et texte...oui, c'est bien par couche que j'ai anticipé d'organiser ces 4 div, avec une logique hypra google friendly et en utilisant l'optimisation des images (via fireworks)
Concernant les solution en ASP, malheureusement, je ne suis pas assez calé pour cela. La vidéo, les effets spéciaux, la 3D oui, mais le dév non.

Mais, ma question était de connaitre le moyen d'empiler des images en colonnes dans ces 4 div....
Mais je suis étonné de votre réponse sur le fait, que la division ou découpe d'une image principale en plusieurs soient moins rapide qu'en une seule fois!?

Mais je vous fait confiance, car ce réflex perso date de la période du web, avant l'adsl...

Mais pourriez-vous m'indiquer la bonne balise qui me permettrait d'empiler des images les unes à coté des autres, en dehors des bloc Div. (et au même niveau du point de vue de "z")
J'ai tenté le coup avec les ul et li, mais j'ai des espaces entre les images et les puces s'affichent...

merci les gas de vous êtes penchés sur mon problème.

[CUCARACHA]

Salut,

Tu peux le faire avec 4 <IMG> dans un <DIV> dont les height et width sont exactement ceux de l'image résultante et en précisant un position=relative.

En suite

soit tu utilises un positionnement absolu pour chaque image que tu positionne au pixel près.

soit tu utilises float (plus fin...) en précisant que tes margins sont égales à 0 sur 2 côtés seulement
par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
src="MonImageTopLeft.png" style="float:left;margin-top:0px;margin-left:0px"
src="MonImageTopRight.png" style="float:right;margin-top:0px;margin-right:0px"
src="MonImageBottomLeft.png" style="float:left;margin-bottom:0px;margin-left:0px"
src="MonImageBottom.png" style="float:right;margin-bottom:0px;margin-right:0px"

J'ai pas testé mais ça devrait fonctionner...

++

Laurent

[CUCARACHA]

Re,

Si tu veux positionner un fond derrière chaque image, tu encapsules l'image dans un div qui a pour fond ton quart de fond et du utiliser le positionnement du fond :

background-position:right bottom; (pour en bas à droite par exemple)

Si tu veux que ton fond ne soit qu'une image, tu le met dans le div qui englobe les 4 img (plus besoin d'encapsuler les img dans des div individuellement)


++

Laurent

[atira]

Merci Laurent.

Problème résolu