Faire en sorte qu’une image s’adapte à la taille d’écran n’a rien d’aisé, mais pourtant c’est un élément important d’un responsive design réussi. Sans compter qu’elle doit aussi s’adapter au contenu qu’elle accompagne.

Il existe plusieurs façons d’y parvenir, cependant elles n’ont pas toutes le même rendu. Le choix de la technique dépendra donc de ce que vous souhaitez réaliser.

 

Une image responsive grâce à la largeur en %

Le basique de chez basique, une balise <img> avec width: 100%;

L’image prendra toujours 100% de la largeur de son parent. On dit que sa taille est relative.

img {
    width: 100%;
}

Ce qu’il y a de très pratique, c’est que tout est là en une ligne de code. L’image gardera toujours les bonnes proportions, juste en précisant sa largeur.

 

Les media queries pour gérer le responsive

Autre possibilité, changer la width d’une image en px, en fonction de la taille d’écran, grâce aux media queries.

img {
    width: 400px;
}
@media (max-width: 480px) {
    img {
        width: 100%;
    }
}

Dans cet exemple de code, notre image a une width: 150px par défaut. Sa taille est fixe, on dit donc qu’elle est absolue.

Si la largeur d’écran passe sous 480px (compris), la taille redevient relative !

Pratique pour s’adapter quand il commence à manquer d’espace.

 

La taille maximale d’une image

Il est possible de préciser une taille maximale pour une image, et combiné à la taille relative, ça donne ça :

img {
    width: 100%;
    max-width: 400px;
}

Le résultat est exactement le même que notre premier exemple, cependant ici il y a moins de contrôle sur la taille d’écran : l’image s’adaptera une fois le bord d’écran atteint. Du coup, difficile d’adapter l’image avec le reste du contenu.

max-width peut s’avérer tout de même très utile dans les tailles plus petites d’écran, lorsqu’un width: 100% rend l’image beaucoup trop grande.

 

La propriété object-fit pour conserver les proportions de l’image responsive

Jusqu’à maintenant, nous n’avons utilisé que la largeur de l’image, sa hauteur s’adaptant proportionnellement.

Comment faire si on a besoin d’une hauteur spécifique ?

Le problème de préciser une width et une height en même temps, c’est qu’on casse les proportions de l’image.

img {
    width: 100%;
    height: 150px;
}

Ça n’est pas très esthétique, vous en conviendrez. Il existe tout de même une solution : object-fit est une propriété CSS très pratique pour rendre une image adaptative, tout en précisant sa hauteur.

img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
}

object-position fonctionne exactement comme background-position, vous pouvez préciser sur quelle partie de l’image object-fit doit se focus. Car oui, c’est le désavantage de cette méthode, l’image sera crop pour lui permettre d’avoir une hauteur et une largeur fixe, tout en gardant une bonne proportion.

 

Les commutations de résolutions

Un gros problème se pose : il est certes plus simple d’utiliser la même image sur taille desktop et smartphone. Cependant, imaginez le cas d’une bannière, qui doit faire toute la largeur d’un écran. Il nous faudra donc une image HD pour qu’elle puisse s’afficher correctement en taille d’écran HD, voire en 4k si vous voulez que votre site d’affiche bien en 4k !

Mais du coup, si vous utilisez toujours la même image quelle que soit la taille d’écran, votre smartphone / tablette va charger une image très lourde alors qu’il n’en a pas besoin. Cela impacte beaucoup les performances du site, et par extension son référencement.

Les attributs srcset et sizes

Il faudrait donc pouvoir changer le fichier image chargé par le navigateur en fonction de la taille d’écran, et c’est ce que nous propose les attributs HTML srcset et sizes.

<img srcset="image-480w.jpg 480w, image-800w.jpg 800w"
     sizes="(max-width: 600px) 480px, 800px"
     src="image-800w.jpg">

• srcset demande plusieurs fichiers, séparés par une virgule à chaque fois, à écrire de cette manière : « nom_du_fichier.jpg taille_intrinsèque ». La taille intrinsèque s’exprime en px, bien que l’unité soit w. Elle représente la vraie taille d’image, obtenue en allant dans les propriétés du fichier.
• sizes sont les conditions de tailles d’écran. Chaque condition est séparée d’une virgule, et fonctionne comme les media queries. Elles s’écrivent de cette manière : « (condition) largeur_à_utiliser ». La largeur à renseigner s’exprime en px, et symbolise la place que peut occuper l’image à telle taille d’écran.

Dans notre exemple, (max-width: 600px) 480px veut dire que pour les écrans en dessous de 600px (compris), l’image à utiliser ne peut être que de maximum 480px. Le navigateur sélectionnera parmi les images renseignées dans srcset celle qui correspond le plus à cette situation (donc dans notre exemple : image-480w.jpg).

Une taille précisée sans condition sera la valeur par défaut (800px ici).

On peut voir qu’il y a tout de même un src, cet attribut sert de fichier par défaut si srcset n’est pas reconnu par le navigateur (oui IE 11 c’est toi qu’on vise) !

La balise <picture>

Vous pouvez aussi utiliser la balise <picture> qui fonctionne comme <video>. Cette écriture est plus claire, et possède d’autres fonctionnalités.

<picture>
    <source media="(max-width: 600px)" srcset="image-480w.jpg">
    <img src="image-800w.jpg">
</picture>

Vous pouvez ajouter autant de <source> que vous le souhaitez.

L’avantage de picture, c’est qu’il permet de proposer d’autres formats au navigateur :

<picture>
    <source type="image/svg+xml" srcset="image.svg">
    <source type="image/webp" srcset="image.webp">
    <img src="image.png">
</picture>

Pratique pour pouvoir utiliser des formats d’image plus adaptés au web, tout en gardant une certaine compatibilité. Évidemment, vous pouvez combiner l’attribut <type> avec <media> et <srcset>, comme vu précédemment.

 

Si malgré toutes ces informations, vous éprouvez des difficultés à rendre une image responsive, n’oubliez pas que vous pouvez trouver des freelances pour vous aider dans votre projet web sur Codeur.com !