Closed moe2k closed 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?
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.
Some hints concerning your markup:
image="{images.0}"
instead of src
, the ViewHelper can take advantage of the image metadata already available in FAL as well as the File Reference. When in doubt, always use image objects instead of file names.srcset
& sizes
or breakpoints
, not both! breakpoints
should be used if you want to load different croppings for different viewports (e. g. square on mobile, 16:9 on desktop) and results in the <picture>
tag. srcset
uses a simple <img>
, which is the better option in most cases.srcset
as string or as array, not a combination of both.x
and w
descriptors in srcset
. This is not covered by the HTML standard and results in weird browser behaviors. I would recommend to use w
in most cases because it usually leads to smaller downloaded files if done correctly. w
also covers high resolution images, you don't have to use x
for that.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?
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.
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.
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).