8) Retina Display

It’s a false assumption that retinafying an image by doubling its resolution results in a file four times larger. Image compression doesn’t work like that – it hardly scales linearly with the amount of pixels in the image.

In PNG images there are huge areas of transparency, of single colors, and of repetitive color patterns that do not change. Because of that, actual file sizes of images that are twice the resolution of the original do not mean twice the size.

For JPEG images,  just double the resolution and lower the JPEG quality. On a normal density screen this would cause ugly artifacts, but on a retina screen the pixels are so small you can’t see them.

Here is a WordPress plugin the creates the image files required by Retina (high-DPI) display:


Menacing CloudOptimising for High Pixel Density Displays <- CSS and JavaScript approach


More Information

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s