Effortlessly make your retina ready digital gallery website that reflects your brand

@3x images are only pixel accurate on the 6+. @2x images are pixel accurate on most other iOS devices, but theres still some iPads that are @1x. Since you provide the varying sizes, you can adjust them so they are correct for whatever device your app runs on.

Retina-ready websites are websites that utilise modern technology to display high-resolution images on devices that have high definition (HD) displays, such as the many tablets and smartphones, and some modern laptops, macbooks and desktop PCs.

Retina screens, also known as HiDPI screens, feature a significantly higher pixel density compared to standard screens. Consequently, images must be twice their original size to ensure that everything appears crisp and well-defined on these high-resolution displays.

The higher the DPI, the more detailed and clear images and text on that screen appear. Apple refers to their high-DPI displays as Retina displays since, in theory, the DPI is so high that the human eye can no longer distinguish between individual pixels on the screen.

What is a Retina Image Display? Retina displays allow graphics and photos to become sharper and clearer on a display, this is done is by doubling (and sometimes tripling) the amount of pixels within a photo or graphic to enhance the quality of the image, hence making it HD.

The First Retina Display The iPhone 4 had twice as many pixels (widthwise), so we call it a 2x display. Apple calls them Retina displays because the human eye cant see anything higher resolution than these displays. The old concept of more pixels equals a bigger screen no longer applied!

@2x Double Resolution 2:1 pixels. @3x Triple Resolution 3:1 pixels. If you are not from a design background, this may sound a little confusing. Basically an @2x image is twice the size in pixels as an @1x image and an @3x image is three times the size of an @1x image, e.g. @1x 50x50px normal size.

1x vs 2x Graphics To accommodate high resolution/retina displays, youll want to use an image thats 1280 pixels wide, which is whats referred to as 2x. While the graphic will still display on the website at 640 pixels wide, you are doubling the pixel density by using an image thats double the size.