> 1MB just isn't good enough for a reasonable image.
That didn't make sense to me: the small (~700px wide) images I have in the library are all 50±20kB.
I went to Pexels, which hosts free stock photos, and I took the first one off their front page that had enough colors and didn't show faces: https://www.pexels.com/photo/person-pouring-coffee-on-white-...
Its maximum size is excessive unless you aim to support 4K: 5472×3648. It weighs 4.9MB. A lot!
I then went to Squoosh.app, which allows one to optimize images in various ways. The default option – MozJPEG at 75% quality – reduced image size by more than a half, down to 2.24MB, with no apparent loss of quality even at the high zoom. Illustration: https://i.imgur.com/2bkHrot.jpg
Do you really need to serve a 4K+ image, though? I reduced the image to 1920×1280, using the same app, with the same compression settings. 184kB! Illustration: https://i.imgur.com/52MctSN.jpg
At 33% zoom (which is necessary for a reasonable comparison, since Squoosh stretches the smaller image for comparison), the compressed image looks very good. It lacks the noise the original had, and looks more glossy. There are also advanced settings that one could tinker with, perhaps to a better compression with equal losses.
Is it a big deal? Perhaps – especially when you look to present the image as-is, with minimal losses between conversion from RAW to, say, PNG. For most websites, though? I reckon it's not going to be a problem: it's the sense of the image that matters, not the details.
And if you regularly serve 1MB+ images, maybe there's some sort of an indicator or tag that you could apply that will tell the browser: "Hey, look, I know you want to save bandwidth, but it's kinda my schtick to show really good images, so let me through, yeah?"
That didn't make sense to me: the small (~700px wide) images I have in the library are all 50±20kB.
I went to Pexels, which hosts free stock photos, and I took the first one off their front page that had enough colors and didn't show faces: https://www.pexels.com/photo/person-pouring-coffee-on-white-...
Its maximum size is excessive unless you aim to support 4K: 5472×3648. It weighs 4.9MB. A lot!
I then went to Squoosh.app, which allows one to optimize images in various ways. The default option – MozJPEG at 75% quality – reduced image size by more than a half, down to 2.24MB, with no apparent loss of quality even at the high zoom. Illustration: https://i.imgur.com/2bkHrot.jpg
Do you really need to serve a 4K+ image, though? I reduced the image to 1920×1280, using the same app, with the same compression settings. 184kB! Illustration: https://i.imgur.com/52MctSN.jpg
At 33% zoom (which is necessary for a reasonable comparison, since Squoosh stretches the smaller image for comparison), the compressed image looks very good. It lacks the noise the original had, and looks more glossy. There are also advanced settings that one could tinker with, perhaps to a better compression with equal losses.
Is it a big deal? Perhaps – especially when you look to present the image as-is, with minimal losses between conversion from RAW to, say, PNG. For most websites, though? I reckon it's not going to be a problem: it's the sense of the image that matters, not the details.
And if you regularly serve 1MB+ images, maybe there's some sort of an indicator or tag that you could apply that will tell the browser: "Hey, look, I know you want to save bandwidth, but it's kinda my schtick to show really good images, so let me through, yeah?"