Menu déroulant

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Menu déroulant

par AB » 01 sept. 2007, 22:11

Oui si tu préfères quoique le terme "faible qualité" est abusif pour des images destinées à être présentées sur le web ou plus généralement sur un écran.

quelques exemples :
http://alainbontemps.free.fr/photos_gf/ ... apho16.jpg
http://alainbontemps.free.fr/photos_gf/ ... evos_9.jpg
http://alainbontemps.free.fr/photos_gf/ ... ferre1.jpg
http://alainbontemps.free.fr/photos_gf/ ... _neige.jpg
http://alainbontemps.free.fr/photos_gf/ ... rcival.jpg
http://alainbontemps.free.fr/photos_gf/ ... _sabTR.jpg
http://alainbontemps.free.fr/photos_gf/ ... ielle3.jpg

Tu ne trouves pas la qualité jpg 80 largement suffisante?

C'est bien d'optimiser des requêtes pour gagner une dizaine de millisecondes de traitement serveur. Je n'en doute pas, cela peut s'avérer décisif quand il y a de nombreuses connexions simultanées.
Mais une fois que le visiteur a reçu sa page, le minimum est qu'elle soit exploitable assez rapidement.

Les images au format png24 pèsent environ 7 à 8 fois plus lourd qu'un format jpg qualité 80, elles mettront donc 7 à 8 fois plus de temps pour s'afficher. Quand on fait des sites web on doit un peu (beaucoup) penser au visiteur, non ?

Donc conseiller un format png24 (sauf cas particulier) pour afficher des images me paraît complètement "à coté de la plaque".

par Sékiltoyai » 01 sept. 2007, 20:53

Ou plutôt jpeg pour les grandes images de faible qualité, png pour les images qui nécessitent beaucoup de détails (smileys), ou bien alors de la transparence, gif pour les images qui nécessitent une animation (le format d'animation de png n'est pas encore très répandu…)

par AB » 01 sept. 2007, 19:45

Le truc, c'est que le JPEG est en format avec compression (compression à pertes d'ailleurs), ce qui explique le faible poids, alors que le PNG est un format sans compression. Le faible poids du JPEG se justifie donc par la compression qui détériore d'ailleurs l'image, alors que le PNG n'en utilise pas, ce n'est pas un codage spécial qui rend le JPEG en lui même plus performant…
Merci pour ce rappel mais c'est hors sujet :roll:

La question est : quel est le format le plus optimisé pour des photos sur le web?

La réponse à ce jour est : jpg et non png24 car il est très lourd, non plus png8 car il ne respecte pas les dégradés.

Ce qui nous fait donc au final au moins deux formats : jpg pour des images avec dégradé et png8 pour le reste.

par Sékiltoyai » 01 sept. 2007, 00:36

Le truc, c'est que le JPEG est en format avec compression (compression à pertes d'ailleurs), ce qui explique le faible poids, alors que le PNG est un format sans compression. Le faible poids du JPEG se justifie donc par la compression qui détériore d'ailleurs l'image, alors que le PNG n'en utilise pas, ce n'est pas un codage spécial qui rend le JPEG en lui même plus performant…

par AB » 01 sept. 2007, 00:12

@Cyrano, albat

Qu'ouie-je, qu'entends-je, que lis-je?

Soit on utilise pas les mêmes logiciels, soit vous êtes des programmeurs purs qui ne mettez pas souvent le nez dans un logiciel graphique :wink:

Je m'explique :
Photo bmp redimesionnée à 700 * 450 px.

Exportation sous firefox au format jpeg qualité 80 : 84.11 ko
Exportation sous firefox au format png24 (pas de réglages à disposition) : 608.10 ko

Avec ces réglages, léger (vraiment léger) avantage au png pour la netteté.

Si l'on veut pousser la qualité jpeg au max, auquel cas plus aucune différence de qualité en les deux formats d'exportation : 467.73Ko pour le jpeg

Etant donné que la qualité jpg 80 est largement suffisante pour des usages courants (pourtant je suis assez délicat la-dessus car mon premier métier était photographe), je comprends pas trop votre remarque si l'on parle d'optimisation, car entre 84.11 ko et 608.10 ko ça fait quand même une différence significative, pour le moins.

Maintenant, il est possible aussi qu'il existe des logiciels qui offrent une optimisation d'exportation au format png24 comparable au jpg en termes de rapport poids/qualité. Si c'est le cas, merci de me les indiquer et toutes mes excuses pour cette réponse qui deviendrait caduque :)

PS: Avec tout le respect que je vous dois chers Viphp; j'apprécie et m'instruis à chacune de vos interventions mais là j'ai du mal à comprendre :-k

par AB » 31 août 2007, 22:53

Pour des menus simples ou des menus déroulants...
Dans le premier cas de figure tu trouveras une réponse ici
http://css.alsacreations.com/Constructi ... les-en-CSS

dans le premier exemple il faut bien entendu remplacer les '#' par le nom de ta page appelée.
exemple pour deux liens, le premier qui dirige vers la page "chantier.php" et le second vers la page "ouvrage.php":

Code : Tout sélectionner

<li><a href="chantiers.php" title="aller à la page chantiers">Chantiers</a></li> <li><a href="ouvrages.php" title="aller à la page ouvrages">Ouvrages</a></li>

Dans le deuxième cas c'est là
http://css.alsacreations.com/Constructi ... horizontal

