I would like to use <source> tag to show one image if display is retina display and other image in all the other cases. I see all of the examples online showing media queries based on display size rather than based on pixel ratio. How would I go about doing this?

If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions

Though a simpler approach I have used is to show an image of double the display resolution to everyone, but increase the compression ratio to slim the file-size. The extra resolution (even at reduced size on normal screens) makes up for the quality loss from compression.

Yes, that's the method I use for things like photographs and the likes. I use SVG for more graphical type images such as logos and icons, taking over the role I previously gave to PNG images. SVG is super light-weight and always displays crisp at any size. A stick figure may be a candidate for SVG, though I have not seen the image.

Getting back to <picture> Vs srcset, the general consensus seems to be: to use srcset if you are swapping one image for a different size version of the very same image.Then use <picture> more for art-direction where the alternate image has been re-arranged in some way. For example one time I have used it is on an advertising banner, where I swapped the banner for a different version, with a different aspect, where the design was more suitable for a smaller screen.

When I load the page on my iPhone I can see that it loads 64x64 image (it is very crisp comparing to other images located right next to it which are all 32x32) but what i am confused is why is 64x64 is same size as the image right next to it which is 32x32?

I gave you the correct code in my post but you still are not using it. Get rid of the picture element as that was not in the code I posted and is a whole different kettle of fish.

You just need this

<img src="my32x32image.png" srcset="my64x64image.png 2x">

Although it would be better if you also included the width and height attributes so the browser can allocate the space (e.g. width="32" height="32").

Stribor45:

but what i am confused is why is 64x64 is same size as the image right next to it which is 32x32?

The 2x at the end of the srcset tells the browsers that this is a retina image and displays it at half its native size because it maps it pixel to pixel on the double density. With a normal image it stretches a pixel to cover two pixels and that's why normal images are blurry on retina.

I imagine I cant test this piece of code unless I use actually use device with retina display

You can use the device emulation modes in Chrome's dev tools. Though that won't display double density on a normal monitor, so you probably won't see any difference whether the code is working or not.One workaround for this is to temporarily swap the images for versions with a distinct visible difference other than their resolution.