how to optimized images to make it sharp on ipad3?

The simplest answer is just to double the dimensions of the image then use CSS to make it the right size.

So if you want to create an HD image at 200 x 200 on a Retina display, create the image at 400 x 400 then use CSS to control the HD image down to 200 x 200: img { width:200px; height:200px; }.

The HD images are still 72 dpi resolution.

The tricky part is then preventing non-HD devices from unnecessarily downloading the larger images.