srcSet is generated differently on remote server than in local DDEV environment

tpinne commented 2 years ago

The following Snippet generates different output on remote server than in local DDEV environment for a 3300x2550px PNG file.

<sms:image
    image="{images.0}"
    alt="{images.0.alternative}"
    title="{images.0.title}"
    srcset="400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2560"
    maxWidth="2560"
    cropVariant="fullWidthImage"
  />

It not only misses some defined srcSet steps. The big deal is that on the remote server there is 3300w option where no cropping is applied and it outputs the original file in all it's megabytes glory 😬

Extension version: 2.1.0

Because it works properly locally I don't think it is directly related to this extension. But hopefully you have more insight knowledge into TYPO3 image generation to point me in the right direction where to look further. Some information about my debugging so far and the environments.

Local (correct) output

<img class="col-span-full" src="/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_93927f03ad.png" 
srcset="
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_feb7d39222.png 400w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_77ce41abfc.png 600w,
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_81c08847de.png 800w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_9937e5623a.png 1000w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_7ac17ebb92.png 1200w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_99f68fd9ff.png 1400w,
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_e3fc258ead.png 1600w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_0cbf50b9ce.png 1800w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_0f88c76521.png 2000w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_8ebd4a9a19.png 2200w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_cd177df5a9.png 2400w, 
/fileadmin/_processed_/c/d/csm_Fiable-Furniture-Bathroom-dark_93927f03ad.png 2560w" 
sizes="(min-width: 2560px) 2560px, 100vw" alt="" width="2560" height="800">

Remote (wrong, IMHO) output

<img class="col-span-full" src="/fileadmin/_processed_/b/7/csm_Fiable-Furniture-Bathroom-dark_e1c692bb33.png" 
srcset="
/fileadmin/_processed_/b/7/csm_Fiable-Furniture-Bathroom-dark_72f487b447.png 400w, 
/fileadmin/_processed_/b/7/csm_Fiable-Furniture-Bathroom-dark_5c7c688e33.png 600w, 
/fileadmin/_processed_/b/7/csm_Fiable-Furniture-Bathroom-dark_b00ae270fe.png 800w, 
/fileadmin/_processed_/b/7/csm_Fiable-Furniture-Bathroom-dark_975bd4a5a5.png 1000w, 
/fileadmin/imos_media/branchen/Fiable-Furniture-Bathroom-dark.png 3300w,
/fileadmin/_processed_/b/7/csm_Fiable-Furniture-Bathroom-dark_e1c692bb33.png 2560w"
 sizes="(min-width: 2560px) 2560px, 100vw" alt="" width="2560" height="800">

The srcset-Array at this point https://github.com/sitegeist/sms-responsive-images/blob/ca61d8f9c66b7801c5fc79726016403e09228739/Classes/Utility/ResponsiveImagesUtility.php#L464 has all correct widths from the given attribute.

But when the loop comes to 1200 and above the $processedWidth is always 3300 (original image width) and therefore sets /fileadmin/imos_media/branchen/Fiable-Furniture-Bathroom-dark.png 3300w for the rest of the iterations. Both environments have [GFX][processor_allowUpscaling] = true.

https://github.com/sitegeist/sms-responsive-images/blob/ca61d8f9c66b7801c5fc79726016403e09228739/Classes/Utility/ResponsiveImagesUtility.php#L492-L499

But if I generate all those variants with <f:image ... /> each width is correctly scaled and cropped.

...
<f:image  image="{images.0}" width="1000" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="1200" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="1400" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="1600" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="1800" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="2000" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="2200" cropVariant="fullWidthImage" />
<f:image  image="{images.0}" width="2400" cropVariant="fullWidthImage" />

Local setup

TYPO3 Environment

Image processing config

Remote setup

Bildschirmfoto 2021-11-30 um 12 19 35

Bildschirmfoto 2021-11-30 um 12 19 20

s2b commented 2 years ago

Mh, sounds strange. My first instinct would be to delete the image assets cache on your remote server (there's a button in the install tool). You should also check in the install tool if image processing works properly.

Another problem could be that some or all images don't have the correct dimensions stored in sys_file (or is it sys_file_metadata?). In that case image processing could behave in a strange way.

tpinne commented 2 years ago

Ok, it seems to be a combination of the servers processing power or configuration or something like that with ridiculously sized PNG images.

The image in question has been a 9.5 MB PNG. Converted to a 800kb JPG with same dimensions works as intended. So as assumed not a problem with the extension. And though your suggestions didn't do the trick it made me try to replace that image.

So thx for helping :)

sitegeist / sms-responsive-images