JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Retina vs Bog-standard images</h1>
<hr />
<h3>For viewing on a retina device</h3>
<figure>
    <img src="http://work.theprojectsomething.com/image@2.jpg" width="600" height="346" />
    <figcaption>
        <strong>Retina image</strong>
        <small>(1200x692, enlarged using nearest neighbour, optimised JPG @20%, ~135kb)</small>
    </figcaption>
</figure>

<figure>
    <img src="http://work.theprojectsomething.com/image.jpg" width="600" height="346" />
    <figcaption>
        <strong>Bog-standard image</strong>
        <small>(600x346, optimised JPG @60%, ~98kb)</small>
    </figcaption>
</figure>

CSS

figure {
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
}