Breakpoints & widths for responsive images are not correct

[olivermeckel]

Bug Report

Prerequisites

• [x] Can you reproduce the problem on TYPO3 v9.5 LTS
• [x] Did you perform a cursory search to see if your bug or enhancement is already reported?

I think issues #848 and #746 are related to this

Description

the default definition for responsiveimages in Configuration/TypoScript/ContentElement/Helper/ContentElement.typoscript are wrong Therefore the resolution of the images in the frontend is too low.

Example from boostrap_package.com (Laptop - Unlimited Opportunities)

• 1 image in gallery row with one column
• Browser width 575 Pixel (Breakpoint unset)
• Image is rendered with 374 Pixel
• Size of the image container is about 535 Pixel
• Image is scaled up and gets blurred

Screenshots

The width should be greater than the breakpoint. Something like this?

           default {
                breakpoint = 1200
                width = 1600
            }
            large {
                breakpoint = 992
                width = 1120
            }
            medium {
                breakpoint = 768
                width = 940
            }
            small {
                breakpoint = 576
                width = 720
            }
            extrasmall {
                breakpoint = unset
                width = 540
            }

Versions

typo3 9.5.18 & Bootstrap Package 11.0.2

[mechanicalman1]

How is your suggestion related to "High Resolution Images" from the release note 11.0.0 and #678 ?

[olivermeckel]

i think it does exactly what it should: it increases the resolution if the device can process it. so you get a sourceset with 3 variants for each data-variant by breakpoint.

As example for the breakpoint large (for an image in one column in a max-width container with 30 px gutters):

• data-variant="large"
• media="min-width: 992px", so it provides images for the the browser width from 992 Pixel to 1199 Pixel
• data-maxwidth= 1120 (it's the size of the image)
• srcset="/file….jpg 1x, /file….jpg 1.5x, /file….jpg 2x" (the 2x image it should have double the resolution, eg. 2240 Pixel)

[Patta]

I can confirm that issue. I use a carousel content element as header. On mobile e.q. iPhone X, the background image is blurred and is only rendered with 374 Pixel. How can this be solved? The "High Resolution Images" configuration is set. thx

[olivermeckel]

You can find the default settings for the responsive images handling here: /bootstrap_package/Configuration/TypoScript/ContentElement/Helper/ContentElement.typoscript

Just adjust the section: lib.contentElement.settings.responsiveimages.variants  You can do this by using an extension to override it or add it in the setup of your main template in the typo3 backend

For my needs this works fine:

lib.contentElement {
    settings {
        responsiveimages {
            variants {
                default {
                    breakpoint = 1200
                    width = 1200
                }
                large {
                    breakpoint = 992
                    width = 1054
                }
                medium {
                    breakpoint = 768
                    width = 915
                }
                small {
                    breakpoint = 576
                    width = 700
                }
                extrasmall {
                    breakpoint = unset
                    width = 515
                }
            }
	}
    }
}

But it depends in your layout

[Patta]

@olivermeckel thanks. in addition to the increase of the image width for each variant, the sizes config for high resolution images must be added to each variant, not only to the default variant like in the v11 release notes.

[gilbertsoft]

See also https://docs.typo3.org/p/bk2k/bootstrap-package/master/en-us/Configuration/ImageRendering/Index.html

[benjaminkott]

Should be resolved, we had an issue with some incorrect calculations.