1

Are @2x images simply larger in terms of height and width or do they actually have a higher PPI (pixel density)? If they are truly higher PPI, in terms of workflow of creating responsive images (and particulary retina) I've been told by trainers that it is important to link to or embed a higher PPI quality photo as a smart object -or- true vector (use vector shapes for icons, etc.) within your Photoshop document so that when you are ready to extract the images @2x, Photoshop will be able to generate (i.e. upsize to 2x) a crisp, high quality photo file. Is this aim correct or am I over-complicating retina images? I'm creating a responsive website design for desktop, tablet, and mobile, trying to figure out workflow. thx

1
  • I think you're over-complicating it. If you need a 50px x 50px image, and want to support retina, design at 100px x 100px so you can output both a 100 and 50 square image.
    – DA01
    Jan 29 '15 at 21:09
3

They are just twice the size (width and height).

You never want to "up size". Ideally you work at the 2x (or 3x) size than down size to meet the non-retina image sizes.

1

They got it right about what is a retina image but I also want to add some resources you can use for your workflow. There are certainly different ways of achieving the same effect and I suggest you research more about this topic.

Saving with Photoshop

Retinize It, Smashing Article Photoshop action for saving both the image and the retina image.

Javascript

retina.js will replace all of your images with the retina version image.

Retina image with CSS media queries

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
#your-id {
    background-image: url(images/myimage@2x.png);
    background-size: 164px 148px; //original size image
}
}

Saving as a vector file

If you're using Illustrator to create graphics. You can export as svg and use the code on the web. You can then size it at any size you want.

If you are looking for icons, there are free icon libraries like Font Awesome. There are also plenty of other font icon libraries.

0

The short ver.

A retina image is just a higher resolution file than a "normal".

or

The "normal" image is just a smaller resolution to save bandwith and loading times.

The long version:

The pixel density is a unit describing how many pixels a device, with a phisical mesure, can display. So it is refering to the device.

For example, the iphone 6 plus, basicly has an HD screen (1920x1080) so it has the overall resolution of a big HD screen, but as it is smaller it has a higher pixel density.

The use of diferent size images on a retina display is a way to provide diferent file sources depending if the device can take advantage of the detail in the photo.

But in a normal mobil device you want to save bandwidht, and not all devices can display an HD photo, just lets say a 854x480. This means that you need diferent versions.


Here is a sample workflow: 1) Is my image flat style? Can I use a vector format, like svg? - Use svg. End of story.

2) Is my image too complex, a real ilustration or a photo?

  • Export a HD version 1920 x Y. Declare this one for Desktop and retina 3x.

  • Export directly from the original to other resolutions, probably 1334, 960 854 or whatever combination you choose for the normal device or the 2x retina version.

Here is a table for screen resolutions. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

1
  • Careful with the word "resolution". I realize it can be used to mean width and height at times. However, it can also be used to mean pixel density. In most instances "resolution" refers to ppi (pixel density). 2x, 3x and 1x images are all the same ppi so using "resolution" to describe the difference can cause confusion.
    – Scott
    Jan 29 '15 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.