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.
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.
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:
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.
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.
Let’s quickly go over the image file types you will likely encounter when altering images.
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.