Things like widgets and buttons with hover and active states unfortunately do not work using this method.

Great article! Works well for most images but not if the images are being called via CSS (like ‘background-image’) which seems to be the case for buttons and other widgets in Muse. The site you link to in the article—retinajs.com—does have a solution by using LESS, a concept I am not familiar with at all. Could you maybe update the article to include how to incorporate that into our Muse projects so all images are Retinafied?

Thanks, and keep up the good work!

Milton,

Using LESS would really require you to handcode your website. All LESS really does from what I’ve seen is allow you to write less code by calling “shortcuts or rules” for your CSS code. Let me give you an example:

My Muse site exports my CSS like this:

#button
{
width: 20px;
height: 20px;
background: (“../images/button.png”);
}

You would have to go in to the code manually and change this to:

#button
{
.at2x(“../images/button.png”, 20px, 20px);
}

Now if you link to the LESS file provided on Retina.js, it should work.
The problem is that then next time you publish your site, you lose your changes because Muse will write over the file.

Hope that makes sense.

Best,
Jeremy

Thanks for the retina tutorial I have used it, much appreciated. I just wanted to point out something odd I have found as regards retina graphics in Muse. I have added 2 logos to my site which are both pngs with transparency. I placed a large size into Muse then scaled it down. When I published it displayed at the smaller size but retained the large file and displayed at retina quality.

However, when I tried it on other images it did not work. I thought that maybe it was because it was a png but that’s not it either. Anyway, check out my test site’s contact page. Note the 2 logos on the right and how there is no ‘@2x’ version but still retina versus the image at the bottom which is not retina. The top image on the left does have a ‘@2x’ version.

Odd???

http://gareth02.businesscatalyst.com/contact.html

Thanks,
Gareth.

Hi you all, would it not be much easier to design a layout based on Retina that automatically scales back to lesser screens?

@Gareth

Hi Gareth,

I got the exact same problem that you described… Did you work out a solution yet?

Best, Roman

What I did with the buttons is that I opened the normal button and resized to @2x and save it again. Its working on my image buttons. they are a bit higher in size but from 9KB to 14KB doesn’t influence loading the none retina users.

I do have some problems with retina.less I’m not a coder and I’m having a hard time understanding it… oh well…

so the question is …. lets say i wanna make a 100×100 image
i am on a retina mac designing in PS…

or

design it at 100×100 with 144dpi and save for retina and saveforweb at 100×100

Hi,
anyone who knows what happens with android high screen resolution (equal or higher than retina in iOS)?
How to give the same instructions when device is android (in my case, 4.2 Jelly Bean)
Thanks

Thank you very much for sharing this information. You really have broadened my understanding of designing for retina displays. Great tutorial.

Hi all,

Whats the answer to
Michael’s question? Is it best to create an icon twice the size and scale down in Muse or create it at actual size but increase the dpi from 72 to 144 in photoshop?

Thanks

Concerning Michael’s question about the DPI setting. Setting a dpi is useless in terms of web design, the only thing that matters are the pixel dimensions. So the retina version of a 100 by 100 pixel image needs to be a 200 by 200 pixel image(make sure to design it in Photoshop on a 200 by 200 canvas then do a save for web for the non retina version). When you use SaveForWeb in Photoshop you are outputting 72 DPI images anyway. DPI in relation to pixel dimensions defines at what size it will print on paper.
One of the posts states that you can use a retina image and then scale it down 50% so they would look good on retina devices. This is true but be careful with this trick when using large images because you are serving the retina images to non retina users as well this way. This might slow down performance time and performance is king in the future of web design.

I have been using this method on a new site. I have noticed that items in a slideshow only get the high res version on the first image. Therefore, I added some CSS to make the rest of them work. The issue I am having now is that for some reason the images do not always show. Sometimes they are blank but when I refresh the browser they show up, odd!

I thought it was a caching issue but I have tried it in multiple browsers so it is not that. I also cleared the cache.

Here is the site:

http://fratsorotest.businesscatalyst.com/index.html#home

Would appreciate any help.

Hi, i was testing this, and as Gareth says, it don’t work con components… any idea how to fix it?
I am working on a site, you can watch it (currently working on) at http://laksman.com.ar/TERCEROJO_WEB/

Notice that inside Catalogo, all the images are in low-res and not retina display quality.

But the on the rest of the site works great.

Do you have to put that script in the head of all pages or can I just put it into Master?