Responsive design in Drupal 10 and Drupal 11 is not just CSS media queries. It integrates:

• Mobile‑first strategy
• breakpoints.yml
• Image Styles
• Responsive Image module
• element rendering
• Performance optimization

For the Acquia Front End Specialist exam, you must understand:

• How breakpoints are defined
• How they connect to responsive image styles
• How Drupal generates image derivatives
• How the element is built
• Why Drupal uses this architecture

This topic is both frontend and performance critical.

1. Mobile‑First Architecture in Drupal

Drupal core follows a mobile‑first philosophy.

This means:

• Base CSS applies to mobile
• Larger screens use media queries
• Responsive images serve smaller files first

Why mobile‑first?

• Better performance
• Smaller initial payload
• Improved Core Web Vitals
• Better caching efficiency

Drupal does not enforce mobile CSS automatically — but its theming system supports it fully.

2. breakpoints.yml (Theme Level Configuration)

Breakpoints are defined in:

theme_name.breakpoints.yml

Example:

my_theme.mobile:
  label: Mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0

my_theme.tablet:
  label: Tablet
  mediaQuery: '(min-width: 768px)'
  weight: 1

my_theme.desktop:
  label: Desktop
  mediaQuery: '(min-width: 1024px)'
  weight: 2

Key points:

• mediaQuery defines CSS condition
• weight defines order
• Must match responsive image configuration

Core system reads this via:

Drupal\Core\Asset\BreakpointManager

Location:

core/lib/Drupal/Core/Asset/

Drupal 11 uses the same architecture.

3. Image Styles (Server‑Side Image Derivatives)

Image Styles are configuration entities.

Path:

Admin → Configuration → Media → Image Styles

Example styles:

• thumbnail (100x100)
• medium (220x220)
• large (480x480)

When an image is requested:

1. Drupal checks if derivative exists
2. If not → generates resized version
3. Stores it in public://styles/

Core classes involved:

• ImageStyle.php
• ImageEffectBase.php

Location:

core/modules/image/

Why Drupal generates derivatives:

• Reduces bandwidth
• Improves LCP
• Caches resized images
• Avoids resizing on every request

4. Responsive Image Module

Core module: responsive_image

Location:

core/modules/responsive_image/

It connects:

Breakpoints

• Image Styles
  = Responsive Image Style

You create:

Responsive Image Style
→ Map breakpoints to image styles

Example mapping:

Mobile → thumbnail
Tablet → medium
Desktop → large

5. How Drupal Generates Element

When using Responsive Image field formatter, Drupal outputs:

<picture>
  <source media="(min-width: 1024px)" srcset="image-large.jpg">
  <source media="(min-width: 768px)" srcset="image-medium.jpg">
  <img src="image-thumbnail.jpg" alt="Example">
</picture>

This happens via:

ResponsiveImageFormatter.php

Drupal automatically:

• Adds srcset
• Adds media attributes
• Adds fallback
• Escapes attributes

You should NOT manually build picture elements.

Exam trap:

Do NOT hardcode in Twig.

6. Field Display Integration

Steps:

1. Add image field to content type
2. Go to Manage Display
3. Change formatter to "Responsive Image"
4. Select Responsive Image Style

No Twig override required.

7. Performance Benefits

Responsive images improve:

• Largest Contentful Paint
• Mobile performance
• Bandwidth usage
• CDN efficiency

Drupal also supports:

• Loading="lazy"
• Width/height attributes
• Automatic alt output

8. Required vs Optional Summary

9. Common Mistakes

❌ Hardcoding sizes in Twig
❌ Using single large image everywhere
❌ Forgetting alt text
❌ Not defining breakpoints
❌ Mismatch between breakpoint names

10. Real Project Scenario

Scenario:
Homepage hero image is 2000px wide.

Wrong approach:
Serve full 2000px image to mobile.

Correct approach:

1. Create mobile style (600px)
2. Create tablet style (1200px)
3. Map via responsive image style
4. Use Responsive formatter

Result:
Mobile downloads smaller file.

11. Interview Questions

1. Explain how Drupal generates responsive images.
2. What is the relationship between breakpoints and image styles?
3. Where are image derivatives stored?
4. Why should you avoid manually building picture elements?
5. How does responsive images improve performance?

12. Exam‑Style Questions

Q1: Which file defines theme breakpoints?
A. theme.info.yml
B. theme.breakpoints.yml
C. libraries.yml
D. image.styles.yml

Correct: B

Q2: Which module connects breakpoints with image styles?
A. Image
B. Media
C. Responsive Image
D. Layout Builder

Correct: C

Q3: Where are image derivatives stored?
A. core/images
B. public://styles/
C. templates/
D. libraries/

Correct: B

13. Quick Cheat Sheet

• Breakpoints → breakpoints.yml
• Image resizing → Image Styles
• Mapping → Responsive Image Style
• Output → element
• Derivatives → public://styles/
• Drupal 10 & 11 use same system

Final Thoughts

Breakpoints and responsive images are where frontend architecture meets backend performance in Drupal. Mastering this system ensures scalable design, optimized delivery, and strong exam performance.