Calculate srcset sizes from container size

Bricks Version: 1.3.2
Browser: Safari 14.1.1
OS: macOS
URL: nah

EDIT: Changed from bug to feature request. Request: Bricks currently uses WP’s default 100vw srcset sizes for all images (assumes all images are displayed at 100vw or max out at the asset resolution chosen in the editor). WP does this, because it has no way of knowing the size of the image in the frontend since it is defined by the theme. Bricks however knows exactly at what size the image is displayed at each breakpoint. This can be calculated either by a fixed px width set in the image container, or by calculating the container’s width and subtracting all the margins and paddings of its parent containers. The sizes attribute of Bricks therefore should use correctly calculated values for better loading speeds and sharper images. Original post:

When adding an image the image size and its srcset size is set to the resolution of the source file, not to the actual width of the image (set in the style options of bricks). This way the frontend thinks the file is displayed at full width (in the screenshot 1200px wide) and therefore loads a large image size (in the screenshot 1200px or even 2400px for @2x hdpi screens), even though it is only displayed at 600px. At least it maxes out at 100vw, still far from perfect.

Solution: Override the width, height and srcset sizes of an image if a value is set in the bricks style options of the image element. Simple :slight_smile:

Interims solution: Use an image resolution that is as close to your target size as possible. You must have a @2x version with double the chosen size available in your theme for hdpi screens to not get a blurry image.

4 Likes

Hi @faebe,

welcome to the forum!

The width and height settings under Style » Layout does not belong to the actual image width and height, rather than to it’s wrapper div. You can set the initial size of the image after adding the image (see screenshot) and this size should be as close as possible to the maximum width and / or height (depends on your layout) of the image wrapper (Style » Layout), so it doesn’t get blurry or pixelated. If the browser window is smaller, the srcset comes into play and chooses the best matching (smaller) image size from the set. If it is wider, your image will stay as it is because your max-width of the container is 600px (maybe the browser will pick a larger image for retinas).

Please correct me, if I misunderstood the problem.

Regards,
timmse

Hey Timmse, yes you are right. The problem is that this does not work for responsive pages. Let’s say you have an image that has 33vw width on desktop (e.g. 3 columns of 3 images), 50vw on tablet (two columns) and 100vw on mobile. If you would do SRCSET right, you would add something like this to the sizes:

sizes="(min-width: 861px) 33vw, (min-width: 481px) 50vw, 100vw"

Now the browser knows that the image is 33vw on screens lager than 861px, 50vw on screens larger than 481px and 100vw on smaller screens. And it can load the correct resolution accordingly. What Bricks is doing is adding this to the sizes:

sizes="(max-width: XXXpx) 100vw, XXXpx"

XXX is the width you chose from the dropdown in Bricks. This is the “cheap ass” version of srcset that is not taking the actual display (container) size into consideration, it just assumes that it is displayed at 100vw on all breakpoints, at max at the width of the asset you choose in the Bricks sizes dropdown. If it is displayed larger than the selected asset size on some breakpoints, you are out of luck, it maxes out at the px of the asset. If it is displayed smaller than 100% of your screen (30% or 50% in a column), you are out of luck, it will still load the next best version that is 100% of your screen or bigger.

Long story short: Bricks really should calculate the actual srcset sizes.

This article is describing it quite good:

4 Likes

Aaah now i got your point!
However, this is more of a feature request than a bug, as this seems to be the “default” WordPress srcset handling. But that doesn’t mean it can’t be done better :slight_smile:

3 Likes

I guess you could say that :wink: I just changed it from a bug to a feature request with a different title.

Perfect! I look forward to the feedback from the developers here as this is apparently a really useful and powerful feature.

+1 for this feature request

I think what should be possible is that you should be able to select the image size you want to load per breakpoint… I think that is the only solid way it will load the size you want for that screen width.

It is already possible for many styling options right… we can set for example a font size for the default screen width, select the large breakpoint and choose a different font size , m width etc.

So why not do that for the images?

1 Like

any update on this? seems evem timmse wanted it when he was not part of the team. and then it got silent

1 Like