I have a responsive website and I want to use retina quality images. My understand of this is the image basically needs to be twice the size. So I have just added a image to my page as below...
<img class="alignnone size-full wp-image-4025" alt="Pre-Pay Technical Support" src="http://www.mydomain.com/wp-content/uploads/2012/11/laptop_hand.jpg"/>
You will notice I have not set the width or height of the image because I want it to scale to the full width of the container. As I have a responsive website this will be different depending upon the device.
The original image size is 700 width by 360 height is pixel at 72dpi.
When this image is viewed on a desktop computer the actual size will be 207 by 106px.
When viewed on a iPhone with a retina display the image looks good. However when I view on a normal desktop top computer the image quality is poor. i.e. Jagged edges. I know if I resized the original image to the desktop size of 207 by 106px the image will look fine, however this will then cause a loss of quality on retina devices.
What is the best way to do this? Also is there a Wordpress plugin that will help with the job?