Lazy-loading for images in blog content
Is it possible for us to have loading="lazy" for all images generated via Markdown and reStructuredText content in blog posts?
If so that would be a nice little performance boost! If not, no worries.
I’d like to work on this—will send a PR.
Hey @AnmolChauhan1234, great! Looking forward to your PR. Let me know if you have any doubts.
PR from @AnmolChauhan1234 seems heavy-handed to me (re-parsing and rewriting all HTML). I would prefer an attempt based on customizing our existing python-markdown configuration.
For REST images, the tag body for images is generated in docutils.writers.html4css1.visit_image(), and there is no buitl-in way to add custom attributes to the ones that are emitted.
One solution is to overload the html4css1.HTMLTranslator (writer) and modify the empty_tag() method to add the loading=lazy attribute when tag is 'img'.
For markdown images, we need to add a Treeprocessor to the markdown instance, which will add the attributes.
@greg-ware ty! are you up for attempting that?
@thibaudcolas , yes, will submit PR soon, manually tested for both ReST and markdown, need to find how to add tests.
Hi @thibaudcolas , @SaptakS
I’ve read issue #2154 and the closed PR #2173. I understand the concern about avoiding heavy HTML rewriting, and I agree that the right approach is to hook into the Markdown and reStructuredText rendering pipelines. I’d like to try implementing this using a Markdown treeprocessor and a custom docutils HTMLTranslator, as suggested by @greg-ware.
Could you please point me to any documentation or existing code in this repo that customizes these renderers? That would really help me get started correctly. Thanks!
I think this issue is already being worked on in this PR: https://github.com/django/djangoproject.com/pull/2304