6.12. Concept: Image Styles

Last updated on
14 April 2025

What are image styles?

Image styles allow you to upload a single image but display it in several ways; each display variation, or image style, is the result of applying one or more effects to the original image.

As an example, you might upload a high-resolution image with a 4:3 aspect ratio, and display it scaled down, square cropped, or black-and-white (or any combination of these effects). The core software provides a way to do this efficiently:

  1. Configure an image style with the desired effects on the Image styles page (admin/config/media/image-styles).
  2. The effects will be applied the first time a particular image is requested in that style.
  3. The resulting image is saved.
  4. The next time that same style is requested, the saved image is retrieved without the need to recalculate the effects.

The core software provides several effects that you can use to define styles; others may be provided by contributed modules.

Visit the Image styles page via the Manage administrative menu, navigate to Configuration > Media > Image styles (admin/config/media/image-styles) to see the image styles that are defined by default.

Additional resources

Drupal.org community documentation page "Working with images"

Attributions

Adapted and edited by Boris Doesborg, and Jojy Alphonso at Red Crackle, from "Working with images" copyright 2000-2025 by the individual contributors to the Drupal Community Documentation

 

This page is generated from AsciiDoc source from the User Guide. To propose a change, edit the source and attach the file to a new issue in the User Guide project. PDF and e-book formats are available on the User Guide project page.

Source file: structure-image-styles.asciidoc

Help improve this page

Page status: No known problems

You can: