100% zoom is too small on screen (designers don't get high resolution displays)

[pmlink360]

Hello, I'm using photoshop CC on amacbook pro retina. I mainly use photoshop for web design and when I open a document that is 300x200 px, the 100% view is too small on screen. Any ideas, It was this way on PS cs6 also before I upgraded. I just tried to delete the prefs file and restarted PS and it did not change. I have also tried to change my screen resolution to "best for retina" and it is still the same.

Steve

[Herbert2001]

Chris Cox wrote:

The document containing the vector or text data has a resolution.

100% means to show the document pixels (including the rasterized text and vectors) 1:1 as display pixels.  Moving that to another display will change the physical size of the displayed image according to the other display's resolution (the same as if you moved it from a 72 dpi display to a 120 dpi display).

The window chrome is defined a bit oddly in MacOS (it would take a while to explain the OS scaling "logic"), and doesn't change size so easily.

As far as I can tell, all the participants in this discussion understand these points you are making.

Let's for the sake of the argument just say that it would be very convenient for the web layout workflow to be able to enable a "web proof" zoom level that zooms to 100% that is (more or less) identical to the interpreted version in the browser on that system during design time.

It would also allow web developers/designers to work at higher resolutions in preparation for multiple platform asset generation. Say, working at 2650px resolution, and still zoom to "100%", displaying at interpreted browser size. This could perhaps be extended to other types of platforms previews as well.

Again, I think this can be achieved with print preview and the preferences ppi setting with some trial and error (as a temporary workaround).

[Astley Marketing]

But it would be nice to work at the right scale and not just "preview" it.

[skillbreak]

Well put! I totally agree.

[Ferreira78]

Sorry, responding the the initial post. Thanks for the answer awerm08.

It seems pretty clear to me that if you are designing web graphics, you want to work at web resolution. It seems silly to use a monitor at high-res for web work, when it does not show you what your web graphic will look like when it's live. All those pixels come in handy for high res print work though.

I understand the hole pixel/resolution thing. It's not rocket science.

[D Fosse]

Ferreira78 wrote:

I understand the hole pixel/resolution thing.

Apparently you don't. This is a monitor property and it has nothing to do with Photoshop. All Photoshop, or any other application, can do, is provide workarounds so that both monitor technologies can be used. If it was only one of them - UHD or HD doesn't matter - the whole problem would cease to exist.

There is no such thing as "web resolution". The web is just pixels, it has no resolution. Resolution is for print only.

On screen, the image aligns to the screen pixel grid. That's the web resolution you talk about.

Most consumer-oriented, non-critical applications - web browsers - solve the whole problem by simply doubling the content pixel count - image, UI, the whole shebang. They do this when they detect (yes, they can do that) a high-density display. I'm sure that when you think about it, you realize why Photoshop can't take this brute force approach. Right?

[MadeByFaisal]

Right click on the photoshop icon and click info. There is an checkbox of high resolution, just uncheck that and it will resolve. And open photoshop again

Sent from my iPhone

[Astley Marketing]

Noel Carboni wrote:

Please take the time to try to understand what those of us who understand how things work are saying. We understand you. It is you who do not understand that you must re-examine some of your own assumptions in order to move on.

It's a good job you weren't around when the wheel was suggested... and that you don't work for the Photoshop development team otherwise we'd only have one sharpen filter. The suggestion to add more would have been shunned with "learn how to use the one you've got"!!

Noel, please let go of your old fashioned mentality that Photoshop has ticked every possible box, if that was the case the software would be a lot cheaper - as it wouldn't require any further development.

[Herbert2001]

Noel Carboni wrote:

Thus your expectations do not and will not match reality.  Only one can change.

Please take the time to try to understand what those of us who understand how things work are saying.  We understand you.  It is you who do not understand that you must re-examine some of your own assumptions in order to move on.

-Noel

Both Nathan and Astley (and myself) are completely aware of how things work in regards to this matter - we are talking about workflow. Again: while working in Photoshop and previewing in the browser on our systems, it would be very beneficial to have a matching relative size set somehow.

Currently Photoshop displays 1 pixel at 1 pixel at 100%. If the web designer/developer could change this to a different multiplicator, it would save her/him some headachs during design time.

It would also allow the designer to work at twice or more the resolution to be able to export at different resolutions for different platforms, and still "zoom" to what she/he expects to see in her/his browser while working on the design.

I mean Photoshop CC can now export these with ease with Generator!

That is why I proposed the print preview solution, because it can be set to a different interpretation of pixels in relation to the zoom level of the layout in Photoshop.

You yourself stated that browsers interpret pixel densities at different screen sizes in different ways, and it seems that Photoshop is the one application that is falling behind more and more in terms of web layout preparation. (Aside from the question whether it is a good idea at all to design web layouts in Photoshop - in my experience it is not.)

If you set the ppi of the document to match the ppi of the intended output device - be it print or display - the point size of the text will always be accurate.

...and users may apply different zooms.

On a side note here, but you should not use pt for fonts on the web. Either use EM or REM. And, of course, avoid px like the plague.

[nathanpowell]

Both Nathan and Astley (and myself) are completely aware of how things work in regards to this matter - we are talking about workflow. Again: while working in Photoshop and previewing in the browser on our systems, it would be very beneficial to have a matching relative size set somehow.

Thanks for sticking up Herbert2001!

Currently Photoshop displays 1 pixel at 1 pixel at 100%. If the web designer/developer could change this to a different multiplicator, it would save her/him some headachs during design time.

It would also allow the designer to work at twice or more the resolution to be able to export at different resolutions for different platforms, and still "zoom" to what she/he expects to see in her/his browser while working on the design.

Well put, beat me to the punch.

[Astley Marketing]

It'll be funny when we are using displays with 2000 pixels per inch by default, Photoshop will still be there ramming 5 mega pixels into an inch square.

[c.pfaffenbichler]

Currently Photoshop displays 1 pixel at 1 pixel at 100%. If the web designer/developer could change this to a different multiplicator, it would save her/him some headachs during design time.

It would also allow the designer to work at twice or more the resolution to be able to export at different resolutions for different platforms, and still "zoom" to what she/he expects to see in her/his browser while working on the design.

Well put, beat me to the punch.

Does this mean you understand that your previous statement (assuming it was referring to Photoshop’s 100% View of a 960px wide image)

They are displayed at 960px wide in the browser, but NOT in photoshop, that is the problem.

was incorrect?

[Astley Marketing]

Herbert2001 wrote:

I mean Photoshop CC can now export these with ease with Generator!

Loving That New Feature, that indeed flips my productivity problem on it's head. I now have the ability to work at the much higher Retina resolution and group the whole document in a folder called "50% proof.jpg" therefore automatically creating a proof file for clients.

Doesn't solve the problem of editing an existing image, or designing whilst avoiding fizzy single pixel lines, but great feature for efficiency.

[Herbert2001]

I completely understand what Astley is writing about - there is a disconnect between how Photoshop displays at 100% and how a web browser displays the same layout at 100%.

Noel is missing the point a bit - as a web developer you really want both to match up while designing. Whether your content is going to be responsive and adapt to different devices or not is really beside the point (though a layout should be adaptable nowadays), because while you are working on the layout you expect the views in the image editor and the browser to match up at 100% zoom in both.

There is sort of a workaround solution, though it may take a bit of trial and error to get it right: instead of using the traditional "Actual pixels" zoom, instead use the "Print Size" zoom (you will have to setup a shortcut key for this yourself).

The "Print Size" is dependent on the Screen Resolution setting in the Units & Rulers tab in the preferences. Adjust this to a setting that makes Photoshop display your layout at a zoom level that is the same as the browser's.

Not a perfect solution, but workable. It also allows you to work at a twice or more resolution to cater for retina screens, while still have a zoom short cut to view the page at that exact size.

Three more points I'd like to make:

1) use a tool like Cut'n Slice or PH CC's new Generator functionality to automatically generate different versions of graphics for different devices.

