Any template using Image Toolbox takes forever to load

[CreateSean]

I've noticed that on my sites with code that previously had no issue (locally or in production) that now any template with image toolbox code takes a very very long time to load (more than 30seconds)

Example code

                  {% set image = mainEntry.image.one() ?? null %}
                  {% set transforms = {
                    '(max-width: 767.9px)': {
                      width: 705,
                      height:300,
                      mode: 'crop',
                      quality: 80,
                    },
                    '(min-width:768px) and (max-width: 1023.9px)': {
                      width: 705,
                      height:300,
                      mode: 'crop',
                      quality: 80,
                    },
                    '(min-width:1024px) and (max-width: 1279.9px)': {
                      width: 240,
                      height:105,
                      mode: 'crop',
                      quality: 80,
                    },
                    '(min-width: 1280px)': {
                      width: 300,
                      height:130,
                      mode: 'crop',
                      quality: 80,
                    },
                  } %}
                  {% if image|length %}
                    {% set attributes = {
                        class: [
                            'object-cover w-full h-full',
                        ],
                        loading:'lazy',
                        alt: image.altText ?? image.title ?? null,
                    } %}
                    {{ craft.images.pictureMedia(image, transforms, null, attributes) }}

But if I switch to standard Craft code the page loads quickly

                     {% set image = mainEntry.image.one() ?? null %}
                    {% set crop = {
                      height:300,
                      width:700,
                    } %}
                    <img src="{{ image.url(crop) }}" alt="" class="object-cover w-full h-full">

Please advise

[piotrpog]

@CreateSean Can you please tell me if changing placeholder mode to something else than "file" mode somehow fixes that issue?

[CreateSean]

@piotrpog No it didn't.

Since this was an urgent fix, I've set up an include for responsive images that uses native code and now the site is running fast again.

[piotrpog]

@CreateSean Is number of db queries changing when you use image toolbox vs regular transforms? Is the problem on multiple websites or specific one?

[piotrpog]

@CreateSean One more thing. Is showing width and height attributes enabled using useWidthHeightAttributes setting? If yes, can you please disable it and tell me if it helped?

[piotrpog]

@CreateSean Just released the update that fixes performance issues when using width and height attributes. If problem still persists, please let me know.