Why is there White/Gray/Black Around My Image when I Download?

We are sometimes asked why a png image (a transparent image) has what looks like a box behind the image or a colored background when viewed in your browser.  This is due to settings & how the computer/internet browser you’re using displays different image types.  When you open a transparent image on the site, you may see a white box, black, or grey areas behind the transparent image, this is okay.  Here is an example…

In the video below, we open the same file in two different sample browsers to demonstrate a difference in display.  Then we open those two different images in an image editing program to verify that although they display differently online, the downloaded images are identical and retain their transparent backgrounds.

IMPORTANT NOTE:  You can inadvertently change a transparent png in to a file with a white/black/grey background if you download the image incorrectly.  This often happens if you use keyboard shortcuts and copy/paste an image from the site, directly in to an image editing program… please do NOT do this!  Depending on how your computer/browser behaves with shortcuts, you will NOT be copying/pasting the original, full-size image, in fact, many copy/paste functions by default change a transparent png in to a jpg and you may also be copying over a lower resolution file.  In the video below, watch how my copy/paste from browser to image editing program creates a black box around my once-transparent image.

Best practice for working with individual images on the site, is to click to open an individual image thumbnail to reveal the full size image, then right click to save the image down to your computer.