[[structure-image-responsive]]

=== Concept : styles d'images réactifs (responsive)

[role="summary"]
Vue d'ensemble des styles d'images réactifs, qui permettent de fournir
différentes images pour des tailles d'écrans différentes.

(((Style d'image réactif (responsive),vue d'ensemble)))
(((Style d'image,réactif (responsive))))
(((Point de rupture,vue d'ensemble)))
(((Balise HTML5 picture,et images réactives (responsive))))

==== Pré-requis

* <<understanding-themes>>
* <<structure-content-display>>
* <<structure-image-styles>>

==== Qu'est-ce qu'un style d'image réactif (responsive) ?

Le module du cœur Responsive Image fournit des styles d'images réactifs. Cela
vous permet d'avoir sur votre site web des images dimensionnées spécifiquement
pour différentes tailles d'écrans. Cela est par exemple utile pour faire en
sorte que votre site se charge plus vite sur des dispositifs mobiles, puisque
les tailles d'images sont optimisées pour les écrans plus petits.

Un style d'image réactif établit une correspondance entre des styles d'images et
des points de rupture. Les points de rupture sont des points à partir desquels
un design réactif doit changer pour répondre aux différentes tailles d'écrans.
Les styles d'images réactifs ne peuvent être utilisés que si les points de
rupture sont définis dans le thème.

Quand un style d'image réactif est défini, il peut être utilisé dans les
paramètres d'affichage pour un champ image. Ceci permet au site d'afficher des
images réactives en utilisant la balise HTML5 picture.

==== Sujets liés

<<structure-fields>>

==== Pour aller plus loin (en anglais)

* https://www.drupal.org/node/1388492[_Drupal.org_ community documentation page "Responsive web design"]

* https://www.drupal.org/docs/8/mobile-guide/responsive-images-in-drupal-8[_Drupal.org_ community documentation page "Responsive images in Drupal 8"]

* https://www.drupal.org/docs/8/theming-drupal-8/working-with-breakpoints-in-drupal-8[_Drupal.org_ community documentation page "Working with breakpoints in Drupal 8"]


*Attributions*

Adapté par https://www.drupal.org/u/batigolix[Boris Doesborg] depuis
https://www.drupal.org/docs/8/mobile-guide/responsive-images-in-drupal-8[Responsive images in Drupal 8],
copyright 2000-2019 contributeurs individuels à 
https://www.drupal.org/documentation[la documentation de la communauté Drupal].
Traduit par https://www.drupal.org/u/vanessakovalsky[Vanessa Kovalsky] et
https://www.drupal.org/u/fmb[Felip Manyer i Ballester].
