Native image transforms quality is not as good imager-x transform quality

[mikesnoeren]

Description

When making transforms* using Craft's native image transforms the quality is noticeably worse then when using imager-x to make a transform*. Imager relies largely on Craft's underlying image processing library (imagine), so the quality should nearly the same. _{^{* The transforms only set width, height and quality(80) properties.}}

It is entirely possible imager-x got a different set of defaults depending on if Imagick or GD is installed than Craft does that might explain quality differences. Or they are doing some pre or post-processing that Craft does not that might explain the differences.

Maybe it is possible to allow the defaults to be overwritten or replenished through a config file, so we can set those defaults to our own liking?

Steps to reproduce

1. Upload .jpg image to Craft.
2. Transform the image via transforms set in template.
3. Transform the image using imager-x.
4. display all images, notice the quality difference.

Additional info

• Craft version: All versions
• PHP version: 7.3, 7.4 & 8.0
• Database driver & version: 5.7.36 & 8.0.27
• Plugins & versions: ImagerX V3.5.5

[andris-sevcenko]

What transform parameters are you using in templates? Also, do you have Imagick enabled and working?

[timkelty]

@mikesnoeren if you could share an example jpg so we know exactly what to look for, that would help to.

[ItagMichael]

I think I might be experiencing the same.

For me, even applying a transform with the quality set to 100% against an image that shouldn't require any cropping/modifications reduces the quality. I had actually opened a support ticket to see if there was any internal insight on this (id 13860), unfortunately wasn't able to update ImageMagick to the latest version due to time constraints so this kind of stalled on my end.

May be able to put together an example but will be a good delay before I can do so.

Perhaps useful/related, there's also a discussion thread on exposing a sharpen option which ImagerX has but CraftCMS lacks: https://github.com/craftcms/cms/discussions/9050 Though if the plugin output looks better than Craft's with sharpen set to false then that'd suggest something else is happening too.

[wsydney76]

We are seeing better results for Craft's native transforms by setting 'optimizeImageFilesize' => false, in config/general.php

Looks like Imagine\Imagick::smartResize is called by default, which says "Resizes the image using smart defaults for high quality and low file size", but imho the loss of quality is more significant than the win in reduced file size.

[mikesnoeren]

@timkelty unfortunately due to time constraints I wasn't able to provide you with any jpg images, are they still required? Or were you able to reproducte this issue yourself?

I started a support ticket with @olivierbon the 16th of December 2021. That support ticket had some sample images, but no imager-x variants to compare them with. Can those images help you at all?

[ItagMichael]

I don't suppose this is something that could be looked at for Craft 4's release? This is a consistent pain point for us.

Unfortunately optimizeImageFilesize seems to have no effect for us quality wise.

[ItagMichael]

I just wanted to bump this again now that Craft 4 is well and truly out. Is ImagerX the only real option, or are there plans to improve or look at Craft's own pipeline?

[timkelty]

@ItagMichael @mikesnoeren Sorry for letting this one linger…

To accurately investigate, I really need a test case. That would include:

• an example image
• The exact imager-x settings and transform settings
• The exact native Craft Transformer settings

@mikesnoeren I have the images you sent in to support, so if you can provide the settings, that would help.

[mikesnoeren]

Hi @timkelty,

Thanks for getting back on top of this. Because this hasn't been getting attention for so long I have lost the templates, settings and images used when I created this issue.

You can however try this in any version of Craft to see that a lot of detail is lost when creating a transform.. While the loss of detail is noticeable for all jpg images, the more color contrast, straight lines or details the original image has, the worse the transformed image will look. If you are looking for an 'extreme' example, upload an image of any graph with lines, color contrast and text in it. This 'extreme' example will generate a very blurry image. Whereas doing the exact same with Imager creates very sharp images, usually with the same or even smaller filesizes.

As I said before, I don't have an imager code example anymore, but below is a native Craft transform script you can use: Native craft transform:

