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.
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 | medium |
| Use the image processing features outside a Contao application | → contao/image | low to medium |
| Modify or resize images directly | → imagine/imagine → contao/imagine‑svg | low |
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.