Image Processing

Contao features a powerful image processing system for handling image resizes and creating responsive images. In this section you’ll learn how to use this functionality in your own code and templates.

Image Processing Stack

Under the hood, Contao uses its own standalone library contao/image to generate responsive images. This library is based on imagine/imagine and contao/imagine-svg which do the actual modification of image files. The CoreBundle comes with an ImageFactory and PictureFactory that wrap around those libraries, adapt them to the Contao ecosystem and provide additional features like the ability to use predefined resize configuration. Finally, there are the Studio classes that allow a convenient way to use the factories to generate and output images and metadata for your templates.

Example use case Component Abstraction level
Output images in a template → Image Studio high
Resize images with full control over each parameter → ImageFactory
→ PictureFactory
Use the image processing features outside a Contao application → contao/image low to medium
Modify or resize images directly → imagine/imagine
→ contao/imagine‑svg


Outputting responsive images can be quite a challenging task due its large amount of attributes and parameters. Contao therefore provides an image.html5 (and picture_default.html5) template out of the box. If you are using the Image Studio component you can also profit from its matching figure.html.twig Twig template and macros.

See the templating section for more information.

For Contao versions prior to 4.10 please refer to the Legacy section on how to use images in your templates.