What are the Pros and Cons to each image transform technique?

Question

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?

Answer 1

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.

Answer 2

Technical:

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

/asset-folder/_transform-name/image.jpg

whereas inline-transforms use dimensions:

/asset-folder/_300x100/image.jpg

Personally I like the first one more.

.

Users:

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

.

Development:

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:

/_includes/image_transforms.html:

{% 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'
} %}

/some_template.html:

{% include "_includes/image_transforms" %}

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

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

Answer 3

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.

Answer 4

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.