Grégoire Noyelle

Créateur de thèmes WordPress :: Formateur :: Web Designer

  • Votre Projet
  • Formations
  • Tutoriels
  • Liens
  • CV
  • Contact
Retour vers la page Tutoriels avec la liste de tous les tutos.
Pour rester informé, abonnez-vous à la newsletter

WordPress :: Gestion des images HiDPI (retina) dans vos contenus

Mis à jour le 10 mai 2017 :: 8 commentaires

Autres tutoriels sur le sujet

  • WordPress :: Gestion optimisée de l’organisation des médias
  • WordPress :: Gestion des médias depuis la version 3.5
  • WordPress :: insérer des médias vidéos ou Google Maps
  • WordPress :: Intégrer une galerie Photo
  • WordPress :: un PDF dans un article

Dans ce tutoriel, je ferai un point sur l’utilisation des images HiDPI (retina) dans WordPress. Nous utiliserons l’attribut srcset intégré depuis la version 4.4.

Quelle taille d’image choisir

Dans cette partie, je vais déterminer quelle taille d’image sera nécessaire dans mes contenus WordPress pour une image qui prendrait toute la largeur de mon article.

Déterminer la taille de la zone principale

C’est la partie du site où s’affiche le contenu principal. Il s’agit de calculer sa largeur. Ici j’utilise l’extension de Chrome appelée Page Ruler. Ici, j’obtiens maximum 729px de large pour cette zone.

Calcul de la zone principale de votre contenu WordPress

Taille des images à charger

Pour les visuels HiDPI (retina), il faut doubler la taille par rapport au format final souhaité. Ici, si mon contenu principal fait 729px de large, je chargerai des images d’au moins 1500px pour la largeur. Nous verrons que WordPress pourra appeler médias adéquate en fonction des types d’écrans.

Réglages des tailles de médias dans WordPress

Ici, je me concentre sur le réglage natif de WordPress qui permet de générer à chaque ajout de médias de type image, plusieurs formats à la volée.

Créer les tailles de base

Dans le menu Réglages > Médias de votre back-office.

Réglage des tailles de médias dans WordPress

Ajout du média dans mon contenu

Ici, j’ajoute un visuel de 1388px de large par 731px de haut. La taille s’affiche toujours à droite de la fenêtre d’insertion WordPress.

Ajout de mon image dans mon contenu WordPress

Images générées dans WordPress

En fonctions des formats, choisis, plusieurs visuels vont être générés automatiquement au moment du chargement de vos médias. Attention, votre thème ou une extension peuvent aussi ajouter de nouveaux formats.

Image générées automatiquement dans WordPress

La taille en pixels est ajoutée à la fin du nom automatiquement.

Résultats en ligne

Affichage des visuels sélectionnés avec l’inspecteur de Chrome

J’utilise l’inspecteur de Chrome pour vérifier le visuel qui a été sélectionné.

Affichage de l'inspecteur de chrome avec la Device Tool Bar

À gauche, en mode Device, je peux choisir en haut la taille de mon écran, le niveau de zoom et la densité des pixels. Si ces options ne s’affichaient pas, les sélectionner avec l’icône composée de trois petits points. Dans la fenêtre de l’inspecteur, j’utilise l’onglet Network, je peux voir les visuels qui sont chargés avec mon format d’écran actif.

Si je refais le même test avec un écran plus petit, le visuel dans l’onglet Network sera différent le montre la capture d’écran qui suit:

Image plus petite dans l'inspecteur de Chrome

Le format d’image choisi est déterminé par les visuels disponibles dans mon back-office WordPress. Comme nous l’avons vu, cela dépend des points suivants:

  • La taille du visuel chargé
  • Le réglage des Médias
  • Les formats ajoutés par votre thème
  • Les formats ajoutés par les extensions

Test avec la résolution de l’écran

Pour l’article, j’ai inscrit la taille réelle des visuels directement sur les images générées par WordPress. Si je change la résolution de mon écran, je vois tout de suite le visuel qui change.

Voici la version en résolution normale:

Affichage de l'image WordPress dans la résolution normale

Et la version HiDPI (retina):

