Adding Retina Graphics

• 

  pixelcounter · Member · Feb 18, 2012 at 10:00 am

  • Copy link
  • Add topic to favorites

  Hi,

  I was wondering if it’s possible to add alternative images (2x) for high-dpi displays, such as that of the iPhone 4 or upcoming iPad 3?

  I’ve been googling around and people are using solutions like Java Script etc. for that, but which are beyond my skills.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  hnsaifi · Member · Feb 18, 2012 at 10:08 am

  • Copy link

  Sorry I don’t know more bout it but Javascript doesn’t work here on WordPress.com.

• 

  designsimply · Member · Feb 18, 2012 at 9:04 pm

  • Copy link

  I see that there’s a way to add retina graphics using CSS3 media queries, but that’s not available yet for the WordPress.com Custom Design upgrade. I’ve noted your question though and added it to our user suggestion list.

• 

  pixelcounter · Member · Feb 20, 2012 at 10:42 am

  • Copy link

  Okay, thanks designsimply. I’m pretty sure the high-dpi graphics are becoming more relevant day by day.

• 

  designsimply · Member · Feb 20, 2012 at 7:52 pm

  • Copy link

  I agree! Love that you posted about it. We’ve put it on our things-to-update list. Would love to also see more people reply here or send us a note if there is more interest.

• 

  designsimply · Member · Apr 2, 2012 at 7:29 pm

  • Copy link

  @pixelcounter, adding high-dpi graphics is now supported at WordPress.com. :)

  Try copying the example at http://aralbalkan.com/demos/high-dpi-images/ if you’d like to test it out.

• 

  pixelcounter · Member · Apr 3, 2012 at 5:05 am

  • Copy link

  Thanks for the info!

  Is there an easy way now to replace, for instance, the header with a high-resoution image?

• 

  designsimply · Member · Apr 3, 2012 at 3:42 pm

  • Copy link

  Certainly. :)

  Here is an example showing how to do it for the iPhone 4 based on pixel ratio:

  @media
  only screen and (-webkit-min-device-pixel-ratio : 2),
  only screen and (min-device-pixel-ratio : 2) {
      /* CSS for your header image goes here. */
  }