While resizing the browser, I noticed that my images weren’t resizing as well. I immediately knew the issue, but it made me laugh to think that such a simple, mindless setting that you set once and never revisit can sometimes slip through the cracks—img { width: 100% }.

Typically, to go along with this setting, you’d have a max-width on the image to prevent the it from scaling beyond its original width, but fortunately, Contentful’s image API also lets you reference an asset’s dimensions. Instead of setting the `max-width` to 100% and having my retina-ready image scale beyond its retina size, I set it to `${node.data.target.fields.file.details.image.width / 2}px`, which is a mouthful, but does the job. Now, my images are always true retina, and they scale with the viewport.