--- label: 'Configuring a responsive image style' related: - core.media - field_ui.manage_display - layout_builder.overview - image.style - breakpoint.overview --- {% set media_topic = render_var(help_topic_link('core.media')) %} {% set image_style_topic = render_var(help_topic_link('image.style')) %} {% set breakpoint_overview_topic = render_var(help_topic_link('breakpoint.overview')) %} {% set styles = render_var(url('entity.responsive_image_style.collection')) %}

{% trans %}Goal{% endtrans %}

{% trans %}Configure a responsive image style, which can be used to display images at different sizes on different devices. See {{ media_topic }} for an overview of responsive image styles, and {{ breakpoint_overview_topic }} for an overview of breakpoints.{% endtrans %}

{% trans %}Steps{% endtrans %}

  1. {% trans %}In the Manage administrative menu, navigate to Configuration > Media > Responsive image styles.{% endtrans %}
  2. {% trans %}Click Add responsive image style.{% endtrans %}
  3. {% trans %}Enter a descriptive Label for your style.{% endtrans %}
  4. {% trans %}Select a Breakpoint group from the groups defined by your installed themes and modules.{% endtrans %}
  5. {% trans %}Select a Fallback image style to use when none of the other styles apply. See {{ image_style_topic }} if you need to add a new style.{% endtrans %}
  6. {% trans %}Click Save.{% endtrans %}
  7. {% trans %}On the next page, locate the fieldsets for the breakpoints provided by the selected Breakpoint group.{% endtrans %}
  8. {% trans %}For each breakpoint that you want to use, expand the corresponding fieldset. Select the Select a single image style. radio button under Type for the breakpoint, and select the Image style to use for images when that breakpoint is in effect. Repeat this step for the rest of the breakpoints you want to use.{% endtrans %}
  9. {% trans %}Click Save{% endtrans %}
  10. {% trans %}You can now use this responsive image style to format a field containing an image, in your layouts or traditional field displays. See related topics below for more information.{% endtrans %}