Image processing module

tips & tricks
#1

Hi everyone.

I have just made a module which creates responsive images. Its actually in its 3rd iteration, but v1 for this repository.

It supports the following:

  • minimal config
  • minimal inline code (unless you want to override configurations)
  • outputs original format image plus webp (can be configured)
  • choose from pixel density (1x,2x) or variable with (e.g. 400px, 800px, 1200px) output
  • choose aspect ratio of output image (so multiple images line up properly)
  • integrates with lazysizes, so you don’t have to set the sizes property (this can be turned off)
  • also generates figures
  • has a shortcode for images/figures
  • has a render hook which can be turned on/off via config or the pages front matter

More features to come soon including

  • lquip blur up placeholder
  • external image support
  • noscript support (required js and css so i’ve left it out for now to keep it simple)

PR’s and feedback welcome

10 Likes
#2

Looks great! Love that you included the option in the partial to selectively disable lazy-loading - which is necessary for above-the-fold images.

I have two suggestions while browsing through the code:

  1. The use of <h4>s in the <figcaption> will break heading rank, which is not good for accessibility
  2. Instead of falling back to the page title for alt descriptions on images, I think a warning should be thrown instead (personally, I’d throw an error and terminate build, but that might be too strict). Accurate image descriptions are important for screenreader users and those with slow connections
3 Likes
#3

Hi there ;D
Wow, thats great module, thanks for share ;D

#4

Great work!