Valuable Images: Image Editing Basics

Now that we've gone over choosing the best images for your online presence, it's time to start learning some basic image editing techniques. Image files aren't usually ready to be pasted on your website without any editing; often, they're too large in file size, the wrong dimensions, the wrong resolution, or their appearance needs a tweak in color or contrast. These little edits can increase an image's success tenfold, boosting your company's brand and drawing more viewers to your online presence. In this post, we'll go over some basic editing skills that'll raise your image's quality with very little time and effort spent.

Can editing tweaks make that much of a difference to your images? They definitely can; not only can they make your website load faster, but they can look a lot more attractive, sometimes with just the click of a button. Remember the Minneapolis image we used as an example in the last Valuable Images post? Let's see how it looks after carrying out the editing steps we'll go over today. To the left, we have the original image, straight from being downloaded from the Pixabay free image library. To the right, we have the same image after about five minutes spent editing in Photoshop:

Minneapolis-Original-Image.jpg    Minneapolis-Image-Edited.png

In this post, we'll be discussing three image editing topics that are important to consider before uploading images onto your web pages. They are:

  • Changing your Image Resolution
  • Altering your Image Dimensions
  • Enhancing your Image Color


Even if your image has the correct dimensions and a decent resolution, it's always worth checking to see if it could use a boost of color or contrast. Remember, the better an image looks, the more attractive it will be to your viewers, and the more success it will bring your online presence.

The Rule of Size Vs. Quality

Before we dive into the world of image editing, it's important to remember one simple general rule: The higher an image's quality, the larger its file size is likely to be. As we discussed in the previous post, an image's file size is not the same as an image's dimensions. Image file size is like any other file size; it's how much data makes up the file. And, in turn, image file size affects your web page's load time, as it's adding its own data to the loading process.

It's always recommended you use small-sized image files for your website so that they load as fast as possible. Unfortunately, with image editing, you'll often find that you need to sacrifice some quality in order to get that smaller size. But, if no one sticks around to view your slow-loading yet spectacular images, what's the point in even having them? We recommend keeping your images around 100 KB (kilobytes) or less. In our next Valuable Images post, we'll discuss how to export your images to have the smallest possible file size without sacrificing too much quality.

IMAGE EDITING SOFTWARE

First things first, you'll need an image editing software to start doing basic edits of your images. There are a lot of options out there, from free to expensive and from basic to very complex. (We'll be focusing only on pixel-based images in this post, rather than vector-based, and thus we'll focus on photo editing software rather than programs like Adobe Illustrator or Apple iDraw.)

Some operating systems have their own image editing programs already installed, like Window's Photos and Paint apps, or Apple Preview. These programs will do a couple of editing tasks, but not everything you need, and they're as basic as they come. If you prefer to use them for now, just know that you can resize your images using Paint and there are options in color editing using Photos. If you want to learn more details about these apps, or about any other app we discuss here, please leave a comment below, and we'll work on writing a more specific post about them.

From what I've seen, two most popular photo editing software are Adobe Photoshop and GIMP. I myself prefer using Photoshop, but it isn't free, and its learning curve can be on the high side. GIMP, on the other hand, is free, but it can also be tough to get a handle on using. There are many other photo editor options out there, both free and paid, for PC, Mac, and Linux. If you prefer to shop around, here are some links to help you start your search,

The quickest way to learn a new photo editing software is to either have someone who knows the software show you how to use it or to watch online tutorial videos. YouTube is a great resource for finding free tutorials for most photo editing software out there. Other more detailed resources are usually paid but often come with a 30-day free trial. I recommend looking into Lynda and PluralSight for professional, detailed tutorial videos and courses.

In this particular post, we'll just be sticking to Photoshop and GIMP to explain the how-to's of our image-editing tasks.

IMAGE RESOLUTION

Now that we have a couple of photo editing programs to work with, let's start our editing with the image resolution.

It all starts with the pixels. You may remember reading about pixels in our previous Valuable Images post. As a quick recap, pixels (px) are the tiny dots of digital color that, when seen together, form what we see as a full image. We'll continue using the Minneapolis image as an example. As you can see, zooming in on a digital pixel-based image makes it much easier to see the pixels as separate squares of color:

pixels-zoomed-out.jpg   pixel-box-zoomed-in.jpg

A digital image looks grainy or 'pixelated' when it doesn't have enough pixels per square inch. The professional unit of measure for image resolution is, fittingly, 'pixels per inch' or 'PPI' (The term 'DPI' stands for 'dots per inch', and is only meant to be used when printing physical images. But, the terms are often used interchangeably anyway).

There are three typical PPI measurements used in digital image editing, 72 PPI, 150 PPI, and 300 PPI, though you can really use any amount of PPI you want to. The lower the PPI, the fewer pixels the image has, and the less crisp and clear it will be. 

To view your image's PPI (if you're a Windows user) right click your image file, scroll down to 'properties', and then click the 'details' tab. Underneath the 'Image' heading, among the image's dimensions and other info, you'll find the image's PPI (listed as DPI). If you're a Mac user, right click or ctrl-click your image file and select the 'Get Info' option to find your image properties.

Finding-Image-Properties.png  Finding-Image-Details.png 

Image Resolution in Photoshop

You can edit your image's resolution in both Photoshop and GIMP. In Photoshop, you can select your preferred resolution immediately as you create a new document, as seen below. You can also edit your current image's resolution while editing the image by selecting 'Image' from the top menu bar and then scrolling down to 'Image Size'. You'll then see a similar setup as creating a new file, in which you can edit your resolution's PPI.

