Resizing WordPress images within posts for retina display

I recently had a customer ask for a visual example of how I resize images within my posts so they display crisp and clear on retina screens.  I thought this might be helpful for others as well.  I will share it here so you can reference it when you need to.

When writing a post, you will add your images and text as you normally do.

This is how my post looks before I adjust the image for retina quality:

Once you have your image added to the visual editor, click the text tab:

In the text view you will see all the html that is created behind the scenes as you compose your content on the visual side.  Look for the section that links to your image:

You will reduce the width by 1/2 it’s original size and remove the height.

You can reduce it further if you would like.  I usually reduce it by 1/2 and preview my post to see if it looks right, if I think it needs to be smaller I will reduce it more.

Before:

<img class=”size-full wp-image-2615″ src=”http://www.stephaniehellwig.com/wp-content/uploads/2016/05/mobilenpc.png” alt=”Mobile Responsive” width=”1600″ height=”1033″ />

After:

<img class=”size-full wp-image-2615″ src=”http://www.stephaniehellwig.com/wp-content/uploads/2016/05/mobilenpc.png” alt=”Mobile Responsive” width=”800″ />

For this particular image I reduced the size to 500 so it will fit into my post the way I wanted.

Now my post will look like this:

Do you see now we have a smaller image in our post?  The actual image is uploaded at twice the size you see, so it will still look crisp and clear on a retina display.

There you go!

How to Resize images within WordPress posts for retina display.

If you found this post helpful be sure to subscribe so you can download my free WordPress Tools & Resources Guide and receive new tutorials right in your email inbox!