Jump to content


Photo
- - - - -

Retina (HiDPI) grahics and images in Pagelines

images retina hidpi

  • Please log in to reply
4 replies to this topic

#1 britten_uk

britten_uk

    Member

  • Members

  • 20 posts

Posted 11 October 2012 - 08:36 AM

So I wonder if anyone has thought about how to tackle retina graphics yet? I realise its not common yet but it surely will be soon!

I have an iPad 3 and whilst most of my site (

Please Login or Register to see this Hidden Content

) looks ok on it (images are resized down to the ipad screensize so their res is a bit higher than normal) the same is not true on Macbook Pro retinas and the icons and header logo look dreadful on both!

Does anyone have any experience of the various Wordpress plugins available (do they play nice with Pagelines?) or is there an easier way I am missing?!

Thanks. Mat

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 12988 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 October 2012 - 09:50 AM

Hi,

You will probably want to do is create your images double in size and then use the background-size property for example:

Please Login or Register to see this Hidden Content


You can also use percentage also like below:


Please Login or Register to see this Hidden Content



#3 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 11 October 2012 - 01:27 PM

We use this plugin

Please Login or Register to see this Hidden Content



#4 britten_uk

britten_uk

    Member

  • Members

  • 20 posts

Posted 12 October 2012 - 02:37 PM

Thanks for the input, I couldnt see any difference with your CSS fix Danny so I'm trying the plugin now - will update with my experiences if I get the chance!

Mat

#5 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 October 2012 - 12:58 AM

We'll leave this thread open for you, keep us posted.





Also tagged with one or more of these keywords: images, retina, hidpi