How to Display Retina-Ready Images in your WordPress.com Site

Here’s how you can display retina-ready images on your WordPress.com site.

First of all, what are Retina-ready images?
Retina-ready images are basically just high-resolution images for Retina HD display devices such as the iPhone 6.

This technique should work with any WordPress theme and should work for blogs hosted at WordPress.com as well as self-hosted blogs.

1. Create an image and make the width and the height twice the size of what you want to display it at.
(So if you want your image to display at 200 x 300 pixels, create an image 400 x 600 pixels.)

2. Insert the image into your post or page.

3. Go to image properties.

4. Change the displayed image size to half the width and half the height.
(In our example, the displayed image size would be 200 x 300.)

 

You can also modify your CSS to show high-dpi images.
Please read these threads to see how it’s done via CSS:
http://en.forums.wordpress.com/topic/adding-retina-graphics?replies=8#post-856539
http://en.forums.wordpress.com/topic/retina-images-again?replies=32#post-938101

Advertisements
Tagged , , , , , , , , , ,

2 thoughts on “How to Display Retina-Ready Images in your WordPress.com Site

  1. camppants says:

    Thank you for this! I struggle with how to size images on my blog. Do you have any suggestions on what size an image should be and possibly what program to help in editing?

    Like

    • Honey Silvas says:

      Hi!

      What size the images need to be depend on your theme. Since you are using Twenty Eleven, here are the specs for the images which can be found here:
      https://wordpress.com/themes/twentyeleven/

      Quick Specs (all measurements in pixels)
      The maximum content width is 585.
      The maximum sidebar width is 188.
      The header image is 1000 by 288 (width, height).
      The maximum width for images on attachment pages is 848.

      That means the width you should use for your images in your blog should be at least 585 pixels. (You can make the width twice as big if you want to do retina-ready images.) You can also make it bigger than that in case someday you want to change to a theme that displays bigger images.

      What program are you using now?

      The industry-standard for professional photographers is Adobe Photoshop and Adobe Lightroom. Depending on what you want to do, Adobe Photoshop might be overkill but learning Photoshop is a good skill to learn because you can do a lot of other stuff with it (aside from editing photos, you can create brochures, banners, cards, etc.) I do have a new-found appreciation for the simplicity of Lightroom and it’s really designed for editing photos so that is what I typically use. You can download a trial of Lightroom and Photoshop from Adobe.com if you want to try them out.

      Having said that, if you just want to resize pictures, any program that will resize pictures is good. Picasa (made by Google) is free and works fine.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s