{% for image in entry.imageField.all() %}
    {% set transform = {
        width: 400,
    } %}

    {% do image.setTransform(transform) %}

    {{ tag('img', {
        'src': craft.svgplaceholder.generate({ width: image.width, height: image.height }),
        'width': image.width,
        'height': image.height,
        'data-srcset': image.getSrcset(['1x','2x']),
        'alt': image.title,
        'class': 'lazyload',
    }) }}
{% endfor %}

[timkelty]

@mikesnoeren I'm at a loss with how to test this without a concrete example. I've used the image you provided from the original support request, as well as grid lines and others and don't see the difference you're referring to.

In terms of defaults, I've identified theses differences:

• Craft sets optimizeImageFilesize to true by default, while Imager-X sets smartResizeEnabled to false by default. These map to the same smartResize Imagemagick method, so to compare apples to apples, you'd need to have these settings match
• Craft sets its own defaultImageQuality setting to 82, while Imager-X sets it to 80.

If you can provide some assets I can reproduce this on, I'm happy to continue investigating, but at this point I'm not seeing any quality difference in my tests.

[mikesnoeren]

Hi @timkelty,

So I took the time to do some investigating using the latest version of Craft 4 and Imager Lite. I hadn't changed any config settings in my testing.. To my surprise the results were nearly identical to one another, which means this issue can be closed unless someone has different results.. (@ItagMichael, @wsydney76, would one or perhaps both of you be able to help us out here?)

@timkelty Do you know the update to craft 4 changed anything to the native image transforms?

Here's the template I used to do my testing:

<div style="max-width: 2010px; margin: 0 auto; display: flex; gap: 10px">
    <div>
        {% for image in website.testImages.all() %}
            {% do image.setTransform({
                width: 1000,
            }) %}

            <div class="image" style="margin-bottom: 10px">
                {{ tag('img', {
                    'src': image.url(),
                    'width': image.getWidth(),
                    'height': image.getHeight(),
                }) }}
            </div>
        {% endfor %}
    </div>
    <div>
        {% for image in website.testImages.all() %}
            {% set image = craft.imager.transformImage(image, { width: 1000 }) %}

            <div class="image" style="margin-bottom: 10px">
                {{ tag('img', {
                    'src': image.url(),
                    'width': image.getWidth(),
                    'height': image.getHeight(),
                }) }}
            </div>
        {% endfor %}
    </div>
</div>

Hope this helps in any way,

[svonlanthen]

@timkelty

In my Opinion this might still be an issue - Not heavy, but important for Graphic Designers :)

I want to provide an example here.

It's more about the discussion - What do you think - Is it maybe that ImageMagick lacks some precision?

System:

Imagick 3.7.0 (ImageMagick 6.9.11-60) Craft Pro 4.5.11.1 PHP 8.2.13

Craft Config:

'optimizeImageFilesize' => false

Original Image for this Test: https://sv.erfrischung.ch/transfer/craft-transforms/iStock-1336145435_original_300dpi_6470.jpg

As comparison, Exports for Web, with Photoshop 100% JPG: https://sv.erfrischung.ch/transfer/craft-transforms/1920_100_photoshop.jpg 80% JPG: https://sv.erfrischung.ch/transfer/craft-transforms/1920_80_photoshop.jpg

Craft Transforms with output and config:

output: https://sv.erfrischung.ch/transfer/craft-transforms/1920_80_fit_craft.jpg

    mode: 'fit',
    width: 1920,
    quality: 80,
    position: 'center-center',
    format: 'jpg'

output: https://sv.erfrischung.ch/transfer/craft-transforms/1920_80_letterbox_craft.jpg

    mode: 'letterbox',
    width: 1920,
    quality: 80,
    position: 'center-center',
    format: 'jpg'

output: https://sv.erfrischung.ch/transfer/craft-transforms/1920_100_fit_craft.jpg

    mode: 'fit',
    width: 1920,
    quality: 100,
    position: 'center-center',
    format: 'jpg'

output: https://sv.erfrischung.ch/transfer/craft-transforms/1920_100_letterbox_craft.jpg

    mode: 'letterbox',
    width: 1920,
    quality: 100,
    position: 'center-center',
    format: 'jpg'

[timkelty]

@svonlanthen thanks! I didn't doubt it was an issue, but couldn't do much confirmation without some specifics like you posted. Will dig in!