Affichage de l'image WordPress dans la résolution HiDPI (retina)

L’attribut srcset de la balise img

Comment toute cette magie s’opère-t-elle?

Depuis la version 4.4 de WordPress, le back-office ajoute automatiquement l’attribut srcset à chaque balise image. Pour le même visuel, voici le code généré par WordPress:

<img class="alignnone size-full wp-image-9956" src="http://localhost/gregoirenoyelle/wp-content/uploads/2016/11/acf-utiliser-champ-image.jpg" alt="capture: Enregistrer le champ Image dans WordPress avec ACF" width="1388" height="731" srcset="http://localhost/gregoirenoyelle/wp-content/uploads/2016/11/acf-utiliser-champ-image.jpg 1388w, http://localhost/gregoirenoyelle/wp-content/uploads/2016/11/acf-utiliser-champ-image-450x237.jpg 450w, http://localhost/gregoirenoyelle/wp-content/uploads/2016/11/acf-utiliser-champ-image-768x404.jpg 768w, http://localhost/gregoirenoyelle/wp-content/uploads/2016/11/acf-utiliser-champ-image-800x421.jpg 800w" sizes="(max-width: 1388px) 100vw, 1388px">

En plus des données de l’image, avec srcset WordPress propose plusieurs sources d’image en fonction des largeurs d’écran. Par exemple, pour les écrans de 800px de large, c’est ce réglage qui sera retenu:

http://localhost/gregoirenoyelle/wp-content/uploads/2016/11/acf-utiliser-champ-image-800x421.jpg 800w

Dans l’inspecteur avec l’onglet Element, vous pouvez aussi en passant le curseur de la souris sur la balise image, contrôler l’image qui est appelée.

attribut scrset dans les balise image de WordPress

Quelle stratégie utiliser pour les autres formats?

Images de taille moyenne

Dans cet exemple, je me suis concentré spécifiquement sur l’image de pleine largeur. Pour les images moyennes, les mêmes principes pourront être appliqués. WordPress chargera la bonne résolution en fonction de la taille de l’écran et du type d’écran (HiDPI ou non).

Images à la une dans les Widgets

Si c’est l’image à la une native ou celle générée par Advanced Custom Field, l’attribut srcset sera aussi utilisé. Vous pouvez donc charger une image double dans le choix du format. A l’affichage, c’est le bon média qui sera sélectionné en fonction de l’écran.

Quelques liens

  • Simple Image Sizes: très bonne extension par Nicolas Juen qui permet d’ajouter facilement de nouvelle taille. Et surtout d’avoir ce nouveau format dans le menu insérer de WordPress.
  • Designer’s guide to DPI: très bon article sur le Retina.
  • What DPI do web images need to be? (spoiler alert: it doesn’t matter): article qui résume bien la notion de résolution pour le web.

