214965 - View checkered background for stand-alone transparent images

Status: RESOLVED INCOMPLETE

(Core Graveyard :: Image: Painting, enhancement)

Description

[Brian 'netdragon' Bober]

When viewing images with transparencies that aren't part of the page, we should
be able to see a checkered background that shows us the image has a
transparency. This is perhaps something we could toggle on and off. The
checkered background is akin to what you see in Gimp or Photoshop.

Comment 1

[Brian 'netdragon' Bober]

Attachment: Here is a GIF with a transparency

Comment 2

[Brian 'netdragon' Bober]

Attachment: Here is the same image within photoshop

The first attachment was how it looks in Mozilla/Firebird. The second
attachment was the checkered background of Photoshop.

Comment 3

[Brian 'netdragon' Bober]

By "How it looks in Mozilla", I mean click it and you will see how it looks :-)

Comment 4

[Boris Zbarsky [:bzbarsky]]

.

Comment 5

[Jasper Lieber]

I have been trying to track down a problem with gif's and transparency.

See the thread at bug 201198.

I wanted to mention that the attachments to this bug (214965) are an excellent
pair of images that demononstrate the transparent gif image problem.  With my
version of mozilla, I see
  *  the first attachment, the gif image, will refresh incorrectly, with
banding, if you make you browser window small enough that scrolling is necessary.
  *  the second attachent does not have display problems

I now want to propose that at least one significant key to bug 201198 has to do
with the transparency flag for gif images.

-cheers

(i'm still chasing down some examples of 201198.  for now, you can see another
simple example at www.humboldt.NOWORMS.edu/~jhb7001 if you remove the no worms)

Comment 6

[Patrick Storz]

Attachment: Screenshot of Firefox with (in my opinion) perfect display of images

I also think a checkered background would be great. It's the only way to really make transparency in images visible and it has a reason every image editing software implements it (even Wikipedia uses a checkered background on mouseover for transparent images).

I've attached a screenshot of Firefox with (in my opinion) perfect image display to show what could be possible. It lightens the background a bit and adds a little box shadow (synchronizing it with the internal video player pages). By default the background of the image itself is perfect white because that looks best for most images. On mouseover however the background of the image will change to checkered allowing to inspect any transparency in the image or to aid the rare cases were an image uses white text on transparency. The image page looks modern while not being flashy.

All this was done with only a little bit of CSS put in userContent.css. I'll attach it so you can review the result on your own.

Comment 7

[Patrick Storz]

Attachment: userContent.css that was used to capture the above screenshot

Comment 8

[John Drinkwater (:beta)]

(In reply to Eduard Braun from comment #7)
> Created attachment 723139 [details]
> userContent.css that was used to capture the above screenshot

This has bit-rotted now —for people arriving here— you’ll need to replace img.decoded with img.transparent

For my tastes, I have it default to transparent background, enable checkerboard on hover.