Les images responsives sont une technique pour charger des images qui s’adaptent à la taille de l’écran de l’utilisateur, afin de garantir une qualité d’affichage optimale et économiser la bande passante.
Les images responsives utilisent l’attribut srcset pour spécifier une liste d’images de différentes tailles et résolutions. Le navigateur choisit ensuite l’image la plus appropriée en fonction de la taille de la fenêtre de l’appareil et de la résolution de l’écran.
Exemple d’images responsives
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'Images responsives</title>
</head>
<body>
<h1>Images Responsives</h1>
<img
src="image-mobile.jpg" <!-- Image par défaut pour les petits écrans -->
srcset="image-mobile.jpg 480w, <!-- Image pour les écrans de 480 pixels de largeur -->
image-tablet.jpg 768w, <!-- Image pour les écrans de 768 pixels de largeur -->
image-desktop.jpg 1200w" <!-- Image pour les écrans de 1200 pixels de largeur -->
alt="Description de l'image réactive"
>
</body>
</html>Utilisation des images responsives dans Symfony
Pour ajouter des images réactives à la volée dans Symfony, vous pouvez utiliser le service WebpackEncoreBundle. Ce service fournit une fonction getResponsiveImage() qui vous permet de générer une chaîne de caractères HTML contenant les attributs srcset et src pour une image réactive.
// ...
$image = $this->get('webpack_encore.tag_manager')->getResponsiveImage(
'/images/image.jpg',
[
'100w' => '/images/image-small.jpg',
'200w' => '/images/image-medium.jpg',
'300w' => '/images/image-large.jpg',
]
);
// ...
echo $image;