Photoshop-Image-Resolution-Create-New-File.png

Image Resolution in GIMP

When creating a new image in GIMP, you need to select 'advanced options' in order to type in the resolution you want off the bat. You can also change your PPI during editing by clicking 'Image' in the top menu bar, then scrolling down to 'Scale Image'. You'll then see a similar setup in which you can edit your resolution's PPI:

GIMP-Create-Image-ppi.png

IMAGE DIMENSIONS

Image dimensions are the weight and height of a given image. They can be measured in various units, including inches, centimeters, pixels, points, picas, and percent. Each unit of measurement can be converted to another; for example, there are about six picas in an inch. The typical western measurements for image dimensions are inches and pixels.

When thinking of dimensions in pixels, think of your computer screen. The standard screen today is 1920 by 1080px or pixels. So, if you have an image that's 360px wide, it'll be relatively small on your screen (and the file size will be less). If your image is 6,000px wide, it'll most likely be bigger than what you need for your website (a lot bigger).

Many website tools today automatically resize your images for you, which can be very handy, but it can also come with a price of added load time. So, if your tool does this, you can upload an enormous image onto your website, and it can be automatically converted displayed as a more normal-sized image. There are a couple of problems with this approach, though; the first is that your image still has all of its original data, which is bigger than it needs to be, thus slowing down your page's load time more than is necessary. The other problem is that your website tool is having to work and automatically convert your image every time it's being displayed to another website visitor. This can also take up some valuable load time, especially if it's making a vast change in the image's dimensions. I recommend setting your image's dimensions in your photo editing software prior to uploading it to your website to avoid both of these issues.

You can check your image file's dimensions by following the same steps as in viewing its resolution. It's actually usually listed right next to it. 

Finding-Image-Dimensions-Windows.png

The Rulers

You can view your image's dimensions in your photo editing software by viewing the software's rulers, which are at the top and left of your workspace. If your rulers are hidden from view, you can make them visible again by clicking the 'View' menu item in both Photoshop and GIMP and scrolling down to the 'Rulers' option.

You can change your rulers' unit of measurement in Photoshop by right-clicking the ruler and choosing what you prefer.

Change-Ruler-Units-Photoshop.png  

In GIMP, you need to go down to the bottom of your window and click the actual unit of measurement to choose a different unit.

Change-Ruler-Units-GIMP.png

Changing Your Dimensions

You can change your image's dimensions in both Photoshop and GIMP by utilizing the same 'Image Size' and 'Image Scale' windows respectively and typing in new values. You can also manually change your image's dimensions by using either Photoshop's 'Transform Tool' (Ctrl+T) or GIMP's 'Scale Tool' (Shift+T) and dragging the corner of your image to where you choose. To keep the image from morphing in either width or height, you can hold the shift button while dragging in Photoshop and the control button while dragging in GIMP.

Getting your image's dimensions to match what works best on your web page may require some repeated saving and uploading to see how it looks. We'll be discussing saving and exporting your images in detail in our next Valuable Images post, but for now, remember to have a copy of your original image on hand, and only edit new versions of that or of your saved Photoshop or GIMP files; don't keep editing and saving the same jpg image file. Otherwise, your file will continue losing quality every single time it's edited.

IMAGE COLOR

One of the most rewarding parts of editing an image is improving its color. That's what makes the 'before and after' images of Minneapolis earlier in this post so satisfying; the colors and light really jump out when you see how much further they can be pushed from the original image. Even if you think your original image looks fine, it's always worth checking to see if it can look better. Remember, your images will be more successful if they're more attractive to your users.

Editing Color Manually

Most photo editing software has both manual and automatic options for editing color.

In Photoshop, you need to look no further than the 'Adjustments' toolbox on the right hand side (see below). You can also access these options by clicking the 'Image' menu option and scrolling down to 'Adjustments.'

Photoshop-Adjustments-Box.png

In GIMP, you can access these settings by clicking 'Colors' in the top menu and choosing what option you'd prefer to edit:

Color-Options-GIMP.png

If you click in either set of color editing options, you're given sliders and previews to see how your image will look with your newly input values. It's worth moving your different sliders to see what will work best, but don't forget about that nifty Ctrl+Z to undo your last action. And, save different versions often!

Editing Color Automatically

If you're in a hurry, or you just want a great place to start from, automatic editing options are available in both sets of software.

PHOTOSHOP

Do you remember those 'before and after' images at the top of this page? That color difference was made in about ten seconds by clicking Photoshop's 'Auto' option in their 'Brightness and Contrast' editing box.

Auto-Brightness-Contrast-Photoshop.png

Photoshop has a few other 'auto' options to change the image's color appearance, which you'll find by clicking around in the menu options and toolbars or by watching some Photoshop tutorial videos. I find the 'Brightness and Contrast' auto button to be the best place to start in seeing how much better my image can potentially look. Sometimes, it's all I need to do to improve an image's color before uploading it.

GIMP

GIMP has many auto-options like this as well. A similar one can be found in their 'Brightness-Contrast' option box by clicking 'Edit these settings as levels' followed by 'Auto' on the next option box that comes up.

GIMP-Auto-Brightness-Contrast-Step-1.png     GIMP-Auto-Brightness-Contrast-Step-2.png

GIMP also has extra auto-editing features that can be found in various menu options, such as under the 'Colors' drop-down menu.

THANKS FOR READING!

These three quick and easy image editing techniques can make a world of difference for your images' success. Be sure to ask any questions in the comments, and keep an eye out next week for our upcoming Valuable Images post, where we'll discuss keeping your image quality while reducing its file size.