WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm a huge fan of the way retina.js works for high pixel density displays. Essentially, when it's loading image assets (via <img> or css image) it will check if there's a @2x suffix version of the image (eg. if there's a logo.jpg it will automatically show the logo@2x.jpg in its place if it exists.

The WordPress function the_post_thumbnail lets me define various image sizes, but I want to know if there's a way to have it also create versions of the images that are twice the size with the @2x suffix as well!

It's easy to do this for theme files, but would be pretty awesome to allow this for content images as well.

share|improve this question
up vote 1 down vote accepted

Check this Wordpress plugin

Wp Retina 2X

share|improve this answer
I'm hoping to do this without a plugin - but this is the place to start! Thanks :) – ArleyM May 22 '13 at 22:35

Ok here is my advice.

Just create the copies of images with double size using wordpress native media settings. And then add the following code in your templates.

<?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?>

<img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/>

Here my thumbnail (normal) size is 300x300px and medium thumbnail (retina) has 600x600px size. And also don't forget to load retina.js otherwise data-at2x= will not work. Good luck!

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.