Retina-Scaled Images Still Appear Blurry

I scaled my image double-size for a retina display. The display dimensions are 350x357 and my image is 700 x 714. When I add the image to my page, though, it still looks blurry, even when saved as a high-quality PNG. What's especially weird is if I open the image separately in the browser and scale it to 350x357, it looks more clear in the image preview than embedded on the web page. I have no idea what's going on!

Image viewed directly:

Image viewed in webpage:

Scaling info in web inspector:

There was a bit of inspector fraud happening here. While the inspector told me the "rendered size" was 350x357, in reality it was 349.8 x 356.79 because it was inside a percentage-width container that wasn't quite hitting the 350px mark.

In addition this seems to be a Chrome issue as outlined here.

Poking around on StackOverflow got me to this answer which recommends applying transform: translateZ(0); to image elements to fix the blurriness. Not sure if that causes performance issues or not but I only have a couple images per page so I'll risk it.