<img src="http://example.com/image.png"
size="
(max-width: 763px) 100vw,
(max-width: 763px) and (-webkit-min-device-pixel-ratio: 2) 200vw,
(min-width: 764px) 476px,
(min-width: 764px) and (-webkit-min-device-pixel-ratio: 2) 952px,
(min-width: 1116px) 229px,
(min-width: 1116px) and (-webkit-min-device-pixel-ratio: 2) 458px,
(min-width: 1280px) 295px,
(min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) 590px,
(min-width: 1436px) 334px,
(min-width: 1436px) and (-webkit-min-device-pixel-ratio: 2) 668px"
srcset="
http://example.com/image476x286.png 476w,
http://example.com/image229x140.png 229w,
http://example.com/image295x163.png 295w,
http://example.com/image334x192.png 334w,
http://example.com/image458x280.png 458w,
http://example.com/image590x326.png 590w,
http://example.com/image668x384.png 668w,
http://example.com/image952x572.png 952w">
When I tried to view the image in my browser, which is 1280px width with retina display, I expect the browser will render 590w image. But it is actually rendering 952w, may I know what I have missed or did I write something wrongly?
I have tested on a browser that haven't been to the site yet to make sure the image isn't loaded by cache.