Redimensionner et rogner des images en CSS

Il y a quelques années, je vous expliquais comment, grâce à du PHP, nous pouvions créer des vignettes à partir d’une grande image. C’était lourd pour le serveur, pas très optimal, mais léger pour le client. Mais avec l’arrivée du HTML5, du CSS3 et l’amélioration du réseau (merci la 4G), nous pouvons maintenant changer de technique en allégeant un peu notre serveur.

L’idée principale est simple : Nous avons des images de taille totalement aléatoires, mais nous devons les afficher dans des blocs de taille fixe, sans les déformer pour autant, tout en les uniformisant.tuto-vignette-css-1

<img src="image1.png" alt="" />
<img src="image2.png" alt="" />
<img src="image3.png" alt="" />

Considérons nos 3 images :

  1. 200×300
  2. 250×250
  3. 250×150

Des dimensions bien différentes, et ce qui compte le plus, c’est qu’elles sont de ratio différents (largeur/hauteur). Ainsi, si on décidait de les redimensionner à la main pour qu’elle aient toutes la même largeur, elles n’auraient pas la même hauteur, vice et versa.

tuto-vignette-css-2

<img src="image1.png" alt="" width="200" />
<img src="image2.png" alt="" width="200" />
<img src="image3.png" alt="" width="200" />

Les dimensions de nos trois images, à l’écran, sont maintenant de :

  1. 200×300
  2. 200×200
  3. 200×120

Nous avons donc un soucis, il nous faut redimensionner ces images pour qu’elles aient toutes la même dimension, sans pour autant les déformer. Pour cela, il faut les rogner. Rien de plus simple grâce à CSS3 :

tuto-vignette-css-3

Un peu de CSS :

.image {
background-size: cover;
width: 300px;
height: 200px;
}

Et notre HTML :

<div class="image" style="background-image:url(image1.png)"></div>
<div class="image" style="background-image:url(image2.png)"></div>
<div class="image" style="background-image:url(image3.png)"></div>

Magique ! Nos 3 blocs font maintenant 300×200, et l’image est placée en arrière plan (jusque là, rien de bien compliqué). Et on rajoute la ligne background-size: cover qui indique à l’image en arrière plan de s’étendre jusqu’à ce qu’elle recouvre l’intégralité du block. Et en bonus, c’est gratuit, ça optimise automatiquement le chargement de votre page (les images ne seront pas chargées au moment de l’affichage du code HTML, mais uniquement après que le CSS soit totalement chargé, donc en toute fin du chargement).

Il reste un dernier détail pour ceux pour qui ces images ont une importance au niveau du référencement naturel. En effet, on sait que Google référence les images des sites internet, mais pas celles contenus dans le CSS, ce qui peut être problématique dans certaines occasions. Pour cela, rien de plus simple, il suffit de rajouter une balise image, mais de la cacher.

.image {
background-size: cover;
width: 300px;
height: 200px;
}

.image img {
display: none;
}

Et notre HTML :

<div class="image" style="background-image:url(image1.png)"><img src="image1.png" alt="" /></div>
<div class="image" style="background-image:url(image2.png)"><img src="image2.png" alt="" /></div>
<div class="image" style="background-image:url(image3.png)"><img src="image3.png" alt="" /></div>

Rien de plus simple donc. Les images sont présentes dans le code, elles ne sont pas chargées ni affichées, mais bel et bien reconnus par les moteurs de recherche.

5 commentaires

  1. Bonjour,

    vous avez un petit copier/coller trop rapide pour les deux fois 3 lignes HTML, elles sont identiques (image1, image1, image1) au lieu de (image1, image2, image3) pour les background-image contrairement au source des balises img.

    Mais merci beaucoup de cette précieuse astuce qui permet d’avoir une mosaïque carrée au pixel près sans retailler toutes les images.

    Alskar

    PS : j’ai beaucoup le système d’agrandissement auto du textarea en fonction du nombre de lignes écrites.

Laisser un commentaire