How to edit images for your website

So you've got a new website and you've been handed the keys to the CMS - from this point forward, it's up to you to create new content to keep your website fresh!

Writing content is challenging enough already, but if you don't have a designer on staff or a retainer to take care of image production, it can be an intimidating task! We're often asked to provide guidance on how to create image assets for websites we've handed off to clients, so we've created an easy, step-by-step guide to help you out. While this article will not cover how to pick which images to use on your site, it will provide guidance on which software you can use, and how to appropriately resize, export, and optimize your images.

Which image editor should I use?

This is frequently the first question we're asked after handing off a website. Indeed, if you're not an experienced designer, this can be an intimidating decision to make. There's a large number of options out there covering a range of price points and capabilities. If you already have a preferred application that's licensed, it makes sense to use that. However, if you're not sure where to start, this article will be covering usage of Adobe Photoshop Elements. It's photo editing software made simple enough for anyone to be able to edit and create images. At the time of this writing, a free 30-day trial is offered, followed by a reasonable, one-time purchase of $99.

Download and open your image

After purchasing or selecting the free trial, you'll need to run the installer. From there you can launch the application and select "Photo Editor" from the start screen, and open the image you'd like to edit using File > Open.

Optional: Touch-up

At this point, you can do any touch-ups that may be needed using these tools or others. Shown are three of the more common touch-ups. The Eye and Teeth tools are specifically for pictures of people. The Spot Healing Brush is useful for removing smudges or other imperfections in any kind of image.

Optional: Color and Tonal Balance

When you’re satisfied with the touch-ups, it’s a good idea to look at the color- and tonal balance of the image to make sure it’s neither too dark nor too bright.

Choose Enhance > Auto Levels

or, for more control, choose Enhance > Adjust Lighting > Levels

Adjust the sliders until you’re satisfied with the lighting. (Often a good setting is to slide the left (black) slider to the right until it’s a little bit inside the left edge of the “hill” in the Levels histogram. Slide the right (white) slider to the left until it’s a little inside the right edge of the “hill.”)

Resize and Crop

Crop the image to the final size specified in your website’s Content Management System (e.g., Craft or Wordpress). Select the crop tool from the left toolbar. In the lower left, choose “Custom” from the Crop dropdown. Enter the width and height values specified in the CMS (e.g., W: 3, H: 2). In the lower right, make sure there is nothing specified in the Resolution field. If there is a number there, delete it and hit <Return>.

In the photo area, you should see a box that previews the cropped image. You can move the whole box up or down, left or right, and you can also drag the corners of the crop area to make it smaller or larger. The shape will be constrained to the correct proportion you’ve already specified. Move the crop around until you have the part of the image you’d like to see in the final image, and then click the green check mark.

Export

Choose File > Save for Web. For most images, you’ll choose JPEG as your image type and a quality setting of 60. Some images are smaller or look better as PNG format instead, so you can experiment with that setting if you don’t like the effect of the JPEG compression. PNG format also supports transparency, so if your image has a transparent background (like a logo, for instance), you’ll need to use PNG.

In your website’s CMS, the image field should have a note about the minimum necessary pixel-width of the image (e.g., 1200px). Enter this number into the Width field under “Image Size.” This is a very important step in order to keep your website performing optimally — it helps avoid visitors wasting time and bandwidth downloading images that are larger than they need to be.

When you’re happy with the image settings, hit the Save button. Name the file without spaces in the file name. Ideally, you should use a file naming structure that’s consistent with other images in use on the website.

Optimize

The final step of this process is optimization. If the image you exported above ends up having a file size larger than 300kb, we recommend further optimizing the image using TinyPNG, the process is simple!

Visit the link above and drag your image into the area at the top of the page.

The optimization process will run immediately — once it’s complete, you’ll have the option to download the individual file, or, if you uploaded more than one, download all in a batch.

Use these optimized files to upload into the CMS!

How to edit images for your website

Next Article