Picture automatically downsized in Image Stack


(Flo) #1

Hi @all,

I have put a png to my resources with around 300dpi. When I link it to a Image Stack of Joe Workman (in the standard Image Stack of RW same problem), the quality is getting bad and the file has a dpi of 72. How can I stop that quality reduction?

THX for help


(Robert Ziebol 🖖🏼) #2

What happens if you put the image on your server without using Resources?! Not sure, just seeing if it is an issue with resources.


(Flo) #3

Solved it. I only changed the picture for mobile but there was also one for desktop in a visible stack which I had in a older bad resolution. I haven’t seen it because therefor I had to scroll down very far. Aaaaahhhh, one hour for nothing!


(Rob D) #4

@macfms – By the way, using a resolution of 300ppi is not going to give you a better quality of image on screen than using 144ppi. That’s the maximum resolution that Retina screen renders. Above 144ppi – just a waste of space and speed of loading. 300ppi is only necessary for printing (if, in fact, you want your viewers to use your images for printing).

Another concern that you might not thought of is the fact that a high-resolution images are more attractive to those that like stealing images from the web.


(Robert Ziebol 🖖🏼) #5

Actually, the web does not show anything above 72 ppi.
https://www.google.com/search?client=safari&rls=en&q=what+resolution+should+images+be+for+the+web&ie=UTF-8&oe=UTF-8


(Rob D) #6

It’s the screen of our monitor that makes a difference in perceived sharpness/fuzziness of a photo. Particularly, there are two factors that count. One is the screen’s native resolution and the other is whether the display resolution is set to the native or some other resolution.

The reason why I wrote that the images viewed on Retina displays should have the resolution of 144ppi instead of 72ppi is that computers with this kind of a screen do display differently than “standard” devices.

Retina display, for example on MacBook Pro has a resolution of 2,880 x 1,800 pixels. That makes it 220ppi. At this resolution not only pixels are smaller, but everything that appears on screen looks smaller – in fact, so small, that it is impractical to view anything on small laptop screen, with even smaller rendering than normal.

In Retina MacBook Pro, the Display Preferences allow setting the “working” resolution to non-native numbers, so that people can adjust the size of displayed type and graphics to more realistic dimensions, easily viewable by those who are not endowed with a super-human vision.

Typically, users set up their “working” screen resolution to half-the-native-resolution, where everything looks twice as big on screen as with the native resolution. Therefore, pixels look more fuzzy. Therefore, resolution of images prepared for viewing on Retina screen should be made twice the standard 72ppi, if they are to look as good as those 72ppi images made for standard resolution monitors set to their native resolution.

Undoubtedly, you’ve heard of applications being “Retina-ready”, or some such description. That means that their graphics will not look fuzzy on Retina screens. Presumably, they achieve that by using the SVG graphic format (Scalable Vector Graphics). Fonts are scalable by their nature. Unfortunately, SVS format does not apply to pixel-based images, so we have to rely on the higher than normal resolution.

And Retina (Apple’s brand name) is not the only display that uses higher than standard resolution. Most leading monitor manufacturers already make similar devices. They may not be as prevalent as standard resolution monitors, but they will grow in numbers.

There are different approaches to how we scale our images for web – dimension-wise and resolution-wise and how we use CSS, sprites and JavaScript for the final delivery of images on the web. That is an entirely different discussion (have a look at this Apple document. I only outlined it in the simplest way – from the image pre-production point of view.

For now, you can find an interesting discussion on this topic here.