> On 5/10/2012 2:29 PM, Dao wrote:
>> On 10.05.2012 23:23, Jared Wein wrote:
>>> I think it comes down to the intention of the person who created the
>>> image. If somebody chose to make a transparent PNG, shouldn't we
>>> respect that decision and render it the way it was designed?
>> If the result is illegible, that somebody isn't going to applaud you.
>> It's not like that person asked for a dark background.
> Unless they designed the image to be displayed on a dark background.
If there's a reasonable use case for viewing the image standalone, the
best bet is that they designed it for a white background: that's what
you get in every browser besides Firefox 11+.
Put differently, until a few months ago images designed for a black
background wouldn't have worked anywhere, and images designed for a
light background worked everywhere.
I think there's a good argument to assume designers designed for
something that was known to work rather than something that was known
never to work.
> On 5/11/12 12:38 AM, Asa Dotzler wrote:
>> On 5/10/2012 3:40 PM, Boris Zbarsky wrote:
>>> On 5/10/12 5:44 PM, Stephen Horlander wrote:
>>>> If I am designing something that is transparent I design knowing the
>>>> context it will be displayed in.
>>> Right, and for the web that context was "white background" across all
>>> browsers until recently... That's the point.
>>> -Boris
>> Not at all. There are lots of web pages that have a non-white background.
> Yes, but we're talking about cases when an image is loaded standalone.
> I guess there are two ways that can happen:
> 1) "View image" selected by user from an image context menu.
> 2) Actual link to a standalone image on a web page.
> I ran into this largely in the context if (2). The fact that web pages
> can have various colored backgrounds largely affects (1)....
> -Boris
I can't think of a time in recent memory when a site linked me to a standalone image. I do, on the other hand, open images standalone all the time via the context menu. When the new image background doesn't work for me I just do a view image info and look at it there.
> On 11/05/2012 6:42, Asa Dotzler wrote:
>> On 5/10/2012 2:29 PM, Dao wrote:
>>> On 10.05.2012 23:23, Jared Wein wrote:
>>>> I think it comes down to the intention of the person who created the
>>>> image. If somebody chose to make a transparent PNG, shouldn't we
>>>> respect that decision and render it the way it was designed?
>>> If the result is illegible, that somebody isn't going to applaud you.
>>> It's not like that person asked for a dark background.
>> Unless they designed the image to be displayed on a dark background.
> If there's a reasonable use case for viewing the image standalone, the
> best bet is that they designed it for a white background: that's what
> you get in every browser besides Firefox 11+.
> Put differently, until a few months ago images designed for a black
> background wouldn't have worked anywhere, and images designed for a
> light background worked everywhere.
> I think there's a good argument to assume designers designed for
> something that was known to work rather than something that was known
> never to work.
Designers design for how the image will look in their web page. They are not designing alpha png images to be viewed stand-alone. Alpha pngs are basically useless stand-alone. The likely reason that an alpha png image ends up being viewed stand-alone is a user like you or me opening the image ourselves via a context menu.
Indeed, so when viewing an PNG or GIF standalone, you want to see the
alpha part as well, just like in an image editor (such as Paint.net).
So, an option would be use a patterned background like so:
background:-moz-Dialog url(data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEWgoKClpaUr SK7yAAAAAnRSTlNkFG3Yt
+YAAAAPSURBVHheY2D4jxXhEgYAfr8P8SM7T18AAAAASUVORK5CYII=);
This is implemented in my themes: LittleFox, Nautipolis, Walnut,
Walnut2 and Microfox, so install one of these to test this.
(Note, the data url is needed to prevent an image load during the
image load/display...)
On May 11, 9:01 am, Asa Dotzler <a...@mozilla.org> wrote:
> On 5/10/2012 10:40 PM, Gian-Carlo Pascutto wrote:
> > On 11/05/2012 6:42, Asa Dotzler wrote:
> >> On 5/10/2012 2:29 PM, Dao wrote:
> >>> On 10.05.2012 23:23, Jared Wein wrote:
> >>>> I think it comes down to the intention of the person who created the
> >>>> image. If somebody chose to make a transparent PNG, shouldn't we
> >>>> respect that decision and render it the way it was designed?
> >>> If the result is illegible, that somebody isn't going to applaud you.
> >>> It's not like that person asked for a dark background.
> >> Unless they designed the image to be displayed on a dark background.
> > If there's a reasonable use case for viewing the image standalone, the
> > best bet is that they designed it for a white background: that's what
> > you get in every browser besides Firefox 11+.
> > Put differently, until a few months ago images designed for a black
> > background wouldn't have worked anywhere, and images designed for a
> > light background worked everywhere.
> > I think there's a good argument to assume designers designed for
> > something that was known to work rather than something that was known
> > never to work.
> Designers design for how the image will look in their web page. They are
> not designing alpha png images to be viewed stand-alone. Alpha pngs are
> basically useless stand-alone. The likely reason that an alpha png image
> ends up being viewed stand-alone is a user like you or me opening the
> image ourselves via a context menu.
> On 5/10/2012 10:40 PM, Gian-Carlo Pascutto wrote:
>> If there's a reasonable use case for viewing the image standalone, the
>> best bet is that they designed it for a white background: that's what
>> you get in every browser besides Firefox 11+.
>> Put differently, until a few months ago images designed for a black
>> background wouldn't have worked anywhere, and images designed for a
>> light background worked everywhere.
>> I think there's a good argument to assume designers designed for
>> something that was known to work rather than something that was known
>> never to work.
> Designers design for how the image will look in their web page. They are
> not designing alpha png images to be viewed stand-alone.
> That sentence right there pretty much exactly matches how I feel about
> this and is the reason I brought this up.... in particular, I agree that
> its not perfect. We really need to work on that strong AI that will be
> able to make decisions like this in sub-millisecond times. ;)
Here's a simple algorithm for deciding whether to use white or grey. It
would be used only in the case where > 2 corner pixels are 100%
transparent (otherwise, we'd stick with grey):
For each image corner:
Take the corner pixel
while (fully transparent)
move inwards 1px in each direction
take brightness value of pixel
Take brightness value of centre pixel
If a majority of the 5 pixels reached have > 0.5 brightness
grey background
else
white background
We should be able to make this decision quicker than a user can perceive :-)
> On 11.05.2012 09:01, Asa Dotzler wrote:
>> On 5/10/2012 10:40 PM, Gian-Carlo Pascutto wrote:
>>> If there's a reasonable use case for viewing the image standalone, the
>>> best bet is that they designed it for a white background: that's what
>>> you get in every browser besides Firefox 11+.
>>> Put differently, until a few months ago images designed for a black
>>> background wouldn't have worked anywhere, and images designed for a
>>> light background worked everywhere.
>>> I think there's a good argument to assume designers designed for
>>> something that was known to work rather than something that was known
>>> never to work.
>> Designers design for how the image will look in their web page. They are
>> not designing alpha png images to be viewed stand-alone.
Which do you think is the more common case for a designer creating alpha pngs, as part of pages with colored or patterned backgrounds or as standalone images?
It's always easy to find a few exceptions but we shouldn't be designing for the exceptional cases.
> On 5/11/2012 2:01 AM, Dao wrote:
>> On 11.05.2012 09:01, Asa Dotzler wrote:
>>> Designers design for how the image will look in their web page. They are
>>> not designing alpha png images to be viewed stand-alone.
> Which do you think is the more common case for a designer creating alpha
> pngs, as part of pages with colored or patterned backgrounds or as
> standalone images?
The former, but these images also seem less relevant for this discussion -- many of them will look bad standalone no matter what we do.
On Thu, 10 May 2012 23:56:45 -0700, Asa Dotzler wrote:
> On 5/10/2012 9:59 PM, Boris Zbarsky wrote:
>> On 5/11/12 12:38 AM, Asa Dotzler wrote:
>>> On 5/10/2012 3:40 PM, Boris Zbarsky wrote:
>>>> On 5/10/12 5:44 PM, Stephen Horlander wrote:
>>>>> If I am designing something that is transparent I design knowing the
>>>>> context it will be displayed in.
>>>> Right, and for the web that context was "white background" across all
>>>> browsers until recently... That's the point.
>>>> -Boris
>>> Not at all. There are lots of web pages that have a non-white background.
>> Yes, but we're talking about cases when an image is loaded standalone.
>> I guess there are two ways that can happen:
>> 1) "View image" selected by user from an image context menu.
>> 2) Actual link to a standalone image on a web page.
>> I ran into this largely in the context if (2). The fact that web pages
>> can have various colored backgrounds largely affects (1)....
>> -Boris
> I can't think of a time in recent memory when a site linked me to a > standalone image. I do, on the other hand, open images standalone all
I guess you don't visit anime and image forums, or follow some people on
twitter who post raw screencaps.
> the time via the context menu. When the new image background doesn't > work for me I just do a view image info and look at it there.
> On 11.05.2012 11:20, Asa Dotzler wrote:
>> On 5/11/2012 2:01 AM, Dao wrote:
>>> On 11.05.2012 09:01, Asa Dotzler wrote:
>>>> Designers design for how the image will look in their web page. They are
>>>> not designing alpha png images to be viewed stand-alone.
>> Which do you think is the more common case for a designer creating alpha
>> pngs, as part of pages with colored or patterned backgrounds or as
>> standalone images?
> The former, but these images also seem less relevant for this discussion -- many of them will look bad standalone no matter what we do.
I think images with transparencies taken out of their original context are going to look strange no matter what we do (unless they were designed for white or black backgrounds and we happen to have the appropriate one).
For the dark background I'm going to suggest something radical: Look at what photo software does to display images. Web sites, photography software, and indeed, physical photography studios employ "light boxes" to display images. This consists of a lighted box (obviously!), with a sheet of white translucent paper over it to diffuse the underlying light and an slide or translucent image overlaid on that. The edges can be blacked out or greyed out to accentuate the image.
So for our images, we could do the same, in order from bottom to top:
1. Matte (provide options for white, grey or dark, maybe with one or two levels in between).
2. White layer (this could extend around the image to form a border)
3. Image
If we're doing this to make the images look better standalone, I think this is how we do it. Note that control of the background color is actually important here because not all images are going to work with a dark background.
Was UX ever consulted on this feature?
>> It's always easy to find a few exceptions but we shouldn't be designing
>> for the exceptional cases.
We should be designing with a goal in mind. "Make images look good in stand alone".
On 2012-05-10 10:40 PM, Gian-Carlo Pascutto wrote:
> If there's a reasonable use case for viewing the image standalone, the
> best bet is that they designed it for a white background: that's what
> you get in every browser besides Firefox 11+.
As a data point only, just yesterday I discovered that Gmail has added a cute feature to their mail composer on iPad (possibly other tablets as well): you can pop up a window in which you can doodle. Whatever you draw gets turned into a .png and attached to the email.
The doodle window shows you drawing on a light-gray background, but the .png that's generated has a transparent background. And back on a desktop machine in Firefox 11, Gmail's "view" link for .pngs loads the image standalone. Result: the same effect Boris was complaining about at the beginning of the thread.
> I can't think of a time in recent memory when a site linked me to a
> standalone image
Interesting. Maybe we read different blogs. ;) The ones I read have a strong tendency to embed graphs resized down, with a link direct to the full-size image.
> When the new image background doesn't
> work for me I just do a view image info and look at it there.
That works for me and you, but seems sucky for users in general. We really need something that works better than that, if we can.
> Designers design for how the image will look in their web page.
And the better ones also for how it will look in print.
> The likely reason that an alpha png image
> ends up being viewed stand-alone is a user like you or me opening the
> image ourselves via a context menu.
I think it _really_ depends on your browsing patterns.
> Here's a simple algorithm for deciding whether to use white or grey. It
> would be used only in the case where> 2 corner pixels are 100%
> transparent (otherwise, we'd stick with grey):
> For each image corner:
> Take the corner pixel
> while (fully transparent)
> move inwards 1px in each direction
> take brightness value of pixel
> Take brightness value of centre pixel
> If a majority of the 5 pixels reached have> 0.5 brightness
> grey background
> else
> white background
> We should be able to make this decision quicker than a user can perceive :-)
For a large image, that may not be the case, because just extracting the pixel data can take a while.
> On 5/11/12 5:18 AM, Gervase Markham wrote:
>> Here's a simple algorithm for deciding whether to use white or grey. It
>> would be used only in the case where> 2 corner pixels are 100%
>> transparent (otherwise, we'd stick with grey):
...
>> We should be able to make this decision quicker than a user can
>> perceive :-)
> For a large image, that may not be the case, because just extracting the
> pixel data can take a while.
Long run, I think I like best the idea of adding some controls to the standalone image view, so the user can adjust the background color as they see fit, or switch to Photoshop-esque checks, or whatever. There are other common problems with looking at standalone images that could be addressed that way, e.g. photos in the wrong orientation.
On Thursday 2012-05-10 18:43 -0400, Boris Zbarsky wrote:
> On 5/10/12 6:02 PM, Justin Dolske wrote:
> >Anyway, gavin and jared and I sat down and talked things through, and
> >we're agreed to try the |img { background-color: white }| approach.
> Sounds good! Should I do white, or user's default background from
> prefs? They're both pretty easy; the latter just needs a bit more
> C++ code.
Given that the reason for doing this is that using non-white breaks
Web content, it seems like the right thing is to use white.
> On Thursday 2012-05-10 18:43 -0400, Boris Zbarsky wrote:
>> On 5/10/12 6:02 PM, Justin Dolske wrote:
>>> Anyway, gavin and jared and I sat down and talked things through, and
>>> we're agreed to try the |img { background-color: white }| approach.
>> Sounds good! Should I do white, or user's default background from
>> prefs? They're both pretty easy; the latter just needs a bit more
>> C++ code.
> Given that the reason for doing this is that using non-white breaks
> Web content, it seems like the right thing is to use white.
> -David
What do you mean, "using non-white breaks Web content"? If you choose View Image, you get just that one image by itself in a tab, and it never looks broken to me.
> What do you mean, "using non-white breaks Web content"? If you choose
> View Image, you get just that one image by itself in a tab, and it never
> looks broken to me.
As mentioned elsewhere in this thread, the issue is with web content that links directly to transparent images that do are not properly visible against dark backgrounds, for example the link when you click the chart on this web page:
http://www.cdc.gov/nchs/data/databriefs/db88.htm
Nonsense. Battery life is only an issue with portable devices, most
of which use LCD screens, and the screen backlight is either ON or
OFF, regardless of what's being displayed on the screen. This MIGHT
be an issue for handheld devices that use OLED displays, but I can't
think of any currently on the market. I'd be very surprised if this
was even a consideration when the standalone image presentation style
was changed in Firefox/SeaMonkey.
> On 05/12/2012 11:21 AM, EE wrote:
>> What do you mean, "using non-white breaks Web content"? If you choose
>> View Image, you get just that one image by itself in a tab, and it never
>> looks broken to me.
> As mentioned elsewhere in this thread, the issue is with web content
> that links directly to transparent images that do are not properly
> visible against dark backgrounds, for example the link when you click
> the chart on this web page:
> http://www.cdc.gov/nchs/data/databriefs/db88.htm
I see. So, you would be better off just downloading the image.
> I see. So, you would be better off just downloading the image.
The image looks exactly as broken if you download it as compared to
viewing it online.
Or did you mean downloading and then looking at it with *other* software
that defaults to a white background? That's pretty much confirming that
Firefox's current behavior is wrong.
On Sun, May 13, 2012 at 7:30 PM, EE <nu...@bees.wax> wrote:
> On 2012-05-12 15:53, Matt Brubeck wrote:
>> On 05/12/2012 11:21 AM, EE wrote:
>>> What do you mean, "using non-white breaks Web content"? If you choose
>>> View Image, you get just that one image by itself in a tab, and it never
>>> looks broken to me.
>> As mentioned elsewhere in this thread, the issue is with web content
>> that links directly to transparent images that do are not properly
>> visible against dark backgrounds, for example the link when you click
>> the chart on this web page:
>> http://www.cdc.gov/nchs/data/databriefs/db88.htm
> I see. So, you would be better off just downloading the image.
Yep, he'd be better off, if he wouldn't be using
Firefox. Is that the message? 'coz that's how it
sounds. You're suggesting Chrome, for instance,
if that's a use case?
Honestly, I don't quite get what's that brickering
is all about. It's obvious (to me), that some pictures
look bad, if the background is dark. I haven't yet
seen a transparent stand alone pic, which looks
good on a dark background; or, at least, the vast
majority looks good on bright backgrounds.
