: Are @2x images simply larger in terms of height and width or do they actually have a higher PPI (pixel density)? Are @2x images simply larger in terms of height and width or do they actually

@Lee3735518

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.

Vote Up Vote Down

@Debbie163

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. www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Vote Up Vote Down

@Caterina889

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.

Vote Up Vote Down