Search code examples
imageretina

Retina images that are not quite double size


I've read the book Retinafy Me. This basically says double the size of images. When it is then displayed on a retina screen at half the image size it will look great.

My problem is that the original images I have can't be doubled in size. i.e. the images are 750px wide. They are to be displayed 500px wide. What do I do? Is a x1.5 image better looking that a x1 image (on a retina screen) or is it just needlessly adding to the file size?

I've tried using the x1.5 images (750px scaled down to 500px) and the images looked good on a retina screen in the Apple store where I checked them out. But I couldn't do a definative comparison, I don't have a retina screen of my own and I can't find any info about it anywhere.


Solution

  • A pixel is still a pixel on a retina screen. The difference is simply that a retina screen uses 4 pixels to display one, if they have no additional information such as more pixels. This is why the suggestion is to double the image size.

    Essentially your image will be rendered by stretching it to 1000px wide. When stretched, a 750px wide image will still look better than a 500px wide image. You can try this for yourself in Paint.

    There is a pretty good explanation of how it works on http://crypt.codemancers.com/posts/2013-11-03-image-rendering-on-hd-screens/

    Hope this helps.