Provides a plugin to optimise images (resize, placeholder)

• I’ve read the [contribution guidelines][1] and agree with them

I want to suggest an idea and checked that …

• … to my best knowledge, my idea wouldn’t break something for other users
• … the documentation does not mention anything about my idea
• … there are no open or closed issues that are related to my idea

Description

Loading images is a pain.

Too big images could slow the webpage loading by a bunch.
It would be great if mkdocs could optimize the rendering of the image.

Hopefully, the tech has evolved in the last 5 years, with support for:

• <figure> HTML component
• SVG / blurhash placeholder

For example, another web static content generator (gatsby) provides plugins to:

• resize image
• generate a placeholder image (eg using blur hash: https://blurha.sh/)
• wrap the low res and high res image in a <figure> HTML component

Checks for instance: https://using-gatsby-image.gatsbyjs.org/

Use Cases

• This would improve loading page
• This would prevent the flickering effect.

Screenshots / Mockups

Loading	Loaded

Notes

As it is doable inside a plugin, I would say it would be a nice addition for the mkdocs-material (insiders?), and at least does require to be implemented in mkdocs itself.

My company (BAM) is sponsoring MKDocs Material.
Also, I may be available to help implement this, with some guidance, if that is easier for you.

[waylan]

As explained, we do not include plugins with MkDocs directly. All plugins should be developed as separate projects from the core. In addition to keeping the maintenance burden down, it also frees the plug-in from MkDocs’ slower development cycle

[tychota]

OK, thanks @squidfunk and @waylan for explanation.

I will try my best to build an image compression/placeholder pipeline plugin. And ask for help if needed.