Partager :: les compteurs ont été enlevé 😉

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur LinkedIn(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Pocket(ouvre dans une nouvelle fenêtre)
  • Cliquer pour imprimer(ouvre dans une nouvelle fenêtre)

Catégorie(s) : Tutoriels, WordPress tutos Étiqueté : débutant, Médias WordPress, Tuto WordPress

A propos de l'auteur

Grégoire Noyelle, Créateur de Thèmes WordPress, Formateur spécialiste sur WordPress, WooCommerce, HTML et CSS (Grid Layout) dans son centre de Formation dédié au CMS WordPress. Suivez moi sur Twitter ou LinkedIn.
[En savoir plus]

Commentaires

  1. Cassim Arielle a écrit

    13 décembre 2016 à 16 h 56 min

    Bonjour,
    Très intéressant tout cela, mais pas à ma portée ..je ne sais faire que ce que ma boîte de formation m’a appris.
    J’ai cependant 2 gros problème :
    Mes brèves qui n’arrêtent pas de tourner , alors qu’elles étaient programmées pour 3 jours , et mon action de les mettre à la corbeille une par une a pour effet de faire revenir les très ancienne.
    Autre souci : je n’arrive plus à supprimer mes bandeaux (partenaires) .. Tout se passait sans faute jusqu’à il y a 3 jours ! Je n’ai pas omis de supprimer en même temps le lien.
    Au début j’ai agi comme d’habitude en mettant les datess de fin de parution seu le site ..aucun effet .. j’ai finis donc par les supprimer eet les statistiques avec .. ddonc plus de preuves pour ces diffusions.
    Une histoire de fou!
    Que dois-je faire, surtout qu’il s’agit d’un site d’infos !!!! et d’actualités !!!
    Merci pour vos conseils.
    Bon vent cordial
    Arielle Cassim

    Répondre
    • Grégoire Noyelle a écrit

      13 décembre 2016 à 20 h 30 min

      Bonjour,
      Quel est le rapport avec l’article?

      Répondre
  2. Floran a écrit

    7 juin 2017 à 18 h 39 min

    Bonjour Grégoire,

    Comment faire quand ces images sont des backgrounds? J’ai la problématique avec mes backgrounds de div ou lorsque j’ai des landing page en fullscreen avec un background, c’est pixelisé sur retina. Comment faire dans ce cas de figure ?

    Répondre
    • Grégoire Noyelle a écrit

      8 juin 2017 à 7 h 18 min

      Bonjour Floran,
      Avec des media queries. Voici un article qui en parle.

      Répondre
      • Floran a écrit

        8 juin 2017 à 21 h 24 min

        Oui je connais bien les media queries,
        ma problématique étant que ces background sont dynamiques puisqu’ils sont reliés au post thumbnail, donc je ne peux pas dans le CSS les définir à l’avance. Comment faire?

        Répondre
        • Grégoire Noyelle a écrit

          9 juin 2017 à 6 h 29 min

          Dans ces cas, voir avec le développeur du plugin/thème directement.

          Répondre
  3. darknote a écrit

    23 octobre 2017 à 10 h 56 min

    Bonjour,

    Il me semblait qu’une image devait s’afficher à la bonne taille, si on voulait optimiser son thème.
    Qu’il ne fallait pas redimensionner une image via le CSS.
    https://gtmetrix.com/blog/how-to-optimize-images-a-practical-guide/
    Dans votre exemple
    https://www.gregoirenoyelle.com/wp-content/uploads/2016/12/hidpi-current-srcset.jpg
    716 x 382 pixels (793 x 417 pixels)
    Là , moi qui ne suis pas codeur, je vois un problème, image à la mauvaise taille.
    L’importance est bien la ligne « srcset « pour le Retina, non ?
    C’est surtout pour les produits d’Apple, Retina.

    ps: Connaissez-vous ce site de test ?
    https://www.uptrends.fr/outils-gratuits/test-disponibilite

    Répondre
    • Grégoire Noyelle a écrit

      23 octobre 2017 à 11 h 05 min

      Bonjour,

      L’image dans mon cas est légèrement redimensionnée par le responsive. Donc pas de souci.
      Le plus important dans le srcset est que le navigateur choisit la bonne image en fonction de la taille et de la résolution. Et cela se passe au niveau du HTML.
      Pour le Retina, ce sont tous les smartphones et tablettes récentes et pas seulement les produits Apple.

      Répondre

Laisser un commentaire Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Article / Page: WordPress :: Gestion des images HiDPI (retina) dans vos contenus. Retour vers l'accueil

Tutoriels par Thèmes

  • Tous les Tutoriels
  • WordPress
  • Web Design
  • Photoshop
  • Mailchimp

Séries complètes de Tutoriels

  • Les bases de Grid Layout

Recherche dans les Tutoriels

S’abonnez à la newsletter

Pour recevoir des news, merci de remplir les 3 champs suivants:

Partenaires

Divi WordPress Theme

Genesis Framework for WordPress

WordPress Theme Editor

capture: Personnaliser son thème WordPress avec Genesis

WordPress est une matière première
Nous pouvons …

... créer

Commençons votre Projet

Toute création est la résultante d’une combinaison unique d’idées, d’outils adaptés à vos besoins. Nous pouvons réaliser un site WordPress, mettre en place une nouvelle formation, créer une interface.

[Quel est votre besoin]

... transmettre

Créons une formation

Formateur à l’école des Gobelins et à Apaxxdesigns, j’interviens également au sein des entreprises ou chez des particuliers sur plusieurs disciplines. Enfin, je mets à disposition de nombreuses ressources sur ce site.

[Voir les modules et ressources]

... échanger

Distinguons votre demande

Mon parcours multidisciplinaire me permet de m’adapter à des projets complexes. Nous pouvons prendre contact ou dans un premier temps mieux cerner votre projet.

[En savoir plus]

Derniers Tutoriels

Tester les emails WooCommerce avec Local de Flywheel

Dans ce tutoriel sur WordPress, nous verrons comment envoyer les emails WooCommerce avec … [Lire la suite...]

Ajouter un nouveau menu responsive dans Genesis

Dans ce tutoriel, nous verrons comment ajouter un nouveau menu responsive dans votre thème Genesis. … [Lire la suite...]

Placer les éléments avec Grid Layout CSS

Ce tutoriel est majeur, car nous verrons comment placer les éléments d’abord dans une grille simple … [Lire la suite...]

Unité de mesure avec Grid Layout CSS

Dans ce tutoriel, nous verrons comment utiliser les différentes unités de mesure avec Grid Layout. … [Lire la suite...]

Construction de grilles simples avec Grid Layout CSS

Nous verrons dans ce tutoriel comme construire une grille basique avec Grid Layout CSS. Pour rester … [Lire la suite...]

Déclaration et terminologie pour Grid Layout CSS

Voici le premier tutoriel d’une longue série sur Grid Layout CSS. Ce premier article a pour but de … [Lire la suite...]

Concevoir les sites de demain avec Grid Layout et WordPress

Dans cet article, je montrerai dans quelle mesure Grid Layout sera au coeur des sites Web de … [Lire la suite...]

Voir tous les tutoriels

Tutoriels populaires

WordPress :: Migrer son site du local vers le serveur en ligne

Dans ce tutoriel, nous verrons comment passer d’une version locale de site vers une version en … [Lire la suite...]

WordPress :: Créer un réseau de sites

Le réseau de site permet d'utiliser un seul site WordPress avec sa base de données pour générer … [Lire la suite...]

WordPress :: Gestion complète des Menus

Dans ce tutoriel nous verrons en détail comment créer et gérer les menus WordPress. Aussi nous les … [Lire la suite...]

WordPress :: Intégrer une galerie Photo

Dans ce tutoriel nous verrons comment fonctionne la galerie d’images WordPress. Toutes les étapes … [Lire la suite...]

WordPress :: Migrer son site avec le script d’Interconnectit

Dans ce tutoriel nous verrons comment migrer un site d'un emplacement A à un emplacement B. Pour les … [Lire la suite...]

Genesis :: introduction au framework de thème WordPress

Voici le premier volet d'une longue série sur le Framework de thème Genesis. Nous verrons des … [Lire la suite...]

WordPress :: Utilisation basique d’Advanced Custom Fields (ACF)

ACF : Advanced Custom Fields est un plug-in très puissant et très bien documenté. Il est créé par le … [Lire la suite...]

Voir tous les tutoriels

Social

  • Github
  • Linkedin
  • Flux RSS
  • Twitter

Formations actives

  • Toutes les formations
  • WordPress Niveau 1
  • WordPress Niveau 2
  • WordPress Niveau 3
  • WordPress Niveau 4
  • CSS3 Avancés
  • CSS3 Grid Layout
  • WooCommerce Niveau 1
  • WooCommerce Niveau 2

Centre de Formation WordPress

  • Votre Formateur WordPress
  • FAQ sur le centre de formation
  • Salle de formation
  • Témoignages sur le centre de formation
  • CGV du centre de formation
  • Charte de qualité du centre de formation
  • Réglement intérieur du Centre de formation

Liens Rapides

  • CV
  • Grégoire Noyelle
  • 9 perspectives
  • Partenaires
  • Membres Modules
  • Mentions légales
  • Me contacter

Copyright © 2018 :: Création: Grégoire Noyelle :: Base: WordPress , Genesis Framework :: Se connecter