Here’s the thing about images: they make your site look great… but they can quietly sabotage your performance while you’re busy admiring them. Did you know one gigantic photo can slow down your page, frustrate your visitors, and drag your Core Web Vitals score down? 

But here’s the good news - with Drupal, you already have a lot of tools built in. What this really means is you don’t need to reinvent the wheel - you just need a sensible workflow.

This guide will take you step-by-step through everything from using Drupal’s built-in image styles to setting up WebP conversions, crafting responsive images, and delivering them via CDN. But before we dive in, can we all agree on one thing? Image Optimization Matters! Okay, let’s get started.

1. Use Drupal’s Core “Image Styles”

Drupal’s Image Styles let you automatically resize, crop, and compress images before they hit a visitor’s browser.

Steps to create an image style

• Navigate to Configuration → Media → Image styles (URL: /admin/config/media/image-styles).
• Click Add image style.
• Choose effects:
  • Scale or Scale and Crop
  • Convert to WebP
  • (Optional) Desaturate
• Save your style. Then you can use it anywhere on your site.

Applying an image style in Twig 

You can apply image styles directly in your Twig templates:

{{ {
  '#theme': 'image_style',
  '#style_name': 'large_webp',
  '#uri': file_uri,
  '#attributes': {
    alt: 'My alt text',
    loading: 'lazy',
  },
}|render }}

This renders the image using your defined image style and includes important attributes like alt and loading="lazy".

Applying Image Styles Using Field Formatter

You can also apply image styles via the Manage Display UI.

Steps:

1. Go to Structure → Content types → [Your Content Type] → Manage display
→ /admin/structure/types/manage/article/display

2. Locate your image field (e.g., “Image”).

3. In the Format column, select Image.

4. Click the settings gear and configure:

• Image style: choose thumbnail, medium, large, or your custom style.
• Link image to:
  • Nothing
  • Content (link to node)
  • File (link to original file)
• Image loading attribute:
  • Lazy (recommended, default)
  • Eager
  • None

5. Click Update → Save.

Pro tip: Use different image styles for mobile, tablet, and desktop. That way, you only serve what the device needs.

2. Enable WebP Conversion

WebP delivers smaller, faster-loading images. In Drupal 10, you get native support.

How to enable

• Edit your image style.
• Click “Add effect” → Convert to WebP.
• Save your style. Drupal will generate WebP versions automatically.

For even more control, use the Image Optimize + WebP module:

composer require drupal/imageapi_optimize_webp

drush en imageapi_optimize_webp -y

3. Responsive Images (Core)

You could serve the same large image to every device, but you shouldn’t. Drupal’s Responsive Image module helps browsers load the right image size for each device.

Steps

Enable the module:

drush en responsive_image -y

1. Go to /admin/config/media/responsive-image-style.
2. Create a responsive image style using breakpoints defined in
   your theme’s THEME_NAME.breakpoints.yml.
3. Assign that responsive style to your image field display.

Example Twig Code

{% set hero_Banner = {
  '#theme': 'responsive_image',
  '#responsive_image_style_id': 'hero_banner',
  '#uri': hero_thumbnail,
  '#attributes': {
    alt: hero_alt,
    loading: 'lazy',
    fetchpriority: 'high',
  },
} %}
{% if hero_thumbnail is not empty %}
  {{ hero_Banner|render }}
{% endif %}

This ensures browsers only download the optimal image for the current viewport.

4. Lazy Loading (Core Feature)

Drupal core automatically adds loading="lazy" to images since version 9.1. If you override image rendering in Twig, ensure you include it manually.

Example:

<img src="{{ file_url(image_uri) }}" alt="{{ alt }}" loading="lazy" />

Lazy loading prevents offscreen images from slowing down initial page rendering.

5. Use the Image Optimize Module

For advanced compression, Drupal offers the Image Optimize module. It integrates with APIs and command-line tools like TinyPNG, Kraken, jpegoptim, optipng, and cwebp.

Install

composer require drupal/imageapi_optimize

drush en imageapi_optimize -y

Integrations might include

• imageapi_optimize_tinypng
• imageapi_optimize_gd
• imageapi_optimize_webp

You can configure optimization pipelines at Configuration → Media → Image Optimize pipelines.

6. Optimize Original Uploads (Before Scaling)

Large images (e.g., 10MB) slow down your site before optimization. You can enforce upload size limits or resize before saving.

Options

• Go to Configuration → Media → Image toolkit
• Use Image Widget Crop or Image Resize Filter

Install the resize filter module

composer require drupal/image_resize_filter

Starting lean means fewer resources wasted downstream.

7. Optimize Caching and CDN Delivery

This is where you push performance further. Combine Drupal’s optimization with caching/CDN to deliver images fast globally.

Recommended Setup

• Enable AdvAgg or core aggregation for static assets.
• Use Cloudflare, Fastly, or similar CDNs for image caching and auto WebP delivery.

Optionally install the Image CDN module:

composer require drupal/image_cdn

This approach drastically reduces load time, especially on global sites.

8. Audit and Monitor Image Performance

Measure and validate your optimizations regularly. 

Tools

• Google Lighthouse or PageSpeed Insights
• WebPageTest.org
• Drupal Devel → Performance profiling

These help you identify:

• Oversized images
• Missing responsive attributes
• Poorly cached or unoptimized media

Final thoughts

Images don’t have to slow you down. With Drupal’s built-in tools, a smart optimisation workflow, and a bit of intentional setup, you can deliver faster, cleaner experiences and improve your Core Web Vitals as a result.

If you’d like help tuning your Drupal site’s images (or tackling the full performance stack), our team at Specbee is happy to dive in. You bring the images, we’ll bring the optimisation. Let’s talk!