How to Work with Web-Based Images, Part 1: File Types

If you operate online at all, being able to properly manage your pictures is extraordinarily useful. This week, we’ve put together a guide that will hopefully give you the information to understand the basics about manipulating images for use online. 

Yes, Image Size Matters

Of course, there are many reasons that you may need to reduce the dimensions of an image. The obvious one is for storage. The larger an image is, the more disk size it will take up. Some platforms like social media and email won’t accept images that are too large. In fact, most hosted email services limit any attachments to around 10 MB or .01 GB. Some of the better ones like Gmail or Outlook will extend those capabilities, but most won’t go over 25 MB or .025 GB. That’s not exactly a massive amount of data. 

When creating images for a website, images that are larger will take longer to view, and can often have consequences to the formatting or the speed of your entire website. Additionally, if your visitors have a capped data plan, you aren’t doing them any favors with large image sizes. 

Be Sure to Keep Your Original!

So while we are about ready to talk about resizing your pictures to make them smaller, more manageable files, we would be remiss if we didn’t remind you to always keep your original image. Not only is this often the version with the highest quality, once you scale down, it’s extremely difficult to get that quality back. Here is a rhyme to help you remember:

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

This brings us to the next rule:

You Can’t Scale Up

This is extremely important to understand. If you have a large image and want to reduce its size, you won’t have much problem doing so; but, if you have a small image and want to blow it up, you are in for a rude awakening. Any image you try to make larger will lose resolution as you blow it up. Let’s take a look at an example. We start with a small image of a cafe:

It’s a good photo, but let’s say for the sake of argument it’s the only version we have and we want to blow it up to put it as our Facebook cover image or some other reason. The goal is to show people the menu and the text on the sign next to the cash register.

When we increase the size of the image, blam, it’s a nightmare. You can’t see anything and it just looks unprofessional in every sense of the word. 

Our image looked good at the small size, but now it’s a catastrophe. Sure, this was done for effect and most images won’t get distorted this quickly, but rest assured, they will be distorted, and will look unprofessional. A graphic designer can probably do a lot with this to make it passable, but you are just an average business owner and don’t need to incur huge design fees for a simple social media image or photo on your website.

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. It’s pretty straightforward, but digital doesn’t work that way. When you take a picture with a digital camera, whether it be on your phone or whatever, the image taken will be a large image with a solid resolution. 

It’s best to try and 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 (for the reasons outlined earlier)—you can sort of think of this format as the original film version of a photo.

It’s quite possible that unless you are the photographer, you won’t encounter RAW files very often, but we figured we’d mention it, nonetheless. 

“Working Image” Formats

So keep your original file, and that doesn’t always mean the original, original. Allow me to explain:

When you take a picture, the file size will be huge, so to get it to be manageable you’ll want to resize it (more on that later). When you first resize it to edit it in any fashion, that is called your “working image” and you will want to also keep a copy of that on file. Why? You’ll know when you mess up the alteration on the first image and then you have to go in and resize another copy to work on again. This process can get annoying, so keep your working image to keep from having to retrace your steps. Also, it allows you to add layers onto the file.

JPEG and PNG files, which are typically used as the end result, don’t allow you the ability to build layers. It effectively flattens the image. You won’t notice any difference, but in Photoshop (or any imaging platform) you won’t have the flexibility you will initially. 

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.

So, What Image Format Should I Use?

Let’s quickly go over the image file types you will likely encounter when altering images. 

• JPEG - Also seen as .jpg, it 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

So what does transparency mean when dealing with online images? Below we have 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. Typically you will want to have transparency to an image when you purchase it from a stock image repository, but all capable graphic designers can make an image transparent for you. Here’s what our image looks like as a PNG:

Of course this means we have to pay attention to the color and brightness of the background behind the image. For example if our graphic was light grey and we put it on a white background, this is the result:

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.

We’ve given you a lot to digest, and it never hurts to get a professional in there to help you if you feel you need to. To summarize, most of the time you’ll use a JPEG, which does NOT support transparency, but when you need a transparent image, you’ll likely use a PNG.

Of course there are other formats out there. A WEBP image format has great potential, but as of now, it isn’t currently supported by all web browsers. 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.

Check back for part two of our image editing series later on this week.