If you are a marketer or new to web elements, you might not know the reasons we pick certain image formats. If this is true, you have probably heard someone say, “We always use PNG format!” Maybe you hired a photographer and you looked at their portfolio and said, “We need high quality full-screen photos like these!” Afterward you found that your site became extremely slow and your customers started to complain. At that point it is easy to blame the Content Management System or CMS for the problem rather than the choice of format and quality of the images you use.

Whatever the case may be, we need to understand the reasons we pick the file formats we do to ensure we do not abandon our audiences. And since SEO is always on the mind of a marketer, if our audience is suffering from our image choices as the “swirling ball of infinity” turns to download our nearly 1MB image, you can be sure the bots will take notice as well.

Your website may be the perfect candidate for mostly PNGs because of the design you used. Alternatively, you may also be that photographer or an architecture firm where you audience is willing to wait for high-resolution images because they expect to see your images with clarity. But in most cases our images are second tier concerns and are used to make our pages attractive, draw attention, and set the tone for the content. This is when we should ask ourselves the question, “What format should I use for this image?”

Reasons to Review Image Format Choices

Our audience is the most significant consumer for our website. That may be silly to say, but I have heard the expression far too many times, “I like this type of site,” rather than “Our customers like this kind of site.”

As you embrace modern styles of writing web content and transform from this is who we are to education and entertaining topics, everything on the page should follow this pattern. This means the color, blocks, images, and placement decisions made about your site need to be less about what you like and more about what they like.

Here are some problems you may face where the format of the image matters:

  • Mobile users – Data plans are expensive and cellular networks are still mostly slow.
  • Responsive Websites – Every browser and device is different, but our audiences need to have a first-class experience no matter what they are using.
  • Business versus Residential audiences – If you sit at our office and use our Google Fiber connection with 1GB download and upload speeds, you might not ever be concerned with file size. This is not a reality for everyone. In fact, did you know there are still dial-up users?
  • We want animations – while this is typically not a B2B problem, some sites need animation without JavaScript, Flash, or video rendering. With Facebook embracing animated images for memes, this has become a topic again. If you want to put the construction guy digging on your site like we did in the mid-90s, please stop reading this article, I cannot help you. Just kidding.
  • New Customers – We only have one chance to make a first impressions. If our users are asked to wait in line every time they load a page while we string together our 1s and 0s to make beautiful pictures, we can be sure they will grow tired. If the image doesn’t amaze them, you will just leave them saying, “I waited for that?”
  • Drawings versus Photographs – Simple images with a limited complexity may be ten times larger than they should be because you chose poorly. Vice versa, pictures with a lot of colors may be 10x what they should be because you chose a format that was verbose in the way it writes the bytes.
  • Transparency – Unlike a die-cut sticker, all images have a rectangular shape with a width and height. We still need the effect a die-cut sticker has to pop off the page. Also did you know colors in an image render differently than CSS colors in your browser if the color profile is different? This means we need less background color in our images and more transparency so we don’t have the weird floating box borders.

 

 

Channel Your Inner Geek for a Moment

I am going to start talking about bits and bytes for a little bit so I want to make sure we are on the same page. Bear with me.

  • Pixels – This is a point in an image represented by one color. If I have an image that is 10 pixels wide and 10 pixels tall, the image will have the total capacity of 100 pixels that could be represented by 100 different colors.
  • 8-bit color – When I say 256 colors or 8-bit, what I am talking about is the way the color of the pixel is stored in the file. A bit is either a one or a zero. 256 colors is stored at 3 bits for the color red, 3 bits for green, and 2 bits for blue, bring the total to 8 bits or one byte.
  • 24-bit color – We get more bits to represent the color as we move up. Rather than 3 bits for red and green, we get 8 bits for each color channel. This means we can have over 16 million color options for each pixel.
  • Lossy/Lossless Compression – When the image is saved using a lossy compression, the data is permanently changed when it is compressed, leaving the original information lost after manipulation. Lossless means the original image is still intact after editing and could be restored.

What is a JPEG?

This is an image compression format created for photographs to allow for a smooth transition of tones and color. JPEG stands for Joint Photographic Experts Group which was the committee that formed the standard in the late 80s. JPEG is typically stored using the .jpg file extension and is the default file type for most digital cameras and phones.

JPEG files are typically stored using a lossy compression. If you plan to use the image for multiple versions of the document, it is best to keep a copy of the original and use it as a base since each save after the first has less information.

JPEG images do not support transparency so if they are needed to blend with another picture, the background color will have to be applied to the file.

What is a PNG?

The PNG format was created to replace the GIF format due to the limitation of 256 colors and provide an alternative to JPEG for colorful images on the web. PNG stands for Portable Network Graphics due to the primary support of the web using RGB colors, rather than CMYK typically used for print.

PNG was published as an ISO standard in 2003 and has been adopted by every modern web browser. If you have been involved with web content for over 6 years, you remember the time when the world was ruled by JPEGs and GIFs. PNGs allowed for designers to generate new images that support more colors and moved us past the world of “web safe” colors.

The “magic” that makes PNGs work better from drawings or images with fewer actual colors involved is the way data is stored. The best analogy I can come up with is our use of symbols on maps. Rather than repeating the description each time it is used, we leave a symbol and create a legend of definitions. When you run up against a symbol you don’t know, you can refer to the legend to get more information. With PNG, the color is stored in an index that can be referenced rather than repeated over and over.

What is a GIF?

Some folks would have dismissed the GIF after the PNG was created and finally supported by browsers, but it is still holding its ground in the top three. The main reason is it is the only format of the three that natively supports animation. In fact, in late spring of 2015, Facebook modified their newsfeed to support animated GIFs because of the popularity of memes with motion. This use allows for support of movement without the need for a video format.

GIF stands for Graphics Interchange Format and was introduced around the same time as the JPEG in the late 80s. Just like PNG, GIF is a lossless format leaving the original format unharmed during compression.

Saving images using GIF should only be considered when lower image quality and motion is required.

When should I use a JPEG, GIF, or PNG?

Now that you know more about image formats than you expected when you woke up this morning and you can’t wait to school someone at your office, let’s go through some examples and decisions you might have when selecting what format to use.

  • Photographs – Photographs are usually defaulted to JPG every time due to the complexity of colors and the placement of the colors next to other colors. The follow-up question you should ask is the quality of the image. The smallest file is what our goal is, so if the image is not front and center showcasing something, some loss of sharpness is OK. There is no hard and fast quality for all images so I would suggest lowering to the point of ugly and working your way back to acceptable.
  • Transparent Images and Computer Drawings – You can pick either GIF or PNG for transparent images and drawings, but the preferred format is PNG. This is due to the expanded color range and support by the modern desktop or mobile browser. GIF has the limitation of 256 colors so only very simple images will be smaller as GIFs than PNG. Types of images would be logos, computer sketches and any other images that need transparency or have a limited number of colors used.
  • Animated Images – GIF is your choice here. Even though the PNG was originally developed to replace the GIF, the paging elements were removed to simplify the format.

In every case, never make a permanent decision about your images because things change. Keep a copy of the original image and the file format of your image editor that will allow you to go back and change your mind. If you are a Photoshop user, this is the PSD format.

The use of a Digital Asset Management tool alongside with your Content Management System may be appropriate for the amount of media you have or the need to share work. Other tools like Dropbox offer a simple share format and the ability to back up in the cloud, with or without using local storage.