http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html

http://www.cutandslice.me/

2) @Noel: it is a really bad idea to serve up one huge high resolution image to cater for all platforms and resolutions. It eats up bandwidth, loads much slower, does not differentiate between platforms/devices, and eats memory on smaller devices with less memory as well. A responsive design should ideally only serve up the intended image for each platform. One way to achieve this is through the use of a picturefill "polyfill" method like this one:

https://github.com/scottjehl/picturefill

3) Firefox changed its interpretation of the default zoom level a page is displayed at a couple of versions ago. On my system the default zoom is set at 120%. This can be very frustrating when designing a layout. To control this, install the NoSquint extension. It adds a small zoom indicator at the bottom of the page in the add-on bar. You can click this to set the desired zoom level.

NoSquint can also be used to zoom in/out to match up with Photoshop's zoom level interpretation.

[Noel Carboni]

Herbert2001 wrote:

2) @Noel: it is a really bad idea to serve up one huge high resolution image to cater for all platforms and resolutions.

I understand what you're saying, I just don't agree with it.  Not even a little bit.

This is the day and age of web pages being delivered from eleventy seven different servers and littered with TONS of extra junk that's usually completely useless to the user's browsing experience.  Count up what's delivered to your browser by Adobe.com's home page, for example.  I'm sorry, but it's ridiculous to talk about how much impact a few hundred kb for higher quality images would have.

