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 [email protected] 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.

2 Answers 2


Check this Wordpress plugin

Wp Retina 2X

  • I'm hoping to do this without a plugin - but this is the place to start! Thanks :)
    – ArleyM
    May 22, 2013 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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