Can breakpoint sources be optimised? Unnecessary manipulations. #213
Replies: 1 comment 1 reply
-
|
Yes, they can be optimised. You can use custom Programmatically speaking from this package perspective, there can be picture containers smaller than the specified viewport min-width. You can have 1920px viewport, but a 140px picture container. As such this is normal, intended behavior that you are seeing manipulations that you deem unnecessary. |
Beta Was this translation helpful? Give feedback.
-
|
I see I see. I thought that it would be an overall improvement to the package, rather than a customisation for my needs. I can't see why anyone would want these sizes that I have deemed unnecessary, but it seems like I'm missing something. I'll keep thinking on it and experiment with the DimensionCalculator when I get a chance. Thanks for the advice. UPDATE: I think I get it now. I ran some experiments and filtered out some additional sizes but I think I'll leave it at the defaults. Closing this. Thanks again |
Beta Was this translation helpful? Give feedback.
-
I have a website where the hero image is a different aspect ratio for every breakpoint. It seemed like a good approach to minimise file sizes for each screen size. Here is the blade directive I am using:
@responsive($image, ['ratio' => '2/3', 'sm:ratio' => '1/1', 'md:ratio' => '4/3', 'lg:ratio' => '5/3', 'xl:ratio' => '2/1', '2xl:ratio' => '3/1'])This produces 76 variants for a single hero image. A few too many I think! I had a look at the
<picture>output and it seems there are a lot of unnecessary manipulations.Take the first
<source>element for example. The media query saysmin-width: 1536px, so this image will only be shown on screens larger than 1535px. However the source contains lots of manipulations for screens small than this (e.g. 354w):The same goes for the second last
<source>element. The media query definesmin-width: 640pxyet it contains 5 manipulations below this threshold. It also contains manipulations on the higher end too, i.e. the next<source>element definesmin-width: 768px, so anything below 640px and above 768px seems unnecessary for this particular<source>. It seems like there are 10+ unnecessary manipulations in this particular source (20 if you include the jpeg fallbacks).Is seems to me like it should be possible remove all these unnecessary manipulations from the picture element? The code might be tough but I think it would reduce the manipulations required from 76 to around 20 or 30 - a vast improvement, especially when using glide caching.
Here is the full picture element code:
Beta Was this translation helpful? Give feedback.
All reactions