Is this a good way to add images to a website and make them 'Retina' Ready'?

I was recommended a practice for adding images to an HTML document and making them Retina ready. Since this practice includes more code, and more data transfer, I would like to confirm that this is a good one.

1. Wrap the image inside a div wraper.
2. Control the size of the image via the div wrapper (the image itself will be set to 100% width to take the whole area of the wraper).
3. Add an image which is twice the size of the maximum size the image will appear on the screen so it will be retina ready.
4. Compress the image to about 70%.

if we want an image have a width of 300px and be retina ready, it will look like this:

html

<div class="image-w">
    <img source="./img.jpg">
</div>

css

.image-w {
    width:300px; 
}
img {
    width:100%; 
}

Image

Width resolution: 600px; compression: about 70%. 

Additional questions: As of today - Is it necessary to make websites retina ready? Are there other best practices your recommend?

Note I'm not sure if 'Retina' is the right term. The question applies for very high definition screens.