169 posts
  • United Kingdom
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
mikedidthis says

Sup! Just wondering how you guys are handling logos for Retina displays?

At the moment I am creating a fixed sized logo ‘area’ that is 60px x 160px and then providing two PSD with the theme. One at 60px x 160px (Standard) the other at 120px x 320px (Retina), and using the background-size property to support retina.

I didn’t really want to set a limit on logo sizes, but it seems to support Retina, I have to.

3058 posts
  • Community Superstar
  • Has been a member for 6-7 years
  • Won a Competition
  • Sold between 50 000 and 100 000 dollars
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
  • Exclusive Author
+1 more
wickedpixel says

Is there any site that compares the retina images and non retina ones? Something like screen photos. I don’t have any big retina display to test it myself, to see why it needs the trouble…

169 posts
  • United Kingdom
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
mikedidthis says

Its manly logos really. Though my image replacement scripts does server Retina images :)

Example: http://mikedidthis-focus.tumblr.com/ (None-Retina // Soon to be updated) Example: http://mikedidthis-simon.tumblr.com/ (Retina)

If you view both on iPhone 4, iPad 3, you can see the difference in the logos.

3249 posts Nice Guy
  • Forum Superstar
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
+6 more
RubenBristian says

Is there any site that compares the retina images and non retina ones? Something like screen photos. I don’t have any big retina display to test it myself, to see why it needs the trouble…

It needs the trouble because all images(not only logos) look just a little bit blurred on retina displays. Of course this depends .. i’m not troubling myself with this just yet anyway :D

To see the difference simply take your compressed jpg logo, double the size, save it, then open it again and change it’s size back to the original one. That’s how (not that bad though) all images look on the third iPad.

3058 posts
  • Community Superstar
  • Has been a member for 6-7 years
  • Won a Competition
  • Sold between 50 000 and 100 000 dollars
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
  • Exclusive Author
+1 more
wickedpixel says

Hm, if it’s only logos… I think can be used only a single image(no css bg), the big version, scaled to fit the logo container… I think that will look good on both devices and there is no need for fancy css queries…



  • I just saw those sites with a small retina screen and there is a difference.
169 posts
  • United Kingdom
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
mikedidthis says

I had the same idea, but then, the issue is serving a logo twice to the size to know Retina users.

Damn Apple with its shiny shiny things! Thanks for the comments btw folks, interesting discussion!

97 posts Live Long and Prosper
  • Bought between 50 and 99 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 100 and 199 users
  • Sold between 100 000 and 250 000 dollars
DryThemes says

@wickedpixel – not just the logo. All onsite images looks blurry. And its not just Apple. For example Nokia N900 (800×480; 3.5 in; 266ppi) or newer samsung phones, htc, motorola, etc… :(

But you can create one large 2x resolution image and then scale down by 50% in browser via CSS for all pixel density displays. You can play as well with device recognition so you can avoid bandwidth issues.

I didn’t try this yet, but I’ll certainly will. If you guys have any tips, please post here :)

3249 posts Nice Guy
  • Forum Superstar
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
+6 more
RubenBristian says

I didn’t try this yet, but I’ll certainly will. If you guys have any tips, please post here :)

Javascript .. detect a different ppi and if that’s the case, change the images. If they are embedded, a _x2 suffix would suffice, or if they are inside css, you might want to change the classes which contain them(background images).

I haven’t tried this yet, but it’s how some do it..

1657 posts
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Sold between 50 000 and 100 000 dollars
  • Has been a member for 4-5 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Europe
+2 more
flashedge says

What’s wrong in using vectors? There’s SVG around.

2001 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Microlancer Beta Tester
+3 more
revaxarts says

My upcoming WP pluign supports Retina displays. I mainly had to iclude 2 sizes of all images and a little bit of CSS . The menu icon was a little bit tricky though.

To target Retina displays with CSS I use
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 32),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
             //your CSS here
}
Detecting Retina with JS:
var isRetina = window.devicePixelRatio > 1;
by
by
by
by
by
by