Site Building

6.12. Concept: Image Styles for Drupal 8, 9, 10, and 11

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-2024 by the individual contributors to the Drupal Community Documentation

Drupal User Guide