Image en CSS ou en HTML

Discussion dans 'Débuter en référencement' créé par Corrigeur, 19 Septembre 2015.

  1. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Bonjour à tous.

    Les conseils d’optimisation d’antan préconisaient de passer toutes les images répétitives (donc décoratives) en CSS.
    Plutôt que :
    Code:
    <img width="18" height="18" title="Plan du site." alt="sitemap" src="sitemap.png">
    Il était conseillé d’écrire en CSS
    Code:
    #element { background:url(sitemap.png) no-repeat; }
    On disait en gros qu’une image qui n’apporte que de la décoration gagnait à être passée en CSS et que cela accélérait les temps de chargement de pages suivants. Cela permettait de plus d’adapter la décoration aux dispositifs d’affichage selon les dimensions d’affichage du dispositif. Cela complique toutefois le codage en HTML lorsque la surface de l’image doit correspondre à une zone de clic ou comme ici d'écritures.

    Inversement, une image qui apporte de l’information devait voir sa forme <img> privilégiée, car cela permettait d’ajouter de l’information par le alt et par le title.

    Qu’en est-il maintenant ? Merci pour vos explications.
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    792
    J'aime reçus:
    0
    je ne vois pas de raisons pour que cela ai changé.
     
  3. Grafimages
    Grafimages WRInaute discret
    Inscrit:
    12 Mai 2011
    Messages:
    104
    J'aime reçus:
    8
    Dans le cas d'une image décorative, l'une ou l'autre solution importe peu.
    Dans le cas d'une image informative (icône avec lien, image illustrative liée au contenu...), on privilégie le HTML, puisque l'image doit pouvoir être affichée même si les CSS ne sont pas chargées/affichées.
    Via Alsacreations (article de 2009).
    Même son de cloche chez OpenWeb.

    Aucune raison que ça ait changé depuis.
     
  4. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 181
    J'aime reçus:
    1
    Moi je fais deux distinction :
    * L'image de contenu (illustration du contenu comme une photo par exemple)
    * l'image de design (c'est une illustration du site ou des pages en général).

    le contenu c'est <img src ... le design c'est au maximum en CSS (RAB si c'est pas chargé vite ou pas).
    Ensuite pour ce qui est des images liées au design j'utilise base 64 dans le CSS dès que la taille du code est compatible.
     
  5. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    Ce qui pourrait avoir changé depuis, c'est qu'on privilégie aujourd'hui les polices d'icones pour afficher les éléments décoratifs car ils sont plus adaptés au responsive design.
     
  6. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 525
    J'aime reçus:
    50
    Cela dit on peut faire ses propres SVG aussi
     
  7. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Il apparait finalement que l’on peut distinguer les images en 4 catégories. Tiens ! Cela me rappelle les maths de sixième avec les unions et les intersections.

    On trouvera :
    – Les images décoratives. Ce sont celles qui n’apportent rien au message mais qui donnent une apparence plus belle. Ces images gagnent souvent à être intégrées au CSS. Ex. : fioriture, liseré, fond d’écran, fond de contenu...
    – Les images informatives. Ce sont celles dont la présence apporte de l’information. Ces images gagnent souvent à être intégrées au HTML avec un alt et un title.. Ex. : image illustrant un billet.
    — Les images avec un rôle variant. Ex. : le logo pourra être considéré comme une image décorative sur le bandeau, mais comme une image informative sur un site externe.
    — Les images à la fois décoratives et informatives. Ce sont des images dont on pourrait se passer, mais dont la présence apporte de l’information qui ne gagnera toutefois pas vraiment à se voir complété par un alt et un title. Où situer le curseur et quand faut-il mettre un alt et un title ? La distinction va dépendre en fait de l’interprétation de chacun. Ex. : une image à cliquer sera à la fois décorative, car on pourrait s’en passer, mais aussi comme informative, car elle pourrait remplacer efficacement le texte. Faut-il alors les intégrer au CSS ou au HTML ? Cela va dépendre de l’analyse de chacun. Lorsque le alt et le title n’apportent rien, ces images correspondent en gros aux images des polices d’icônes.
     
  8. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    J’ai beaucoup travaillé sur l’optimisation de l’affichage pour réduire le temps nécessaire à l’affichage. J’ai réalisé de nombreux tests et j’ai finalement préféré ici une technique que nous utilisions autrefois dans les jeux vidéos quand la vitesse était primordiale : la technique des sprites.

    Les tests montrent que ce n’est pas toujours la meilleure solution. Cela a par contre permis de réduire ici le nombre de connexions, de diminuer la taille des images téléchargées et de rétrécir ainsi la durée nécessaire à l’affichage complet de 0,7 seconde.

    Bref ! Malgré une vidéo YouTube, une grosse image et 3 réseaux sociaux, la page index du Corrigeur s’affiche désormais en 0,436 seconde la toute première fois, et l’affichage des pages suivantes se fait en 0,252 seconde selon GTmetrix. Le score est ainsi de 99 % pour PageSpeed de Google et 98 % pour YSlow de Yahoo.

    Pour ceux que cela intéresse, il vous suffit d’aller regarder le source de la page index de corrigeur.fr et de quelques autres pages du même site pour comparer.
     
Chargement...
Similar Threads - Image CSS Forum Date
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
CSS - Affichage de plusieurs images au passage de la souris Développement d'un site Web ou d'une appli mobile 19 Novembre 2017
Help CSS image par dessus texte Développement d'un site Web ou d'une appli mobile 7 Avril 2017
image chargée en css Développement d'un site Web ou d'une appli mobile 8 Août 2015
Dégradé sur une image en CSS Développement d'un site Web ou d'une appli mobile 26 Mars 2015
Combine images using CSS sprites sur un site Joomla Débuter en référencement 18 Mars 2015
Image + texte cote à cote en CSS Développement d'un site Web ou d'une appli mobile 11 Décembre 2014
CSS : sélectionner les images flottantes Développement d'un site Web ou d'une appli mobile 15 Février 2013