Working with Images on the Web, Part 1 - Image File Formats

Whether you are sharing them online, emailing them to a colleague, or putting them on your own website, it’s important to understand a few basics when it comes to image files and sizes. This guide will hopefully save you a lot of hassle when trying to email large images, update your website, and use social media, whether it be for your own personal use or for your business.

Why Does Image Size Matter?

There are a lot of reasons why you may need to reduce the size of an image. First and foremost is file size. If you are sharing images via email, or putting them on your website, you’ll want the image to not take up a lot of space. Most email services limit attachments to 10MB, which these days, isn’t a lot. Some modern email clients, like Gmail for example, give you 25MB, but that’s still small potatoes when it comes to sending and receiving a lot of images.

Your website is even more important. Large files take longer for users to download and view, and can slow down the speed of your website. Plus, if your visitors are on capped data plans, you are forcing them to chew through their data just to download images that are unnecessarily large.

The First Rule of Digital Images and Photos: Keep Your Original!

We’re about to talk about resizing images to make them smaller files, but it’s important to remember that you should always keep a copy of the original image—once you scale down an image, you can’t easily go back. If you purchase a stock photo, or take an image off of a digital camera, save a master version in case you need to backtrack. 

Once you make it small, there’s no going back at all.

This brings us to the next rule:

The Second Rule of Digital Images and Photos: You Can Only Scale Down!

This is super important to remember. If you have a photo, it’s generally pretty easy to reduce the size. It’s much more difficult, and even fair to say nearly impossible, to blow an image up. 

If you have a photo (or any image—for the sake of this guide, we’re mostly going to use the term photo and image interchangeably), making it larger won’t add more detail to the image. Instead, it will make your image look blurry.

Here’s an example. Let’s say we’re starting with a small image of a cafe:

It’s a nice photo, but let’s assume this is the only version we have, and we want to use it as our Facebook cover image, or a large banner on our website. We want people to be able to see the menu items and the text on the sign next to the cash register!

If we make any attempt to increase the size of the image, we don’t gain any of that detail:

Our image looked good at the small size, but it’s really hard on the eyes once we make it larger.

This was a pretty extreme case—you can sometimes get by increasing the size of an image a little bit but as a general rule, you shouldn’t. Just like whittling, you should start big, and work your way down.

Sure, there are some tricks to get a little more detail out of a blurry image, but at that point, you are paying a graphics person to attempt that kind of work for you. I once had someone explain it to me like this—digital imagery isn’t like film. With film, the tiny negative on the film holds all of the details, and as long as you have the original film, you can blow the image up.

In actuality, it is still very similar to how old film cameras work. If you have the original image that was taken with the digital camera, you likely have a massive, fully-detailed image. If the version of the file you have was already resized, however, you can’t scale it back up.

Make sense? 

In short, try to hold on to the largest version of an image, since that’s almost certainly going to have the most detail and give you the most flexibility. For some photographers, this would be called the RAW format—a format that most high-end digital cameras use. RAW images are massive, and usually not used on the web or for sharing—you can sort of think of this format as the original film version of a photo.

You probably won’t run into RAW files very often unless you dabble in digital photography, but we figured it was worth mentioning, and it segues nicely into our next topic.

“Working Image” Formats

Remember how we said that you should always keep your original file? That also includes the “Working” formats.

What do we mean by working formats? 

If you are building a graphic in Photoshop with multiple layers, you may decide you want to go back and edit your work at a later time. If you only save your image as a JPEG or PNG file, you’ll lose the ability to edit the separate layers. This flattens the image. You won’t notice a change visually, but when opening the file back up in Photoshop your work will all be on a single layer and much more difficult to edit.

Most graphic designers have this hammered into their heads pretty early on, but it’s always worth mentioning. If you are working in Photoshop, save your work as a PSD before you worry about saving any other image format.

What Image Format Should I Use?

We’re going to get deeper into image resizing in a moment, but it helps to understand what image formats work best depending on the situation. There are quite a few formats, but there are really only three that you’ll run into the most.

JPEG - Also seen as .jpg, this is the most common type of image file. It’s short for Joint Photographic Experts Group, and was developed to be a small, portable file size while still preserving overall image quality. A JPEG file can hold massively large images—they max out at about 218 square inches at print resolutions. JPEG files tend to have a small file size compared to most other formats, and most image editing software gives you the ability to determine the tradeoff of image detail and quality over file size. More likely than not, you’ll be working with JPEGs.

PNG - This image format is often used for graphics and illustrations, as opposed to photographs. PNG stands for Portable Network Graphics. They can have a fairly conservative file size, but they don’t lose much data or details when you save and compress them. This means their file size tends to be a little larger. One big advantage of a PNG is that it has the ability to have transparency. This is important for logos and other graphics that you might put over a background. PNGs are also really good for high-end illustration, if you are willing to sacrifice a smaller file size for quality and sharpness.

GIF - You might pronounce it like the first three letters of the word “gift,” or like the popular peanut butter brand that choosy moms choose. Either way, the GIF format is designed to be one of the smallest file sizes, but it has some major limitations, and an infamous feature. GIFs are perfect for low-quality, small images. They base their file size on the number of colors in the image—a simple illustration with only a small handful of colors is ideal. GIFs are most effective when you are working with small icons and illustrations, but they aren’t efficient for photos. They support transparency, but not as well as PNG. GIFs really shine because they can be animated. They don’t tend to look as good as an actual video file, and they can’t provide audio, but this feature is pretty unique to the GIF. Unless you are sharing an animated GIF, however, you probably won’t use this format very often.

Image Transparency

What do we mean by transparency? Here’s an example of a simple graphic. If we save it as a JPEG and put it over a tan background, it puts a white box around the image.

If we save it as a PNG, that white box goes away and it lays the graphic over the background color. This works if your original image has a transparent background. Often when you purchase graphics from stock photo sites, this can be the case. A graphic artist could also edit an image to make the background transparent for you. Here’s what our image looks like as a PNG:

This does mean we have to be cognizant of the color and brightness of the background—if our graphic is light grey and we are putting it on a white background, it will be hard to see. Here’s an example:

If we’re putting the same light grey image over a high contrast background (for example, maybe the area on our website we want to place the graphic is dark green), it’s going to look pretty good.

The same sort of thing has to be considered if you are placing the graphic over top of another image - will it be legible? In this case, you’ll want to make sure your background isn’t too busy.

This leaves you with a lot to consider—it never hurts to consult with a graphic designer once you start diving into this sort of thing.

In short, most of the time, you’ll use a JPEG, which does NOT support transparency, and when you need transparency, you’ll use a PNG.

There are newer formats out there, too. The WEBP image format has great potential, but as of writing this, it isn’t widely supported by all web browsers, so it’s a little early to start using it a lot. A new competitor to the PNG is the SVG, which is a scaling image for simple graphics and icons. It’s possible that in a few years, we’ll be seeing more use cases for these formats, but right now, your best bet for 99 percent of your image work will be JPEG, followed by PNG.

In our next blog post, we’re going to go through all of the steps to properly take a large image and resize it and optimize it for the web.