Should i design for retina

Or every embedded image can have larger dimensions than needed, and then you explicitly set the width of that image. The cons, depending on how you compress the assets, your users may have to download larger files than they actually need. Nothing is more telling whether a website has invested in support for high-res screens than your favicon.

High-res screens, in particular the MacBook Pro with Retina display, are fantastic and I highly recommend Designers invest in them. More and more devices have high-res and if you want your product or website to look professional to users of these devices, you should put some thought into how they look.

Since Apple launched this new generation of high-resolution screens, it has invaded the world making previous technology look like a memory from the past.

Despite the fantastic success of this new technology, you might be surprised at how many websites and e-commerce sites are not yet optimized for Retina Display. Since the vast majority of your users will visit your website through one of these high-resolution screens, it would be a major mistake to not optimize your site or e-commerce for this technology.

In , Apple announced the release of a new generation of screens to improve the visual experience of their users. They named this new technology Retina Display. This value may change according to the size of the screens, but such a density is considerably higher than other monitors. Such a density of pixels makes them almost invisible to the human eye, taking high-resolution displays to a whole new level. If you have ever used a Retina Display for a time and then you have had to back to a standard screen, you will quickly realize just how big the difference is.

The introduction of this new display has offered a significant advantage for online business owners. You can now present your brand or products to your audience at an unprecedented level of quality and resolution, and this has had a tremendous impact on how users interact with the online world.

Why make their life harder? But Retina-land looks like a one-way street. After all the bad news, there is good news. While working on exporting icons for Android from Illustrator , I discovered the world of density-independent pixels DP.

A density-independent pixel is the same as 1 physical pixel on a DPI screen. Running through the equation above, for the width we get DP, and for the height, DP. This becomes our baseline resolution. And we also need to know the scale factor for image assets. Then, the scale factor comes out as 3x. So, now you know your DP dimensions and scale factor for assets. So, the answer to this mystery is to design 1x or in DP.

The point here is that you are reducing to the baseline DP units and that you know the scale for exporting images. And a 1x PNG would look horrible on a Retina device.

What I needed was a way to work at 1x and with DP units, but export to 2x or 3x to preview on a device. My clients would accept nothing less. The solution to my problem was a Photoshop script that exports any canvas to a 2x or 3x PNG for previewing on a device. Thus, one can keep working 1x and in DP and get all of the performance benefits and still get good-quality screens.

Have your cake and eat it too, if you will. The scripts are very easy to modify. If you want to rename the folder or file name, you would just change the variables shown below:.

Please be aware this will vary according to your Photoshop version and operating system. Restart Photoshop, and the scripts will be ready to go. Keep in mind a few things if you go for this approach. There you have it! In the not so distant future retina will likely be the standard and the number of pixels per inch will continue to increase, meaning that these optimization tricks will come in handy!

Have you already tried any of these fixes to optimize your images for retina displays? What worked best for you? We'd love to hear about your experience, so give us a shout. Stay up to date with the latest, most important news about China's Digital Landscape. Design 21 3. Lost Pixels in High-Definition This obsession with ultra sharp displays poses a challenge to web designers.

Optimizing Images in Web Design for Retina display Designing for Retina devices to ensure that your designs look outstanding can be done in a couple of ways depending on your website's needs: 1.

Use CSS3 to replace graphics With CSS3 you can create features such as animations, drop shadows, backgrounds and gradients without the need for images and simply by adding a small piece of code. Use Media Queries We can also have two versions of the image, where one is twice the size of the other, and then simply use media queries to indicate which image should the device display.

Share this article on i.