A little over a week ago, I wanted to make some updates to my site. Updating the Blazy module to version 2.1.0 highlighted problems with my use of adaptive image styles.
I had left those provided by default in the standard Drupal installation profile. But following the update I noticed a degradation in image display quality because the style loaded in relation to the display dimensions was no longer the right one because it was too small.
So I took the opportunity to rethink everything. Even though this is usually a step done beforehand on projects, doing it on my site was quite simple because... my site is simple, there aren't 36 different display cases.
Implementation
Until now, I was using the " breakpoint " provided by the Responsive Image module in Drupal core. I've decided to use the one provided by the Bootstrap theme I'm using to have access to more finesse in the settings.
New adaptive image styles => New image styles to match the site !
The site's various breakpoints are those of Bootstrap 3 :
- 480px
- 768px
- 992px
- 1200px
For each size range, I therefore looked at the expected behaviour for the 2 formats used on my site : in teasers on content lists and full width in article details. And I've rounded up a bit by also taking padding/margin into account so that if the site design ever changes a bit, it avoids having to redo the image styles because they'll have been configured to the pixel.
I don't have an imposed image height so I don't have an imposed ratio on my site, which admittedly greatly simplifies the problem.
This gave for each range, an image width for teaser image and full width image respectively :
- 1200px ≤
- 350px
- 850px
- 992 ≤
- 280px rounded to 290px to reuse another style
- 700px
- 768 ≤
- 535px
- 535px
- < 768 (full width)
- 290px for 320px screen
- 290px for 320px screen
- use of the sizes attribute and application of all the formats defined, the browser will make the choice.
Plus for each style, creation of a double width style for 2x pixel density displays.
Which complicated the task, it was mainly a bug in the Blazy module that appeared in the update, previously the module did nothing in particular for adaptive image styles.
There have been some optimisations added, but they cause a problem because the srcset attributes are miscalculated and so the browser doesn't choose the right image style. This slowed down the tests considerably.
At least I was able to make my contribution to the module by reporting the bug and providing a " quick fix " in the https://www.drupal.org/project/blazy/issues/3135220 issue.
Conclusion
The teaser images are no longer distorted because they were enlarged if too small and the full-width images are lighter because it is no longer the native " Max 2600x2600 " format that is loaded.