sitegeist / sms-responsive-images

This TYPO3 extension provides ViewHelpers and configuration to render valid responsive images based on TYPO3's image cropping tool.
GNU General Public License v2.0
34 stars 19 forks source link

Unwanted upscaling despite processor_allowUpscaling = false #51

Closed moe2k closed 5 years ago

moe2k commented 5 years ago

When the uploaded image is smaller than the desired width as configured for srcset, upscaled images are still created despite processor_allowUpscaling is set to false. I'm using pixel widths.

Xdebug shows that the processed image's size always equals the candidateSize. Maybe just comparing the desired candidate size widh the image size of the original file is a better approach.

I would expect that the srcset stops at the highest available width (which should be the size of the original file).

s2b commented 5 years ago

I just tested this locally and it worked as expected: I used a 500px source image. With processor_allowUpscaling set to true, bigger images were created, once I set it to false and deleted the processed assets, the ViewHelper stopped at 500px.

Is there anything special about your environment? Which TYPO3 version do you use? Does it work with the core ViewHelper?

moe2k commented 5 years ago

Strange. I'm using the following viewhelper:

<sms:image class="image-embed-item lazyload" src = "{images.0.url}" width = "540" srcset="{'200,400,600, 800, 1000, 1200, 2x, 4x'}" lazyload="1" sizes="(min-width: 540px) 540px, 100vw" breakpoints="{ 0: {'cropVariant': 'default', 'media': '(min-width: 992px)', srcset: '100, 200, 400, 600, 800, 2x, 4x'}, 1: {'cropVariant': 'default', 'srcset': '100, 200, 400, 600, 800, 1000, 1200', 'sizes': '100vw'} }" picturefill="1" />

The source image is 540px. In the frontend I get the following HTML output:

<picture>
<source data-srcset="
/fileadmin/_processed_/a/9/csm_PlaceholderImg_0f1024b15d.png 100w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_e96d865746.png 200w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_c6c6a9259e.png 400w,
/fileadmin/_processed_/a/9/csm_PlaceholderImg_897f9c2044.png 600w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_92ccb2097f.png 800w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_2880f0dae7.png 2x, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_6aba406c7b.png 4x"
media="(min-width: 992px)" sizes="(min-width: 540px) 540px, 100vw" 
srcset="/fileadmin/_processed_/a/9/csm_PlaceholderImg_0f1024b15d.png 100w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_e96d865746.png 200w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_c6c6a9259e.png 400w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_897f9c2044.png 600w,
/fileadmin/_processed_/a/9/csm_PlaceholderImg_92ccb2097f.png 800w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_2880f0dae7.png 2x, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_6aba406c7b.png 4x">

<img class="image-embed-item lazyloaded" data-srcset="
/fileadmin/_processed_/a/9/csm_PlaceholderImg_0f1024b15d.png 100w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_e96d865746.png 200w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_c6c6a9259e.png 400w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_897f9c2044.png 600w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_92ccb2097f.png 800w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_c3bb25a208.png 1000w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_a4bb61eb6b.png 1200w"
sizes="100vw" width="540" alt="" 
srcset="/fileadmin/_processed_/a/9/csm_PlaceholderImg_0f1024b15d.png 100w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_e96d865746.png 200w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_c6c6a9259e.png 400w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_897f9c2044.png 600w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_92ccb2097f.png 800w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_c3bb25a208.png 1000w, 
/fileadmin/_processed_/a/9/csm_PlaceholderImg_a4bb61eb6b.png 1200w">
</picture>

... where all the images > 540px are being scaled up to their desired sizes. I'm using TYPO3 9.5.7 in a ddev environment with apache-fpm and php 7.2.

TYPO3_CONF_VARS['GFX']:

gdlib = 1
gdlib_png =
gif_compress = 1
imagefile_ext = gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg
jpg_quality = 85
processor = ImageMagick
processor_allowFrameSelection = 1
processor_allowTemporaryMasksAsPng = 0
processor_allowUpscaling = 0
processor_colorspace = RGB
processor_effects = 1
processor_enabled = 1
processor_interlace = None
processor_path = /usr/bin/
processor_path_lzw = /usr/bin/
processor_stripColorProfileByDefault = 1
processor_stripColorProfileCommand = +profile '*'
thumbnails = 1
thumbnails_png = 1

Core Viewhelper (using the same 540px png source) <f:image src="{images.0.url}" cropVariant="default" width="1200"/> ... works as expected: <img src="/fileadmin/user_upload/PlaceholderImg.png" width="540" height="336" alt="" /> The original image is returned. Downscaling also works.

s2b commented 5 years ago

Some hints concerning your markup:

So, my proposed markup would look something like this:

<sms:image
    class="image-embed-item lazyload"
    image="{images.0}"
    width="540"
    srcset="200,400,600, 800, 1000, 1200"
    lazyload="1"
    sizes="(min-width: 540px) 540px, 100vw"
    picturefill="1"
/>

Could you try again with my example code?

moe2k commented 5 years ago

My example was not a real-world example but rather meant as a "maximum options" scenario. However the upscaling behavior also occurs with your example code.

BUT it seems to have to do with the actual file (not the relation): Uploading a copy of the the exact same file with a new filename, or even replacing the file using the TYPO3 FAL replace functionality actually results in the expected behavior (540px maximum width image). The sys_file_metadata record between those files is identical. I also wasn't able to find any differences in the gfx processing using xdebug in a reasonable amount of time. So it seems to be some TYPO3 Core Bug or some artifact of my local configuration - still, the problem didn't occur using the core img viewhelper.

But anyway I think you can close the issue for now as it seems to be highly specific.

s2b commented 5 years ago

Did you try cleaning the generated graphics using the install tool?

Nevertheless, it doesn't seem to be a general problem then. But do get back to me in case you encounter it again.