I had the same problem on my laptop which, like many phones, has a high density display. When a website hasn't explicitly provided support for high DPI displays, the browser is forced to scale up the source image (typically by 200%). To see the expected effect, you just need to lower the browser zoom level a couple of times to get the image back down to its native size. You'll know you've got it right when the A block suddenly appears lighter and matches the C block rather than B block (which will now look too dark).
I zoomed the image in and out a bunch -- no change. When I zoomed in enough, I could see the checkerboarding in A, but the overall color stayed the same as B.
This technique may not work if you've got a weird DPI that's causing scaling to something like 150%. In that case you'd need to set your browser's zoom level to 66.666% which is probably not one of the levels it supports. My display scales by 200% so I just needed to zoom out to 50% which has worked on every browser I tried.
Another option is to save the image from the webpage to disk and then open that image in a basic image editor (making sure the editor is not zoomed in at all). I'm not sure how feasible this is if you're on a phone though.
What would have been ideal is if the author of the article had included srcset alternatives for these images to cater for some of the more common high DPI devices. Would then have just work automatically for most people and caused a lot less confusion.
