[[structure-image-responsive]]

=== Основы: Адаптивные Стили изображений

[role="summary"]
Обзор адаптивных стилей изображения, которые позволяют вам предоставлять разные изображения для разных размеров экрана.

(((Адаптивные Стили изображений,обзор)))
(((Стили изображений,адаптированный)))
(((Точка перехода,обзор)))
(((HTML5 тег изображения, и адаптированные изображения)))

==== Необходимые знания

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

==== Что такое адаптированные стили изображения?

Модуль ядра Drupal Responsive Image предоставляет стили адаптивного изображения. Это позволяет
вам изображения на вашем сайте, которые подстраиваются под разные
размеры экрана. Это полезно, например, для ускорения загрузки вашего сайта на
мобильных устройства, потому что размеры изображений оптимизированы для маленьких экранов.

Адаптивный стиль изображения - это отображение между стилями изображения и точками перехода.
Точки перехода - это точки, где адаптивный дизайн должен меняться и
реагировать на экраны разных размеров. Адаптивные стили изображений могут работать
с точками перехода, определенными в вашей теме, или с точками перехода, определенными в
настройках стилей адаптивного изображения.

Когда стиль адаптивного изображения определен, его можно использовать в настройках отображения
для полей изображения. Это позволяет сайту отображать адаптивные изображения, используя
HTML5 _picture_ тег или использовать атрибуты _srcset_ и _sizes_ в теге _img_,
в зависимости от того, как настроен стиль адаптивного изображения.

==== Похожие темы

<<structure-fields>>

==== Дополнительные ресурсы

* https://www.drupal.org/node/1388492[_Drupal.org_ страница документации сообщества "Responsive web design"]

* https://www.drupal.org/docs/8/mobile-guide/responsive-images-in-drupal-8[_Drupal.org_ страница документации сообщества "Responsive images in Drupal 8"]

* https://www.drupal.org/docs/8/theming-drupal-8/working-with-breakpoints-in-drupal-8[_Drupal.org_ страница документации сообщества "Working with breakpoints in Drupal 8"]

* https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset[Пост в блоге "Responsive Images in Drupal 8 using 'srcset'"]

*Авторы*

Адаптировано https://www.drupal.org/u/batigolix[Boris Doesborg] от
https://www.drupal.org/docs/8/mobile-guide/responsive-images-in-drupal-8[Responsive
images in Drupal 8],
авторские права 2000-2017 отдельными вкладчиками в
https://www.drupal.org/documentation[Drupal Community Documentation].

Переведено https://www.drupal.org/u/MishaIsmajlov[Михаил Исмайлов].
