Expression >
Forums Home
>
Expression Studio Forums
>
Expression Web and SuperPreview
>
SuperPreview Overlay Layout Problem
SuperPreview Overlay Layout Problem
- I'm working against a mockup in JPG format. The image is 950x720 at 72ppi.
When I use this image in overlay layout mode in SuperPreview, the image displays at 1265px wide, which effectively zooms the image by roughly 33%. As a result, the overlay does not match the displayed site and the overlay mode is useless.
Did I miss a step? Is there some kind of control or setting I've missed?
Will
Baltimore, MD USA - www.fastie.com
Answers
- I'm going out on a limb here with no certainty. Except...72ppi is a common old setting for CRT monitors. LCD panels are generally--generally--considered to be 96ppi. And 72 is to 96 as 950 is to 1265. Exactly (well, within 0.0017--1.3333333 vs 1.3315789). Could there be something that's resolution-specific in this process?
I know, I really do know--that PPI is supposed to be irrelevant in screen use for images (300px is 300px, after all). But that's an awfully close set of figures that may bear further scrutiny in their relationship.
Change the image ppi to 96, keep the same size, and see what happens.- Marked As Answer byWill Fastie Saturday, November 07, 2009 2:02 AM
All Replies
- I'm going out on a limb here with no certainty. Except...72ppi is a common old setting for CRT monitors. LCD panels are generally--generally--considered to be 96ppi. And 72 is to 96 as 950 is to 1265. Exactly (well, within 0.0017--1.3333333 vs 1.3315789). Could there be something that's resolution-specific in this process?
I know, I really do know--that PPI is supposed to be irrelevant in screen use for images (300px is 300px, after all). But that's an awfully close set of figures that may bear further scrutiny in their relationship.
Change the image ppi to 96, keep the same size, and see what happens.- Marked As Answer byWill Fastie Saturday, November 07, 2009 2:02 AM
- Bill is absolutely correct. We capture browser images at 96dpi. What happens when you import a 72dpi image is WPF, the framework in which our application is programmed, by default scales the image to match the browser's DPI. Hence it's matching the two images by inches, not by pixels. If you modify your image to 96 dpi, as Bill suggests above, you should be able to import it and have it match without issue.
Alex Moskwa - Microsoft
Program Manager - Actually, there is no longer a constant size (PPI specification) for monitors. My 15" ThinkPad's native resolution is 1600 x 1200, for a PPI of ~133 PPI. And you are correct—PPI means nothing to a monitor. A monitor displays one pixel per pixel, and a 10 PPI image at 400 x 400 will display at exactly the same size as a 400 PPI image at 400 x 400 pixels unless software intervenes (such as Photoshop scaling an image to display in full unless View|Actual Pixels is selected).
[EDIT: Hmm, simultaneous edits strike again. ;-) Alex's post explains it. As I mentioned above, under ordinary circumstances a monitor displays at one pixel per pixel absent software intervention. In this case, as Alex explains, the software is apparently scaling the image, a factor which I did not know occurred.]
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - <quote>
What happens when you import a 72dpi image is WPF, the framework in which our application is programmed, by default scales the image to match the browser's DPI. Hence it's matching the two images by inches, not by pixels.
</quote
I see confusion on the horizon.
The fact that this happens needs to be widely advertised.
Expression Web MVP - Bingo! Who's the MAN? (that would be meeee). ;-)
I just knew it was too much of a coincidence that those numbers were the same; I knew there had to be some scaling involved.
And, yes, I know that 96 is just a general figure used for LCDs and that 20" and 22" monitors (which both run at 1680x1050) have different ppi, and that laptops generally have much higher ppi. But 96ppi is a very generic figure comonly used for modern LCD monitors.
72ppi is sooo last century. - Boy, Bill, do I feel stupid now. That same thought occured to me, so I used a calculator to get the 1265:950 ratio. Then (this is the stupid part) I used my biological brain to calculate the 96:72 ratio and got the wrong answer. I wish somebody could reach through the net and kick some sense into my aging noggin. I used to be able to do that sort of thing right every time.
Now that I've made the adjustment it works fine.
Thanks.
Will
Baltimore, MD USA - www.fastie.com - Steve is right when he predicts confusion.
Alex, you may import the image in inches but when it is displayed in SP the rulers display pixels. You can't have it both ways.
At the very least, I think SP is going to need a way to scale an overlay image to avoid this problem.
If I take the same image and create two new images, one at 72 and one at 96, both at the same width, then display them on the same browser page, they both display at exactly their specified width. That means SP is handling images differently than browsers, including Microsoft's own IE.
I sure hope that WPF is worth it somewhere down the road. It made xWeb slower, it has caused valued features to vanish version to version, and now it confuses resolution.
Will
Baltimore, MD USA - www.fastie.com- Edited byWill Fastie Saturday, November 07, 2009 2:19 AMtypo
- <quote>
If I take the same image and create two new images, one at 72 and one at 96, both at the same width, then display them on the same browser page, they both display at exactly their specified width
</quote>
Because the browser ignores ppi / dpi and only uses pixels for height and width,
as does windows explorer, the desktop, etc...........
Expression Web MVP - Which makes one wonder why an overlay tool like SuperPreview's goes counter to this principle. Users should not have to set, or even worry about, the PPI of their images, since no browser or monitor ever will.
I have images ranging from the default 72 PPI that Bridge/Photoshop assigns to downloaded images from my camera to 600 PPI images produced by my scanner. I don't want to have to concern myself with changing their PPI unless I intend to print them, which is the only place it should even matter.
The only thing that should matter to a tool used for content destined for a monitor is the pixel dimensions, not the PPI. Frankly, I think this qualifies as a bug, and should be corrected.
[EDIT: Paul, I realize that the SP team is probably separate in most spheres except for interaction from the EW team, but could you check on this and bring it up with them? Alex says, "What happens when you import a 72dpi image is WPF, the framework in which our application is programmed, by default scales the image to match the browser's DPI."
Fine, if it is programmed that way then it should be programmed differently and made to ignore the PPI settings and only work with the pixel dimensions, the way that monitors, HTML editors, and other software that does not deal with printed output does. Something that has not been pointed out is that if the image is scaled from 950 to 1265 pixels, it has in effect been resampled upward. This is not the job of a Webdev tool, and is something that even the most sophisticated graphics editors such as Photoshop don't do well. Bad idea all around.]
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - "Which makes one wonder why an overlay tool like SuperPreview's goes counter to this principle. Users should not have to set, or even worry about, the PPI of their images, since no browser or monitor ever will."
Absolutely. It makes no sense to consider PPI for a website development tool. Pixels, period.
"What happens when you import a 72dpi image is WPF, the framework in which our application is programmed, by default scales the image to match the browser's DPI. Hence it's matching the two images by inches, not by pixels. "
That is a bug that needs fixed. - I was hesitant to propose my answer because it just sounded weird that PPI should in any way be causing this--it is the Web, after all, and PPI shouldn't count. But the coincidence of the match of the ratios made me think that it was the cause.
It shouldn't be the cause.
When I resize photos for the web, I never concern myself with PPI. I just checked, and my PSP is set to 300 PPI, probably left over from some print work I was doing months ago.
Why in the world a web tool like SP would ever use anything like inch measurements is beyond me. And it seems like it's going to cause a lot of confusion and hassles down the road. I would also love to hear the reasoning behind the method. - There are a lot of pretty smart people in this forum and, I think, quite a few with more than minimal programming experience. As such, discussions of "how things work" are usually interesting and entertaining.
At root, however, I couldn't care less. I'm not interested in how the tool was built, only in what it can do for me. This thread is not the first time that WPF has been held up as the reason for this or that. But WPF is not an alibi. What's happened here is that a fundamental mistake about usage has been made in the design of a product. Fortunately, it's probably very easy to fix. It seems to me that SP can query the image as to its properties and adjust as needed or, if that is too much, announce to the user that the image needs to be in a particular resolution.
The image overlay feature is incredibly useful to me. Useful, that is, if it works.
On the subject of resizing images and their native PPI, I use to worry about that a lot. A little over a year ago I did some experiments with Photoshop Elements (which I use 95% of the time) using two approaches to creating the Web images. In technique #1, I used the editing surface to resize and resample, then I Saved to Web, adjusting only the JPEG quality. In technique #2 I did nothing in the editing surface and instead used the Save to Web settings. This is much faster and it has the benefits of leaving the image on the editing surface in its natural condition and allowing a visual preview. I then compared the size of the resulting files and the visual quality of the images.
What I discovered was that Adobe's Save to Web feature does just as good a job as the manual steps I used to take. Since then I've used technique #2 almost exclusively and never looked back.
This leads to the obvious question: What resolution does Adobe's Save to Web feature use? The answer is 72dpi. I checked this in both Photoshop Elements 6 and Photoshop CS2; I could not find any way to change it.
Will
Baltimore, MD USA - www.fastie.com This leads to the obvious question: What resolution does Adobe's Save to Web feature use? The answer is 72dpi. I checked this in both Photoshop Elements 6 and Photoshop CS2; I could not find any way to change it.
AFAIK, 72 PPI is Adobe's default for anything where the specification is irrelevant. And the spec should be irrelevant at any time other than creating physical output, such as printing. PPI for input devices such as mice and scanners is material only because it determines the manipulation accuracy (mouse) or quantity (scanner) of image data captured.
A monitor cannot display other than a pixel per pixel, and the number of pixels per inch of a monitor is a characterisitic of the monitor, not the image. By contrast, a printer driver can vary the number of pixels printed in a physical inch, so that a 1200 x 900 image printed at 300 DPI is 4" x 3" in size, while the same image printed at 150 DPI is 8" x 6" in size.
PPI should not be a consideration when any software is outputting to the monitor.
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).- Will, will you be posting this (apparently WPF-induced) bug on the Connect site?
- I don't think I've been invited to the current Connect site. Feeback for the one I've been using is gone.
Will
Baltimore, MD USA - www.fastie.com - Nothing changed for me but the layout of the Connect site. I'm still showing the Connections I'd already applied for, including Expression Studio. In the Dashboard, selecting Expression Studio connection and Submit a Bug action is right there in the dropdown menus.
- You don't have to be invited; it's open to the public. Well, to anyone with a Live ID, which is everyone eligible to post here. ;-)
Here's the address:
https://connect.microsoft.com/dashboard/?wa=wsignin1.0
Just go there, sign in, and state your problem. Might not hurt to provide a link to this thread, too, as there has been some fairly extensive discussion which might help to illuminate the issue.
Posting to Connect does work. I posted another (unrelated) SP bug last week, and with several email exchanges, and provision to MS of some registry key exports, the problem has been found, the issue resolved, a workaround provided that works for now, and the fix will be in the upcoming service pack. Not bad for about a week and a few emails.
If anyone is interested, or in case someone else has encountered the issue and, like me, put off saying anything about it, it's a problem with SP recognizing changes in Firefox versions. The Connect post is here https://connect.microsoft.com/Expression/feedback/ViewFeedback.aspx?FeedbackID=504126
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Oops, I was in the wrong place. I've now found the "new" place and I have posted.
Thanks for the help.
Will
Baltimore, MD USA - www.fastie.com Boy, Bill, do I feel stupid now. That same thought occured to me, so I used a calculator to get the 1265:950 ratio. Then (this is the stupid part) I used my biological brain to calculate the 96:72 ratio and got the wrong answer. I wish somebody could reach through the net and kick some sense into my aging noggin. I used to be able to do that sort of thing right every time.
Now that I've made the adjustment it works fine.
Welcome to life, if each of has a nickel for everytime we've done something we "know" wrong we'd all have a nice little bonus.
I agree with SteveE that I see a whole lot of confusion is gonna happen.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes- Will,
If you will post back here with your bug ID or better yet include a link to your bug report itself and I expect you will get others here to vote for fixing it.
I will.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes Will,
Right here:
If you will post back here with your bug ID or better yet include a link to your bug report itself and I expect you will get others here to vote for fixing it.
I will.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
https://connect.microsoft.com/Expression/feedback/ViewFeedback.aspx?FeedbackID=508989&wa=wsignin1.0
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).- <quote>
A monitor cannot display other than a pixel per pixel
</quote>
Not necessarily true Scott.
If resolution is set at the native or optimum for a given monitor, in my case 1280x1024 on a 17 inch Dell LCD then a pixel displays a pixel.
However if I were to lower the resolution to say 800 by 600, then more than one screen pixel would be used to display a pixel in an image.
Sounds nuts but think about it.
Changing the resolution does not change the number of pixels on the screen, it only changes what the pixels are displaying.
If you ever programmed using VS98 ( VS 6.0), I know you remember twips and how many twips in a pixel.
Expression Web MVP - Right, Steve, and in fact I recall the number 1440 with no particular fondness. ;-)
However, I think we're talking apples and go-carts here, and it's probably my fault for not specifying exactly what I was referring to. You are referring to physical pixels, each one represented by an actual semicondictor triad in an LCD monitor, and representing its native resolution, while I was talking about logical pixels, which are determined by the current pixel dimension resolution set for the monitor.
For a CRT, there is no true native resolution in the sense that there is for a solid state monitor, so physical pixels and logical pixels are essentially the same. For solid state monitors not operating at their native resolution they are not the same. However, for either, it is the case that a monitor can only display one image pixel per logical pixel at whatever resolution is currently selected for the monitor, whether solid state or CRT.
BTW, my few experiences running a solid state monitor at other than native resolution pretty well convinced me that it was a bad idea. At least on the few monitors I have done so, image quality stank to high heaven, and text, especially small text, was truly butt yewgly and occasionally unreadable.
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - <quote>
For a CRT, there is no true native resolution in the sense that there is for a solid state monitor
</quote>
Sure there is, it's determined by the number of phospher dots on the screen ( in groups of three ) and the screen mask.
;-)
Expression Web MVP
