Faut-il encore indiquer la dimension des images ?

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

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

    On nous explique depuis les débuts d’Internet qu’il est préférable d’utiliser les paramètres width et height sur la balise image.

    Code:
    <img src="image.png" alt="" height="420" width="420">
    3Wschools précise même :
    Oui ! Mais ça, n’était-ce pas avant ? Que faire avec le responsive ?

    Soit par exemple une image de 700x245 px s’affichant sur 100 % de l’espace imparti de 700 px de large sur un dispositif de grandes dimensions.

    Comment procéder, puisque l’image va devoir aussi s’afficher sur un dispositif de 640 ou de 550 ou de 460 ou encore de 320 (il existe une multitude de dispositifs ayant chacun leurs propres dimensions ?

    Merci pour vos explications.
     
  2. guinness85
    guinness85 Nouveau WRInaute
    Inscrit:
    13 Février 2015
    Messages:
    20
    J'aime reçus:
    0
    Bonjour Corrigeur,

    Je me pose également la même question.
    D'autant plus que selon certains comparateurs (gtmetrix pour n'en citer qu'un) c'est une caractéristique jouant sur la vitesse d'affichage d'une page: "The following image(s) are missing width and/or height attributes."

    Mais il ne donne pas plus de consignes et j'aime bien comprendre avant d'appliquer :wink:

    Quelles sont les bonnes pratiques?
     
  3. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 933
    J'aime reçus:
    4
    Images en largeur relative (x%) dans des conteneurs aux dimensions précisées par @media ? ;)
     
  4. ybet
    ybet WRInaute accro
    Inscrit:
    22 Novembre 2003
    Messages:
    7 516
    J'aime reçus:
    1
    Bonne question:

    Pour ma part, sur les nouvelles pages, je n'impose les dimensions que dans un cas: si j'interdit l'affichage directement sur un autre site par htaccess:

    Tout simplement parce que mes pages sont HTML et en affichant en local en Wysywig, je déforme l'image sur la page et qui est déformée sur le site quand je transfert en FTP.

    En responsive, c'est effectivement la solution si tu programme en CSS donc pas en vérifiant le navigateur pour renvoyer vers un sous domaine spécifique (genre m.exemple.com). Suis plutôt ( à la différence de HawkEye) de travailler en absolu pour la taille des images et pas en relatif.

    Le codage est par exemple:

    Code:
    @media screen and (max-width:240px)
    {
      img {
    		max-width:80px;
    	}
    }
    
    Attention à deux choses (même si tu impose une taille à l'image dans le code HTM:
    1. tu dois créer différentes tailles d'écran avec des tailles d'images maximum pour chacune mais en limitant la taille maximum pour ne pas déformer avec des tailles maximum de l'affichage.
    2. en réduisant (dans mon exemple: la largeur maximum - width): le navigateur va réduire en gardant les proportions (exemple 50% obligatoire en largeur mais obligatoirement 50% en hauteur): les images sont donc parfois nettement déformées.
     
  5. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 751
    J'aime reçus:
    83
    ça n'a pas changé, il est toujours préférable d'indiquer les dimensions.
     
  6. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Concrètement, quel est finalement le meilleur codage pour qu’une image de 700x245 px (exemple ci-dessus) s’affiche correctement sur des résolutions aux points de rupture 320, 640, 800 et plus de 1000 avec une largeur dans un espace réservé de 700 px sur les dispositifs de plus de 1000 ?
     
  7. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 751
    J'aime reçus:
    83
    Le problème si on met en pourcentage c'est que l'image sera affichée toute petite sur un écran de 320.
    Si on met une dimension de 700 elle sera affichée sur toute la largeur de l'écran (ou du conteneur), donc en 320 ou presque.
     
  8. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 933
    J'aime reçus:
    4
    Ca dépend de la façon dont tu gères ton responsive ;)
     
  9. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 751
    J'aime reçus:
    83
    ah !
    Parce que 50% ça ne représente pas 50% sur tous les écrans ? Parfois ça peut faire 95% ou 100% ?
    Peux-tu expliquer s'il te plait ?
     
  10. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 933
    J'aime reçus:
    4
    Je n'ai pas parlé de 50%, que je sache.

    Et puis si tu fais du "vrai" responsive (et pas "de l'adaptable"), ta présentation ne sera pas la même sur un mobile que sur un desktop: ton image va dans un cas être (p.ex) flottante à gauche, et dans un autre elle prendra la largeur de l'écran avant le contenu.
     
  11. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    3 751
    J'aime reçus:
    83
    50% était juste un exemple, toi tu parlais d'Images en largeur relative (x%)
    Ca revient au même. Si sur un écran de 1400 tu met une largeur de 50% elle sera affichée en 700 de large. Sur un écran de 320 elle sera affichée en 160 px de large
    Si tu précises 700px elle va s'afficher en 700 sur un écran de 1400 et en 320 sur un écran de 320.
     
  12. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 371
    J'aime reçus:
    2
    Justement indigene, tu loupes totalement le point que soulignes hawk

    Quand tu gères finement le responsive, tu peux parfaitement décider qu'une image d'illustration dans un article sera affichée à 50% dans les appareils "à partir de tablette", et à 100% de la largeur pour les écrans plus petit, pour éviter que le texte qui se trouve à côté soit trop petit et illisible
     
  13. Doubrovski
    Doubrovski WRInaute occasionnel
    Inscrit:
    9 Avril 2011
    Messages:
    435
    J'aime reçus:
    0
    Les Media Queries CSS quoi. Le minimum requis pour du responsive :)
    Aujourd'hui n'importe quel framework CSS permet de gérer ça facilement, et directement dans le html sans se soucier des medias queries... (cf CSS Responsive Grid System)

    Ex avec materialize CSS :
    Code:
    <div class="container">
        <div class="col s12 m6 l4">
            <img src="">
        </div>
    </div>
    
    12 = divisions maximales (le conteneur peut-être divisé en 12 colonnes)
    s12 = 12/12 sur small screens = le div fera 100% de la largeur de son conteneur sur petits écrans
    m6 = 6/12 sur medium screens = le div fera 50% de la largeur de son conteneur sur écrans moyens
    l4 = 4/12 sur large screens = le div fera 1/3 de la largeur de son conteneur sur écrans larges

    L'image dans ces conditions a juste à occuper au maximum 100% de son conteneur.
    Code:
    .col img{
    max-width:100%;
    }
    
    Quand on utilise pas de framework, c'est pas beaucoup plus compliqué, mais il faut préciser à chaque media ses propriétés.
    Le mobile first est une question à prendre en compte, on peut partir des écrans larges ou des mobiles pour faire du responsive.
     
  14. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Les dimensions apparaitaient donc désormais superflues quoiqu'en disent PageSpeed ?
     
  15. Sodium
    Sodium WRInaute discret
    Inscrit:
    16 Mars 2015
    Messages:
    73
    J'aime reçus:
    0
    Pour moi, indiquer des informations de style directement dans le code est une pratique d'un autre âge.

    Après, si tu veux avoir les bénéfices de les indiquer tout en étant responsive, rien ne t'empêche de rajouter un width:auto !imporant; dans le la feuille CSS lorsque c'est nécessaire.
     
  16. -Tony-
    -Tony- Nouveau WRInaute
    Inscrit:
    27 Octobre 2015
    Messages:
    42
    J'aime reçus:
    0
    Ce n'est pas une information de style, mais html.
    Aucun problème avec le responsive.

    Si l'image fait 600px par 400px de base

    le html :

    Code:
    <img src="image.jpg" alt="" height="600" width="400">
    le css :

    Code:
    img {
         height : auto;
         max-width : 100%;
    }
    
    Et c'est tout.
     
  17. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    Pour la taille des images c'est toujours d'actualité et c'est requis pour les pages au format AMP.
    Ca évite les reflow et repaint inutiles du navigateur.
     
  18. Corrigeur
    Corrigeur WRInaute occasionnel
    Inscrit:
    20 Mai 2011
    Messages:
    335
    J'aime reçus:
    1
    Indiquer les dimensions des images fait également, logiquement, gagner un petit peu de temps dans l’affichage des pages. Cela additionné à d’autres optimisations a ainsi fait descendre le temps d’affichage complet de la page index du Corrigeur de 3,5 secondes à 0,4 seconde.
     
Chargement...
Similar Threads - indiquer dimension images Forum Date
Faut il indiquer les dimensions des images ? Demandes d'avis et de conseils sur vos sites 12 Mai 2010
Search Console Problème Fil d'Ariane : Vous devez indiquer name ou item.name Crawl et indexation Google, sitemaps 15 Octobre 2019
indiquer des mots clés dans l'url de la page d'accueil Débuter en référencement 26 Juillet 2019
Quelle est la bonne pratique pour indiquer une ou plusieurs localisations à Google ? YouTube, Google Images et Google Maps 4 Avril 2019
WordPress Erreur : il faut indiquer offers, review, ou aggregateRating Demandes d'avis et de conseils sur vos sites 14 Mars 2019
WordPress Comment indiquer la meta description et le H1 ? Rédaction web et référencement 7 Mars 2019
Comment indiquer mon sitemap XML à Google ? Crawl et indexation Google, sitemaps 13 Août 2018
Yoast Premium pour indiquer plusieurs mots clés Débuter en référencement 20 Juillet 2017
Landing page adwords- indiquer noindex nofollow? Débuter en référencement 17 Mai 2017
Comment indiquer mes nouveaux liens a Google ? Débuter en référencement 21 Mars 2015
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice