search

simonw / datasette-render-images

Datasette plugin that renders binary blob images using data-uris
https://datasette-render-images-demo.datasette.io/favicons/favicons
23 stars 4 forks source link

Use loading=lazy on images #9

Open simonw opened 2 years ago

simonw commented 2 years ago

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

This could help avoid loading a hundred images on a page with a table that doesn't ever get scrolled.

simonw commented 2 years ago

Had this idea while looking at https://til.simonwillison.net/tils/til and thinking about maybe adding this plugin to that.

simonw commented 2 years ago

This idea doesn't actually make sense given the way this plugin works at the moment - it embeds base64 images directly into the page, which results in a BIG increase in the size of the output HTML and no opportunities for lazy loading: https://github.com/simonw/datasette-render-images/blob/e91ee84398c5f684c6e89bcadbfa13827cf53aad/datasette_render_images.py#L26-L30

simonw commented 2 years ago

In order to add lazy loading I'd need to change how the images are served, switching to having them link to a new endpoint (or output renderer) which returns the image read from the database table.

I'd need to think carefully about the security of doing this, since serving content from potentially untrusted sources could result in XSS or similar if not done with care.