---
title: "Image styles"
date: "2025-07-29T10:38:18+00:00"
summary: "Optimize image display with Drupal's Image Styles. Resize, crop, and apply effects for consistent, visually appealing content across your site."
image:
type: "page"
url: "/acquia-source/image-styles"
id: "cb25fb78-323a-4614-b856-f0a60747445f"
---

Image styles are used to display image fields in a particular format. Any entity such as content, media, and taxonomy, may have an image [field](/acquia-source/managing-fields "Managing fields").

Image styles enable you to:

*   Define a set of transformations that can be applied to images automatically.
    
    These transformations help to ensure that images are displayed optimally across different contexts.
    
*   Resize images to fit specific width and height requirements for consistency in presentation.
*   Crop images to maintain specific aspect ratios, which is useful for maintaining visual consistency across different image displays.
*   Apply various effects to meet specific design or branding needs.
    
    For example, desaturation for converting images to grayscale and watermarking for adding watermarks.
    

Creating an image style
-----------------------

Use the following steps to create an image style:

1.  [Access your site](/node/69836#access-a-site).
    
2.  In the left sidebar, click **Configuration** > **Media** \> **Image styles**.
3.  Click **Add image style**.
4.  In the **Image style name** field, enter a name for the image style.
    
    Ensure that the name is clear and easy to identify. For example, Hero Banner or Thumbnail.
    
5.  Click **Create new style**.
6.  Add effects to the style.
    
    For example:
    
    *   **Scale**: Resize to specific dimensions while maintaining aspect ratio.
    *   **Crop**: Remove portions of the image to achieve specific dimensions.
    *   **Scale and crop**: Resize then crop to exact dimensions.
    *   **Desaturate**: Convert to grayscale.
    *   **Rotate**: Change the orientation of the image.
7.  Configure the settings for each effect.
8.  Click **Save**.

Applying an image style to an image field
-----------------------------------------

Use the following steps to apply an image style to an image field through display settings.:

1.  [Access your site](/node/69836#access-a-site).
    
2.  In the left sidebar, click **Structure** > **Content types** or **Structure** > **Media types**.
3.  Select the type that contains the image field.
4.  Click **Manage display**.
5.  Configure the format settings for the image field.
6.  Click **Save**.

Flushing an image style
-----------------------

When you update an image style, you may need to regenerate the derivatives.

Use the following steps to flush an image style:

1.  [Access your site](/node/69836#access-a-site).
2.  In the left sidebar, click **Configuration** > **Media** \> **Image styles**.
3.  Select the image style that you want to flush.
4.  Click **Flush**.
5.  Confirm the action to delete all existing derivatives for that style, which are regenerated as needed.