Bonjour/ Bonsoir, j'ai décidé il y a peu de me lancer dans un site de présentation à propos de moi (loisirs, compétences, etc)
Petit probléme j'ai l'impression d'essayer de multiples proprietés en css mais ça ne fonctionne pas. Par là je veux dire que ça ne place pas le texte où ça devrait le place.
Alors je me suis décidé à vous montrer mon code html pour savoir si tout d'abord il y a des erreurs et vous poser quelques questions à propos du positionnement de certaines balises en css.
Tout d'abord voici mon code html (j'ai fait un effort pour l'indentation mais ce n'est pas parfait et je m'en excuse d'emblée)
<i>"Web users ultimately want to get at data quickly and easily. They don't care as much about attractive sites and pretty design."</i></br> <p>Tim Berners-Lee</p>
<p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</p>
<p>Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</p>
<ul><img src="../cv/tick.png" width="1%" height="1%">Ut enim benefici liberalesque sumus, non ut</ul> <ul><img src="../cv/tick.png" width="1%" height="1%">Quanta autem vis amicitiae sit, ex hoc intellegi</ul> <ul><img src="../cv/tick.png" width="1%" height="1%">Circa hos dies Lollianus primae lanuginis</ul>
<ul><img src="../cv/tick.png" width="1%" height="1%"><p>Ut enim benefici liberalesque sumus, non ut</p></ul> <ul><img src="../cv/tick.png" width="1%" height="1%"><p>Quanta autem vis amicitiae sit, ex hoc intellegi</p></ul> <ul><img src="../cv/tick.png" width="1%" height="1%"><p>Circa hos dies Lollianus primae lanuginis</p></ul>
nicograssetto, tu auras avantage à alléger ton html en y supprimant tous ces width et height pour piloter cela depuis le CSS.
En précisant qu'il n'y a pas nécessité de remettre autant de classes dans chaque img, mais qu'une classe par ol devrait suffire, puis tu cible dans le css avec
ol.maclasse1 li img{
height:Xpx;
width:Xpx;
}
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
alors techniquement c'est une bonne chose que de remplir les attributs height et width des images, parce que ça indique au navigateur quelle place il doit réserver pour lesdites images pendant le chargement. Sauf que ça doit être les valeurs réelles de l'image, et en pixels - et sans unité.
Ensuite, en CSS on peut surcharger - mais mieux vaut mettre une image déjà à la bonne taille, hein
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Toutefois, en l'occurrence, pour optimiser ici, vu que les images sont affichées entre 1 & 3%, je pense qu'il faudrait surtout en créer à ces dimensions microscopiques réelles pour ne pas charger 100x le poids nécessaire et avoir à les redimensionner aussi drastiquement !
Pas besoin alors de préciser la taille dans l'html qui par défaut de précision sera celle de l'image réelle.
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
> mieux vaut mettre une image déjà à la bonne taille, hein
Tu dis :
> Pas besoin alors de préciser la taille dans l'html qui par défaut de précision sera celle de l'image réelle.
Sauf que si : et c'est justement ce que j'explique plus haut. width et height ne sont pas faits pour redimensionner l'image dans le HTML, mais pour indiquer au navigateur la place à réserver.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
et si comme je le suppose, il se base alors sur la taille réelle,
si, enfin, comme je le recommande, on a pris soin de créer des vignettes de la taille réelle à afficher,
le navigateur fera le bon travail sans besoin de charger puis lire toutes ces instructions, non?
Avec des images qui font disons 32px sur 27px, tu penses qu'on gagne qqchose à répéter au navigateur toutes ces instructions ?
(qui font -elles- un poids certain dans les fichiers sources sur le serveur donc alourdissent au moment de l'envoi par ce serveur, mais aussi toutes les opérations de sauvegarde de l'utilisateur et de l'hébergeur...) ?
Je peux me tromper, mais j'ai l'impression que dans un cas comme celui-ci où peut alléger un fichier de 150 répétitions d'instructions au mieux non indispensables, on est gagnant sur le plan écologique.
Question subsidiaire:
Quand tu parles de place à réserver, tu parles de l'espace mémoire ou de l'espace géométrique à calculer pour la mise en page?
Parce qu'avec des petites images, l'espace mémoire brut est négligeable ;
s'il s'agit de la pré-mise en page, si on contredit après-coup en css, les instructions html auront doublement été inutiles non?
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
> le navigateur fera le bon travail sans besoin de charger puis lire toutes ces instructions, non?
Non. Les images étant des éléments vides dits "inlines remplacés", elles n'ont pas de taille avant d'être remplies (ce qui se fait après qu'elles soient ajoutées dans le DOM, en gros). Et je parle de l'espace géométrique à calculer, en effet. Préciser une largeur et une hauteur sur les <img> permet d'éviter des "sauts" de la page.
Exemple : j'ai un texte parsemé d'images (sans attribut height). Le texte se charge plus vite que les images. Les images n'ont pas d'espace réservé puisqu'on n'a pas défini de width ni de height, elles font donc 0 de hauteur. Je commence à lire. Paf, une image se charge, sa hauteur devient réelle, et elle décale donc le reste de la page. Incluant éventuellement ce que je suis en train de lire, qui descend brusquement. Pénible.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Voici ce que dit Rodolphe Rimelé dans son livre HTML5 une référence pour le développeur web :
Si aucune dimension n'est attribué grace à width ou height, le navigateur alloue automatiquement l'espace requis d'après la résolution native du fichier image. Du point de vue des performances d'affichage et de rendu graphique, il est souvent recommandé de préciser ces valeurs de largeur et hauteur afin d'indiquer dès le chargement du code HTML les dimensions de l'espace à réserver. Le navigateur n'aura pas besoin d'attendre le chargement ultérieur de la ressource image pour en déduire ses propriétés.
- Edité par Zoki_Marciano 19 avril 2018 à 17:12:37
Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
Merci Zoki_Marciano pour ce complément d'information ; je présumais donc juste.
Et du coup, je continue de penser que ce qui est valable pour des "vraies" images qui prennent du temps à charger et afficher de haut en bas ne l'est plus pour des icônes à condition qu'on ne fasse pas inutilement charger au navigateur des images 100 fois trop grosses.
Triple avantage donc de les réduire à la source quand elles doivent servir de petites icônes:
on gagne :
en poids de stockage / sauvegardes ;
en temps/coût de transmission sur le net ;
on peut alléger son html et laisser le navigateur appliquer la taille réelle par défaut: autant de regagné sur les 2 points précédents.
Personnellement, tant que je peux alléger, ça me plait !
"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)
Mini site one page présentation
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)