menu

par zacdis » 31 août 2007, 14:31

salut,

merci pour toutes ces interventions. cependant je ne vois pas le bout de ce :twisted: de menu.
Les portions de codes que tu m'as transmis Sékiltoyai donne respectivement :

Image

pour

Code : Tout sélectionner

<span class="lastMenuItem">Contact <span class="desc"><a href="autre_page.html">Effectifs</a></span></span>
et

Image

pour

Code : Tout sélectionner

<a class="lastMenuItem">Contact <span class="desc"><a href="autre_page.html">Effectifs</a></span></a>
Je suis d'autant plus saoulé, car j'ai le sentiment que la réponse est à portée, en fait je souhaiterais faire comme ceci :

Code : Tout sélectionner

<a href="ouvrage.html" title="References">Références<span class="desc">Chantiers<span " class="desc">Ouvrage</span></a>
Il y a selon moi "juste" queslques a href à insérer au bon endroit pour renvoyer vers des liens différents.
Merci pour vos conseils en tout k :)

A+

par albat » 31 août 2007, 08:40

J'appuie mon excellent confrère Cyrano :
Le PNG-8 peut remplacer le GIF car il propose une excellente gestion des transparences (et 256 couleurs)
Le PNG-24 peut remplacer le JPG car il propose une excellente gestion des couleurs (et la transparence alpha)

Idéalement, on devrait n'utiliser que des PNG et oublier GIF, JPG et... IE6 :-* ;)

par Cyrano » 31 août 2007, 06:38

...Le format "png" - en format d'exportation pour le web - produit des images plus légères mais ne respecte pas les dégradés.
Objection votre honneur ! Les problèmes de dégradé du format png ne concernent essentiellement que les png24 sous Internet Explorer 6 qui ne gère pas la couche alpha et donc les transparences de ce format. Le png8 passe, mais en revanche ne permet pas de faire des dégradés aussi propres. :-k

par AB » 30 août 2007, 19:48

Au passage, évite le bmp, c'est un format très lourd et très peu porté, préfères-y le png…
C'est vrai qu'en allant voir le lien http://zenithtopo.free.fr/Photos/Photo/photos/menu.bmp on comprend ta remarque :wink:

@zacdis, il faudrait te servir des fonctions "optimisation pour le web" ou "exportation" (apellations légèrement différentes suivant les logiciels) avant de charger tes images sur un serveur. Sinon tu nous fais revenir au temps du rtc quand il fallait 30s pour visualiser une image.

Cette fonction est disponible dans "photoshop", "photoshop élements", "fireworks" ou parmi les gratuits il y a "photofiltre" (disponible sur google) sans compter "gimp" pour les utilisateurs avancés.

Il n'y a que deux choses à savoir pour une bonne optimisation:
Images sans dégradé de couleurs : exportation au format "png" ou éventuellement "gif" ("png" étant la nouvelle norme qui devrait remplacer "gif")
Images avec un dégradé de couleurs : exportation au format "jpg" (ou "jpeg" c'est pareil).

Pourquoi deux formats ?
Le format "png" - en format d'exportation pour le web - produit des images plus légères mais ne respecte pas les dégradés.

par Sékiltoyai » 30 août 2007, 18:10

Et ceci ?
<span class="lastMenuItem">Contact
<span class="desc"><a href="autre_page.html">Effectifs</a></span></span>
Ou cela ?
<a class="lastMenuItem">Contact
<span class="desc"><a href="autre_page.html">Effectifs</a></span></a>
Au passage, évite le bmp, c'est un format très lourd et très peu porté, préfères-y le png…

Menu mémerd....

par zacdis » 30 août 2007, 17:45

Salut,

Tout d'abord merci pour votre aide.
Cependant je n'arrive à obtenir ce que je veux ...
La portion de code que tu m'as fourni Sékiltoyai (et je t'en remercis :D ), me donne deux rubriques principales pour chantiers et ouvrages... :( . Ce n'est pas le résultat que je cherche à obtenir.

Image
Voilà l'image du menu que j'obtiens pour le moment, je souhaiterais conserver "REFERENCES" comme rubrique principale, sans aucun lien. Mais par contre avoir 2 liens différents pour les sous rubriques "chantiers" et "ouvrages". La sncf c possible?? :shock:
J'espère que mes explications sont claires, d'avance merci.

A+, :o

par Sékiltoyai » 30 août 2007, 15:16

Tu peux éditer ton message pour remettre correctement la balise.
EDIT : I did it. ;) Albat'

Pour ton problème, il faut que tu fasses ceci :
<a href="index.html" title="Contact" class="lastMenuItem">Contact</a>
<span class="desc"><a href="autre_page.html">Effectifs</a></span>

balise

par zacdis » 30 août 2007, 15:12

lol...
on dirait que non :oops:

Enfin je pense avoir compris pour les balises

menu

par zacdis » 30 août 2007, 15:11

Salut,

Oui c'est tout à fait ca, je souhaiterais que les liens mènent vers deux pages différentes : une pour "chantiers", une pour "ouvrage", ... etc
L'histoire de la balise, c'est comme ca que ca se passe?

Code : Tout sélectionner

<a href="index.html" title="Contact" class="lastMenuItem">Contact<span class="desc">Effectifs</span></a> <a href="ouvrage.html" title="References">References<span class="desc">Chantiers<span class="desc">Ouvrage</span></a>
Merci. A+