As of Chrome 76, native lazy loading has come to the web! Setting images in blog posts to loading="lazy" (or user-configurable) could provide massive performance benefits, especially on blog posts with lots of images. The engineering team over at the BBC did a write-up about this and showed page lo…

Hi @cherryjimbo , this is a good suggestion but at the minute the browser support isn’t quite there. You’re welcome to propose this on the GitHub repo and track it from there: GitHub - TryGhost/Ghost: Turn your audience into a business. Publishing, memberships, subscriptions and newsletters. Edit: M…

Thanks David. Done: Add native image lazy loading support · Issue #11052 · TryGhost/Ghost · GitHub

Each of my articles has at least 30 images so this feature would be very useful.

Has this been implemented? This would be great, our articles are not particularly heavy but it would be an easy optimization to make.

Not yet. I ended up implementing this myself using Cloudflare Workers HTMLRewriter though. I don’t know if that’s an option for you, but I wrote about this on my blog at Using Cloudflare Workers HTMLRewriter to extend Ghost(Pro) .

@cherryjimbo Ah very cool, thanks for sharing. I’ve been adding small scripts to perform different manipulations (ex: making all article links open in a new tab, injecting author’s twitter handles into body of article at pre-specific locations etc) and I’m wondering what the difference in performanc…

HTMLRewriter with Cloudflare Workers is actually streamed, so the impact is near-zero, which is awesome. Rewriting the img element after the DOM has loaded with client-side JS likely won’t work though. If the image element was setting data-src instead of src though, you could do some rewriting with…

That’s what I figured, going in to edit the source directly doesn’t seem worth it at the moment. Rewriting the stream is a great solution. I don’t know if I want to add another service just for this but if we end up using cloudflare services anyway, I’ll probably implement this. Hopefully Ghost is a…

Some updates here regarding the native lazy-loading browser spec: The specification for native lazy-loading has been merged into the HTML standard as of last month: https://github.com/whatwg/html/pull/3752#issuecomment-585202516 Firefox has also begun supporting it in Firefox 75 , which will be rol…

Add native image lazy loading support

Ideas

John June 10, 2020, 3:24pm 11

This is now planned to be implemented. There are still some weird browser bugs and inconsistencies we’re waiting to be smoothed out - once it has settled and is being used more widely then we’ll take another look.

Lazy loading in-content images

Topic		Replies	Views
Lazy loading in-content images Developer help	1	1827	July 2, 2020
Can't figure out LazyLoad in Casper Self-hosting	5	769	July 29, 2022
Disable Lazy Loading for specific blog content Developer help	1	635	October 19, 2022
Defer offscreen images Bugs	3	66	September 10, 2024
How to convert images to webp in the Ghost core? Developer help	4	1314	August 16, 2023

Add native image lazy loading support

Related topics