Scaling down images and the impact on image quality

Question

I would like to know how scaling down images affects the quality. When scaling images up, they get pixelated and it's clear to see that the quality decreases, but when scaling down I sometimes notice the quality getting worse and sometimes I don't.

Background To be more precise we are developing a digital magazine and will have to use thumbnails of the cover throughout our application. I am wondering whether the designer (who we haven't hired yet) should export the cover to all the different thumbnails sizes we are going to need or whether it is ok to export it at it's native resolution (1024 x 768) and then just use a program which will automatically resize it to all the thumbnail sizes we will need.

I have noticed in other magazines on the iPad the thumbnail covers often have "jaggy" fonts and would like to avoid exactly that.

So my question is: What kind of images are save to down size without noticeable quality loss and what kind of images should I export to the desired size?

Questions regarding retina support

Another question I am having is regarding making the magazine "retina ready". I understand that it's best to design as much as possible using the vector tools in indesign or create icons and logos as vector graphics in illustrator, this way nothing else needs to be done for it to look good on both retina and non retina displays.

For raster images it is best to create two PDFs one with all the images at retina resolution (142PPI) and one at non retina resolution (72PPI). I know I can setup InDesign to automatically downscale images to those resolution on export.

For photos, which are only available at high resolution this seems to make the most sense and the only way.

My question is in what cases would a designer create images as raster graphics instead of vector graphics? I assume this would be for very complex graphics. But could someone give me a couple of examples or images which would not be suitable to be created as vectors?

In the case of images that have to be created as raster images, do I have to create two versions from scratch or can I just create a retina version and then scale that one down to non retina?

From my background with iOS development I know most designers create two versions of each asset from scratch. Especially for the icons. Could someone please explain the reason for this and when it is necessary and when not?

Please let me know if I am understanding this correctly or whether I got something completely wrong.

Greetings, Kim

Answer 1

That really depends, like you said, on the image. Some things scale down better than others. Text often looks bad, that's why there are pixelfonts in the first place. But images can be scaled down in different ways (e.g. bilinear and bicubic interpolation), with different results.

Thumbnails: "it is ok to just use a program which will automatically resize it to all the thumbnail sizes we will need?"

If you are happy with the result, I guess that's ok. But that's really the designers job. Making sure the thumbnails look good. Keep in mind, some things cannot be provided in different resolutions, like the App Icon ("iTunes Artwork"). I don't know if thats the same case for magazines. The iOS documentation about it can be found here.

"What kind of images are save to down size without noticeable quality loss and what kind of images should I export to the desired size?"

There is no solution covering all cases, but photos tend to scale better than fine line illustrations.

...vector graphics in illustrator, this way nothing else needs to be done for it to look good on both retina and non retina displays...

This is not true as you are not providing vector artwork as final designs but png files.

In what cases would a designer create images as raster graphics instead of vector graphics?

Some things cannot be done in vector (or at least not nearly as well). E.g. dithering, blur, brushes, etc.

Do I have to create two versions from scratch or can I just create a retina version and then scale that one down to non retina?

You can. But there are limitations. 1px lines will look blurry when scaled down for example. So, it depends on the icons/graphics you are using.

Finally, to me this sounds like two basic questions. The first being technical requirements which Apple provides in their documentation (see link). The second being: Do I need a designer or can I automate most of these things or do them myself without loss of quality? And my answer is: To an extend, but providing quality results is the designers job. So if you want to make sure you get the best out of it, hire one. These questions reflect basically what a designer does. And you shouldn't have to worry about them.

Answer 2

Retina currently means double the information in the same pixel. For icons and such, SVG images are the best option not only because they scale but also because they are very light.

This doesn't mean you have to use SVGs for everything retina, because when it comes to photos it would become an impossible task. In my experience, the best format for this case is PNG. PNGs can handle transparency and they don't create artifacts like JPGs.

The texts in the PDF should look good in both densities. If you don't mind the size, you can use large PNGs for both resolutions.