The picture you provided looks much worse, though. Quite noisy and I can see pixels.
I suppose the real problem is that it's too difficult to provide appropriately-sized images for different user agents.
I suppose the real problem is that it's too difficult to provide appropriately-sized images for different user agents.
I use a <picture> element with multiple versions as a <source>. This allows the browser to choose which size and format is best automatically. Many site generators will set these up automatically, with the right plugin. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pi...
Compare: https://imgur.com/a/axLxDBT
Photoshop's "fair" JPEG settings result in something that's functionally indistinguishable and only 347KB.
I was just thinking it would be nice to have a bot/api/webapp that I could give my URL to and it would give me a set of links to at least a bit optimized images. Maybe something built into all IDEs, or is this a platform responsibility.
For example, the OP images were much larger in pixel size than necessary. When I look at them in their full size, it is also a noisy image. Certainly a 1/2 resize could be reasonable while not losing meaningful pixels. I know this is a game of trade-offs, but it would be nice to have a standard that had very low friction. I guess TinyPNG almost does this.