In Craft you can do two types of image transforms:

1. Control Panel Transforms:

Via: Settings → Assets → Image Transforms

2. Inline Transforms in your Templates

I’m currently using 100% inline transforms as they can be version controlled and seem to work better across different dev environments.

Are there any benefits of using Control Panel Transforms over using Inline Template Transforms in your Templates?

4 Answers 4


Both methods essentially do exactly the same thing to the image however there are two advantages to pre-defining them in the control panel:

  1. You can just call a transform handle in your templates instead of having to define the whole transform model
  2. They are then available to be used in supported field types e.g. in the Rich Text field type you can select an existing image transform when inserting an image

As you already mentioned the advantages that I can see to defining them in the templates are version control and the lack of needing a database.

I've started defining them all in the templates for the development phase and then when we move to staging I go and add all the ones we're using to the control panel.

  • The Rich Text Field benefit is a very valid point!
    – jnowland
    Jun 13, 2014 at 13:28
  • 1
    I've yet to find a client who will use it but still, its a lovely feature! Jun 13, 2014 at 13:29


The only technical difference is, that predefined-transforms have a different directory structure:


whereas inline-transforms use dimensions:


Personally I like the first one more.



The difference for users is, that only predefined-transforms can be selected in RichText-fields.



I often use just a few transforms on my projects, so I find maintaining them from the backend easier.

But you could just as well create yourself an include-file to have everything in one place:


{% set transform_1 = {
    mode: 'crop',
    width: 100,
    height: 100,
    quality: 100,
    position: 'top-center'
} %}

{% set transform_2 = {
    mode: 'crop',
    width: 50,
    height: 50,
    quality: 75,
    position: 'center-center'
} %}


{% include "_includes/image_transforms" %}

<img src="{{ asset.getUrl(transform_1) }}">

<img src="{{ asset.getUrl(transform_2) }}">
  • The development section here is a little wrong - you can't set variables in an include and have them available in the template that includes the include (includes receive a copy of the context, not the actual context, to work in) Feb 11, 2016 at 4:26

If you need the image transforms in Rich Text fields, you have to define them in the control panel, as Josh said. Apart from that, I feel that it's much more flexible to define them at the template level.

The main advantage is that you can then make the transform dynamic, based on the current template or the current content that is displayed. One example is being able to do transforms based on the users device/screen size. Another is being able to give the client the ability to define crop positions on a per image basis.


They should effectively be doing the same thing. Control Panel Transforms are simply predefined transforms. In both cases, they should perform equally after the first render because Craft stores the transformed image for later reuse.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.