It’s only cheating if you go over 100% and start pixel peeping. If I’m looking at a 2000px wide image shrinked by my browser to 700px, pretty much everything is going to seem indistinguishable from lossless. Ideally the images would be already resized for the intended display size.
The fullscreen option helps, thanks!
The people picture is 1598px wide, but it is displayed with width: 799px (and in practice it’s 742.5px wide because of the container). I would expect an image reisized to its intended size to match the css width (I guess retina and high density screens throw this off, but then does that mean that we are serving 2x sized images to everybody to cater to the high density screen users?)
It’s only cheating if you go over 100% and start pixel peeping. If I’m looking at a 2000px wide image shrinked by my browser to 700px, pretty much everything is going to seem indistinguishable from lossless. Ideally the images would be already resized for the intended display size. The fullscreen option helps, thanks!
score 1 · canonical
The images are already rezied to their intended size. The full screen option doesn’t change that.
score 1 · canonical
The people picture is 1598px wide, but it is displayed with
width: 799px(and in practice it’s 742.5px wide because of the container). I would expect an image reisized to its intended size to match the css width (I guess retina and high density screens throw this off, but then does that mean that we are serving 2x sized images to everybody to cater to the high density screen users?)score 1 · canonical
Yes, that’s absolutely the intent, and it’s mentioned in the methodology in the article. I have another post on optimising for high density, and this is the technique I use on my blog.
score 1 · canonical