The one time you must use a transparent .png image
Choosing images for your website can be overwhelming and confusing. For the sake of simplicity, I’ll start by telling you that you should use the .jpg format (sometimes written as .jpeg) almost every time. Images that are placed on your website as .jpg files display clearly and, just as importantly, can be compressed in advance to be a smaller file size and thus speed up how fast your website loads.
The one exception is the scenario I’ll show here, for which you should use the other image format: .png.
(There are other formats and some of those can be used on websites, but .jpg and .png are the most popular formats.)
The .png image format was developed in the 1990s as an alternative to the .gif image format, at that time very popular. Developing the new .png format circumvented costs of royalty payments that would have been owed to the .gif developers. Originally nicknamed “ping” for “ping is not gif” the format later came to be known as .png, a format that now stands for “portable network graphics.”
Transparency is what makes .png images special
While .png images were celebrated for their greatly enhanced ability to display complex colors, it’s their ability to have areas of transparency that make them suited to special website designs. Transparency in a portion of an image provides a way for a background image or color to show through the image so that a shape or design in the .png image stands out. A .jpg image can’t have transparent sections in an image. Any portion of a .jpg image that is not filled with color becomes white. If you’re placing an image on a white background, it’s fine to use a .jpg file, and I often do. But to place an image on top of a colorful or textured background on your website, you must use an image saved as a .png file with the transparent portion preserved.
A .png image lets the background show through. A .jpg image fills in blank space with white, blocking the background from showing through.
When to use transparent .png images
When I decide to use a .png image on a website, the only reason I do so is because it has the ability to have show-through transparency. But there must be a compelling design reason for that decision because .png images are larger files and load slower on a website than .jpg images. So I have to feel that using them brings such a design improvement to a website page that it’s worth it. Here are some of the ways you might use a .png image on a website.
Your header or section uses an image as its background
A header at the top of a page or a special section that needs to stand out can benefit from bold use of color or images. In those cases, I often use a colorful, abstract background .jpg image like the blue one in the above example. It’s a striking color, but also has some subtle texture to make it interesting. Images that are placed on top augment the message you want to express. If you have an image with transparent sections, such as an icon or a logo, you’ll want to use a .png image with a transparent background so that the background blends correctly with the image on top to the best effect.
Your website pages or sections are in color
Many times you’ll want to use a color other than white for your website pages or for sections. Colors help set the right tone for your website and usually support the color palette of the photos you’re using and your company’s marketing materials. If you place regular photos on top of a color background, the images won’t have any transparent areas that need to show through, so you’ll be able to use .jpg images for photos. The only time you’ll need to use a .png image is when the shape of the image must be delineated, such as for an icon, logo, or illustration or for some kind of decorative effect like a shape, a musical note, an illustration, a colorful line, or a scroll image.
Your footer needs a logo
The footer often uses a color that helps it stand out from the rest of the website page so visitors understand that it is a repeating section at the bottom of each page. If you have a logo that isn’t a square or rectangle, you’ll want to use the .png version of your logo so the background color shows through and the shape of your logo is evident and recognizable.
Example from Jenna and Friends Animal Sanctuary
Here’s an example from my friend Anna’s website for her animal sanctuary, Jenna and Friends. Compare the .png image of the pig with what the .png image looks like in my image drawing program. You can even see that one ear, the tail, and two legs have been left in white for visual interest by the illustrator. Those sections remain white and don’t allow the green background of the footer to show through when it’s placed on the website.
A .png image on a footer for Jenna and Friends Animal Sanctuary
The original .png image
Where to find transparent .png images
My favorite place for free transparent .png images is Pixabay. A keyword search using the word “icon” usually results in some .png files. Canva, another popular image program for do-it-yourselfers, also has options for selecting .png files and even removing the background from your images that you want to upload to Canva to use in your designs. If you’ve designed a logo with a logo drawing program or had a designer create one, you have probably received a .png image as part of the package.
When I open an image in Pixabay, the checkerboard areas of the image show me that this is a .png file with a transparent background. The checkerboard area is where the background color or image will show through.
The checkerboard pattern on a .png image shows that it has a transparent background.
There are many aspects to selecting and optimizing images on your website that can be intimidating for a beginning designer. I often spend more time preparing, sizing, and placing images that go on a client’s website than I spend on the written text. I hope this blog post helps you understand that while you have image choices for your website, you should follow two rules. Use .jpg images almost always. Use .png images sparingly and only for a special show-through visual effect.
