djangoproject.com icon indicating copy to clipboard operation
djangoproject.com copied to clipboard

Lazy-loading for images in blog content

Open thibaudcolas opened this issue 4 months ago • 6 comments

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.

thibaudcolas avatar Aug 08 '25 08:08 thibaudcolas

I’d like to work on this—will send a PR.

AnmolChauhan1234 avatar Aug 14 '25 08:08 AnmolChauhan1234

Hey @AnmolChauhan1234, great! Looking forward to your PR. Let me know if you have any doubts.

SaptakS avatar Aug 14 '25 08:08 SaptakS

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.

thibaudcolas avatar Sep 22 '25 10:09 thibaudcolas

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 avatar Oct 30 '25 13:10 greg-ware

@greg-ware ty! are you up for attempting that?

thibaudcolas avatar Oct 30 '25 13:10 thibaudcolas

@thibaudcolas , yes, will submit PR soon, manually tested for both ReST and markdown, need to find how to add tests.

greg-ware avatar Oct 30 '25 15:10 greg-ware

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!

ahmedasar00 avatar Dec 19 '25 02:12 ahmedasar00

I think this issue is already being worked on in this PR: https://github.com/django/djangoproject.com/pull/2304

sarahboyce avatar Dec 19 '25 13:12 sarahboyce