The Graphics Governess: Image optimization part 2, web

The Graphics Governess:
Image optimization part 2, web

June 21st, 2012

Hello and welcome to part 2 of 3 of our image optimization series. As of last week, you had decided what you were prepping your images for, and as a result, what resolution they needed to be at. If you need to prep your images for web, this week’s lesson is for you! It may seem as though there are a lot of steps to follow, but after your first few tries the process will go a lot more quickly. Let’s get started!

This is the second part of the resolution puzzle. You need to know what width and height your image needs to be. Your blog or website etc. will help determine that for you – some sites such as Facebook will even provide you with the dimensions you need to help take the guesswork out of it. Let’s say, for this exercise, that you’re working on an image you want to post on your blog. Let’s say that your blog column is 600 pixels wide; this is, therefore, the ideal (and maximum) width your image can be. Let’s say, as an added requirement to the exercise, that you also need the image to be 450 pixels high. If you aren’t able to upload a correctly-sized image, it will get squished/stretched/re-sized by the website in an attempt to make it fit. If you’ve ever noticed an image looking weird online, an incorrectly-sized image is often the culprit.

Unless your image happens to be perfectly proportioned to fit exactly into whatever you’re preparing it for, you’re going to have to make some decisions about cropping. In this example, we want a final image that is 600 pixels wide by 450 pixels high. I want my image to fit the full width of the blog column – so in this case, the width is non-negotiable. This means that once I’ve adjusted the width, I will then have to crop my image to achieve the height requirement – otherwise the image will either squish or stretch. We don’t want that. No squishies or stretchies! Depending on your situation, always start by determining whether the height or the width is non-negotiable, and then work from there.

Open your image in Photoshop. (This is my trusty go-to program for all bitmap graphics work – there are others out there, so feel free to use/obtain what is possible for you. You can get a 30-day free trial of Photoshop here.) Our first order of business will be to assign the correct resolution to our image.

1) Go to Image > Image size

Here is a photo of everybody’s favourite poster girl, Panda. Take a look at the number in the resolution box (5th box down). If it’s already at 72, great – you can skip the next few steps and pick up again below at item 6. If your image’s resolution is not set to 72, this is where we need to start.

2) Deselect the box at the bottom that says “Resample image”

If this box is not deselected, the pixel dimensions of the image (top two boxes of the Image Size dialogue box) will also adjust as you adjust the resolution. We don’t want to do this – we want to be able to adjust the resolution and the pixel dimensions independently of each other. So make sure this box is deselected before continuing.

3) Type “72″ into the resolution box

4) Hit OK

Visually, nothing will have changed, but your image is now at the correct resolution for web. Hooray! Next, let’s tackle the dimensions of your image.

5) Go to Image > Image size

6) Select the Resample Image box

It’s important that the Resample Image box is re-selected so that we can access the pixel dimensions at the top.

7) Enter the non-negotiable aspect of your image into the corresponding pixel dimensions box

It may be either a width or a height. In this case, we will type in 600 in the width box. Notice how as you type in the width, the number in the height box will adjust accordingly. This is good. We want a nice, proportional image that looks exactly like the original. What was that motto again? Right. No squishies or stretchies.

If the number in the height box is not changing as you type, make sure the Constrain Proportions box is selected.

8) Hit OK

Photoshop has now resized your image. If it’s looking a little zoomed-out on your screen, double-click on the Zoom Tool (at the bottom of the Tools palette) or go to View > Actual Pixels to see it at its correct size.

Now our image is at the correct resolution AND the correct width. We’re almost there! The only thing we need to do now is adjust our image’s height to 450 pixels. There are a few ways to go about this – my preferred route is via the Marquee tool, because it allows me to see the area I will be cropping to and to move my selection around until I’m happy with how it looks.

This next part may look like a lot of work but it’s really just a lot of description and preliminary setup. Once you’ve gone through the process a few times, it will go by lickety-split.

9) Go to Window > Info

This opens up the Info palette. This will allow you to monitor the size of your selection.

10) Go to Photoshop > Preferences > Units & Rulers and set the rulers to pixels

Alternately, you can right-click on the rulers along the edges of your document and select “pixels”. If you don’t see rulers along the edge of your document, go to View > Rulers.

11) Select the Rectangular Marquee tool in the Tools palette, or hit M

Click and drag the Marquee tool to make a selection rectangle anywhere on your image – don’t let go of the mouse.

13) Hold down the space bar and adjust the position of your selection

While still holding down your mouse, hold down the space bar and use your mouse to drag your selection to the far left edge of your image.

14) Let go of the space bar and extend the width of your selection

Still holding down your mouse, let go of the space bar and extend your selection to the far right side of your image. Your selection should now span from one edge of your image to the other.

15) Adjust the height of your selection

To achieve the right height, continue to hold down your mouse (almost done!) and drag your rectangle either upwards or downwards while watching the numbers in the Info palette. Make sure to maintain the width all the way across your image while you are doing this – the Info palette should always say that your width is 600 pixels. Once you’ve hit a height 450 pixels in the Info palette, you can let go of the mouse. Don’t worry, you still have time to move the selection afterwards.

16) Using the arrows on your keyboard, move your selection up or down

Be sure not to move the left or right arrows, otherwise you will lose the correct width of your image. Move your selection up or down until you are happy with how it looks.

17) Go to Image > Crop

And voilà! You have an image that is set to 72 dpi, is 600 pixels wide and 450 pixels high. No excessive weight to slow your website down or chomp on your bandwidth. No stretchies or squishies. Brilliant! If you like, take some time to do some photo retouching. Then, you need to save it.

18) Go to File > Save for Web & Devices

This part could be a whole other lesson, so for today let’s keep it simple. Take a look at the right-hand dialogue box. Since this is a photograph, we’ll want to save it as a JPEG. The other item you want to pay attention to is quality. To keep your images looking as decent and un-crunchy as possible, it’s preferable to stay above 80. I like to keep my images at 100, but I always take a peek at the bottom left corner of the dialogue box to see how heavy my image is, just in case. You can select from a variety of internet connections to see how fast your image will load at what speed.

Save your image to the appropriate folder, go upload it, and prepare a few more! Or, have a snack first. Web prep builds up an appetite.

Any questions or feedback? Please don’t be shy! See you next week, for our final installment: print.

Hugs and kisses, the Graphics Governess.