And...

This is also the day and age of unprecedented high internet speeds, even mobile, with portable devices with gigabytes of space and huge processing power, so it's similarly silly to talk in extremes about how much double-sized images would burden such a device.   And before you say that not everyone is endowed with this wonderful modern technology, I'll offer this:  The ones who spend any money at all on tech ARE, and these are the folks you're trying to sell things to online, no?

I'd welcome an actual example of a highly efficient web page where the small images make it light and fast and higher resolution images would bog it down significantly.

Here are some stats:

http://www.adobe.com -  4.2 megabytes

http://www.apple.com -  2.2 megabytes

http://www.chevrolet.com -  4.5 megabytes

http://www.ford.com -  2.5 megabytes

(and I should mention I have TONS of useless sites, such as social networking, parasite advertisers, and trackers, blocked from ever loading anything.  I suspect you'd see even bigger numbers than those listed above)

One of my own web pages with high resolution zoomable images -  1.1 megabytes

-Noel

[Herbert2001]

Noel Carboni wrote:

I understand what you're saying, I just don't agree with it.  Not even a little bit.

...

I'm sorry, but it's ridiculous to talk about how much impact a few hundred kb for higher quality images would have.

And...

similarly silly to talk in extremes about how much double-sized images would burden such a device.   And before you say that not everyone is endowed with this wonderful modern technology, I'll offer this:  The ones who spend any money at all on tech ARE, and these are the folks you're trying to sell things to online, no?

I'd welcome an actual example of a highly efficient web page where the small images make it light and fast and higher resolution images would bog it down significantly.

...

-Noel

It has mainly to do with connection speed and the extra time it takes to download that one huge image - and realizing that your users may not have access to that great WIFI connection at Starbucks, but are on the road with crappy connections that slow down all your browsing.

You also seem to play down the importance of how fast a website's content is displayed can have a tremendous effect on the user experience. 1sec versus 8sec means a lot in that regard.

(ps It does not help that tools like Photoshop lack proper png export, and increase file sizes even more - but that's a different story.)

When you force everyone to load up a page with those larger images than required for the device, It means your mobile browser loads them up perhaps 10 times or more slower than a dedicated image for smaller platforms.

Just imagine a page with multiple images (and single page designs have become more popular with mobile in mind as well resulting in far more overhead again) and this resulting in a page of 5~10mb, where it could have been 500kb or less.

A gallery page with tenths of images of ultra-high resolution images seems like a good idea to you? See my next point!

Browsers have a limited number of download threads, which means serving out only high resolution versions will throttle your download speed down no matter your download speed - congestion will occur, and while your cell phone user ist kept waiting for those beautiful (but useless) high resolution images to load up a couple at a time on your page, the rest of the content is waiting in cue to be loaded up - empty spots of content being the result.

I am sorry, I think you are completely in the wrong here. Your argument that we should only cater for users with (and expect them to have) the best connections and latest tech does completely disregard the fact that we not only build web experiences for the rich, but also for users with less than ideal hardware.

You also seem to miss the point that we should be designing with mobile first in mind - which means you actually feel it is a great idea to keep loading up ridiculously large image files for large desktops screens and the latest retina screens (which still make up a very small segment of the market) on small mobile screens?

And the fact most websites/designers/developers do not seem to care all that much about these type of issues merely means that my site will load up ten times quicker than the competition for a far better user experience than your bloated site. Now, ask yourself the question: who will the client hire next time? Whose website will provide the user with the best and fastest user experience?

I will grant you that it very much depends on the type of web content, the type of target audience, and so on, but It's pure laziness on a web developer's part NOT to take these issues into account at all while developing, and waving away the consequences of forcing your mobile users to just deal with the huge unnecessary overhead, and having them wait 10~20 times longer is just plain silly. In my opinion of course.

[Astley Marketing]

Great post Herbert2011.

To bolster your point and reply to Noel further.

A. You'd expect Adobe to be on page one of Google for "Image editing software" but it isn't... perhaps that's because of the page loading time!

B. There are dosens of case-studies online showing that just 1 second of extra loading time can affect conversion rates by more than 5%

That said I'm all for higher quality images on websites where the trade-of is benefitial, but adaptive and responsive design mean that we don't need to blindly ram 1.5Mb of coloured squares down the throats of mobile users when a third of that is enough and the pages can load 3x faster.

[Herbert2001]

Astley Marketing wrote:

A. You'd expect Adobe to be on page one of Google for "Image editing software" but it isn't... perhaps that's because of the page loading time!

That is because the Adobe's SEO is dreadful. They do not need to have a good one, though, because pretty much everyone knows the Adobe brand.

[Astley Marketing]

You'd expect the Google Algorithm to prioritise Adobe considering their Authority on the topic. So, yeah... they must be messing something funemental up in there!

[Noel Carboni]

You folks talk like I'm anti-efficiency, yet my web pages load more quickly and are more efficient than all those I can find that are made by so called professionals - and I have better imagery to boot.

I guess I should give up trying to talk sense here.  We live in different realities.

-Noel

[Astley Marketing]

Noel Carboni wrote:

We live in different realities.

I'd accept that as an answer.

[sam2259]

[abusive post removed]

[Darren FM]

Perfectly said - optimised pages get higher page ranking - fact.

All we want as designers (regardless of our monitors screen size) is a like for like across canvas and browser - the design i see in photoshop  needs to be displayed (i'm not bothered about the pixels) the same as it is in a browser window

[D Fosse]

https://forums.adobe.com/people/darren+fm  wrote

a like for like across canvas and browser - the design i see in photoshop  needs to be displayed (i'm not bothered about the pixels) the same as it is in a browser window

So I'll give it one more go: you get that if you can just be bothered to set Photoshop to View > 200%. That's all it takes.

Yes, this is what your browser already does. It's not displaying at 100%, it's displaying at 200%. Photoshop can do that trick too.

I've said this about 387 times by now, in this thread only, so I don't expect this time to be any different.

[MelEsp]

This is what people really want to see, not an introduction to digital display 101.

This should be placed as the correct answer!

[mickpark]

In November of last year I upgraded to a 15 inch MacBook Pro and in Photoshop CS6 have seen no visual difference in CS6 from my old (non-retina) Mid-20112011 17 inch MacBook Pro.

Fast forward to today, and now I'm having the same issue. Images viewed at 100% are displayed at half the size. I'm a photographer that publishes many photos per week to web outlets, and double checking pixels viewed at 100% is crucial to my workflow.

I understand the issue (retina displays having vastly higher resolutions, etc) and while I don't really think this forum is for pissing contests like what I've read so far, what is most perplexing is why everything was "normal" for me until now. Opening PS in low res mode makes images look pixelated and, well, low-res. And zooming into 200% is no different than that.

How 'come zooming into 100% showed my images the same as a browser would see them and now, all of the sudden, it's half the size?