Ah, 2018! A dizzying time when images on a web page are blurry or altogether missing unless one has enabled JavaScript!
(the article is interesting, but why-oh-why does the Beeb site show blurry photographs instead of sharp ones? We've had an imagine tag for decades now!)
Web dev here: They're lazy-loading the images to give a perceived faster load time. You take a super low quality (often blurry so it doesn't just look low quality) placeholder and swap it in for a proper image as needed.
This is overall a slower loadtime and a bit wasteful (sending useless junk over the wire) but appears to load faster for end users since the time-to-first-render is quicker. Of course, lazy-loading the images requires Javascript to be enabled to detect when the page has finished loading and it is now "safe" to load the higher quality images.
But won't work on any device at any screen size ("responsive design"). There's a way to do server-side rendering for image assets in this regard but the front-end devs in charge of this kind of thing rarely know how to set something like that up.
It is faster and more efficient on a long image-heavy page like this, because they're not loading the larger images until the user scrolls to them (try reloading the page and scrolling quickly to see). So it's not entirely pointless.
(the article is interesting, but why-oh-why does the Beeb site show blurry photographs instead of sharp ones? We've had an imagine tag for decades now!)