Cropping for Control Freaks
So, your responsible designer has produced your website and equipped you with a handy content management system that allows you to add your own content, including images. You understand why image sizing is important and you checked out my previous article Quick an’ Dirty Image Sizing, but decided that those techniques were not precise enough to do your website justice … you wanted more control. (Don’t we all?)
In this article I will explain how to crop and prepare your images for your website using Adobe Photoshop, our favourite professional image editing software. I will start with the assumption that your thoughtful, caring and responsible designer equipped you with specifications about what size(s) to make your images. In our case we need to make the image 496 pixels wide, and any height will do.
Start by opening Photoshop and then opening your image.
Grab the crop tool.
At the top of the screen you will see settings for the crop tool. For web graphics, you must set the resolution to 72 pixels/inch. Set the width and height to whatever specification you need for your website. In this case, I need the image (original size 1920 pixels x 2556 pixels) to be 496 pixels wide, and the height can be whatever dimension that makes the composition work. I enter 496 in the width box, leave the height box blank, and enter 72 in the resolution box.
Click and drag over the image to define the cropped area.
After the cropped area has been set, the handles can be grabbed to resize it as appropriate to get the desired composition. I like to set the shield setting to 100% opaque so I can see the final cropped image, but if desired you can leave the shield off, or lower the opacity to see the rest of the image.
Double click in the cropped area to crop the image. Your image is now cropped to the right size!
It is now time to save the image specifically for web graphics. The goal here is to strip all non-essential information (metadata) from the image such that it has the smallest file size possible. Go to File>Save for Web & Devices.
This is where you have to decide what kind of file to save. Instead of going into a deep discussion of appropriate file types, I will give you a rule of thumb: Save photographs as JPEG, and any other graphics as PNG-24. (If you would like more information about appropriate file types, this is a detailed article.) Clearly I am dealing with a photo, so I save it as JPEG. I generally choose a compression setting of 65% as it seems to yield acceptable quality and file size.
Press save and you are done! Your image has been cropped and saved to minimize file size. It is now ready to be added to your website.
See more at the Newsletter Archive
ENGAGE YOUR AUDIENCE