Resize Images for Your Website

Gallery Management: Step by step instructions on how to resize images for your website

Good images are the chief asset on any art website. With this tutorial you are going to learn how to optimize your images, while keep them looking great and loading fast. We will be using Photoshop, but you can do this in Photoshop Elements as well. There is also information on how to use a free on line tool to reduce the size of your images.

Optimizing is a term used to indicate a change to a photo, reducing both visually and in file size. For an Artbiz website I ask clients to resize visually to 800 to 1000 pixels, with a file size no larger than 100 to 150 kilobytes. This will create an image that fills the screen of most monitors and loads fast.

Your job is to try to get the image file size down, while retaining acceptable image quality. The lower the quality the more compression is applied to the JPEG. And the more the amount of compression, the smaller the file size will be. But if you go too far, reducing the quality by compressing the image too much, it will also reduce the photo quality. Balance is the key, it is better to have a smaller image with good quality, than a larger image with poor quality.

Before we start the resize process we are going to embed our copyright and image information into our photos using Photoshop. By attaching copyrights, image descriptions, your name and or contact info, you are helping to protect your images where ever they go.

How to create and save file descriptions and metadata

To access the image metadata in Photoshop or Photoshop Elements, go to File > File Info.
You need to have an image open in editor in order for the File info link to be accessible

Image file info template in Photoshop

As you may want to enter the same or similar information for every image, you can create a metadata template.

On the screen shot above, I have filled in the information I want attached to this image, including keywords. You can also fill in your contact information under the IPTC tab. This could include your website, email and can go so far to include your address and phone number.

Export and save it as template, then later import, to use with other images. Once imported, just change the name of the piece in the Document title and Description.

First we will create and save the Metadata Template

1) With an image open in Photoshop – Go to File > File Info.

2) Enter the information that you want in the metadata template, and delete any existing unwanted data. For example, enter your name, description of the piece (name, size, medium) and copyright information. Copy and paste the copyright symbol (©).

3) Export the metadata using the Export option in the drop-down menu at the bottom of the window.

5) You can change the name of the template file, such as your_name_template.xmp.

6) Click Save.

Now to apply the Metadata Template to another image

1) Open the image in Photoshop, that you want to apply the template to and then go to File > File Info.

2) Select Import on the drop-down menu at the bottom of the window.

5) Select the template file, such as your_name_template.xmp.

6) Click Okay and save your image.

Your information is now attached to the jpeg where ever it goes. The image title and descriptions will be automatically extracted and filled into the title and description boxes when uploaded to a NextGen Gallery.

While you are able to add image descriptions in earlier versions of Photoshop Elements, depending how old the version is, you may not be able to export and save a template. You should, however, be able to add File Info to images individually.

Resizing Images

Using Photoshop or Photoshop Elements

Open the original full size photo you want to resize in either Photoshop or Photoshop Elements editor workspace. If you have not already done so now would be the time to apply the metadata template and save your image so that the data is embedded into your original jpg. To start, we will be working with your original full size image.

Go to Image>Resize>Image Size  OR   Image>Image Size depending on your version.

Image Size Menu Item in Photoshop

A window similar to the screen shot below will open.

Image resize dialogue box

Make sure the three options shown, Scale Styles, Constrain Proportions, and Resample Image are all checked.

By default, the resample type is Bicubic; if your Image Size window shows a different option, click the drop-down arrow and choose Bicubic or Bicubic Sharper (best for reductions).

Type either the width or height you desire into either the Width or Height fields shown above. Typically I select 800 for the largest dimension and then the other will automatically be inserted because I checked the Constrain Proportions box.

Click OK.

Tip: while you are resizing keep an eye on the file size and try to reduce as much as possible without losing image quality.

Remember we are working with your original full size image and saving will over write the image size!

Save your image using SAVE AS from the file menu and rename it to something like Your-Name-art-name.jpg. Save it to a new folder that you created to store the images you will be using on the web.

IMPORTANT: When renaming your images DO NOT use any punctuation in the name. This includes , ; ” ‘ . etc and © symbol. You can use dashes – or underscores _ to separate words. Underscores are seen by search engines generally as “word combiners”, and hyphens are seen as “word separators.” Failing to remove punctuation and spaces between words will result in corrupt image files that can not be read by NextGen Gallery.

When performing the Save As you will prompted to select options. The only thing you have to check here is that the Quality slider is set to 12 by sliding the bar as far right as possible. Then click okay and name your newly resized image.

jpg save options in Photoshop

Your newly named image will now be open in the editor and your original, safely tucked away.

OPTIONAL: Since resizing a photo almost always reduces its clarity a bit, it’s a good idea to use the Unsharp Mask filter to sharpen it a bit.

Go to Filter >Sharpen > Unsharp Mask
Enhance> UnsharpMask in Photoshop Elements

Sharpen filter menu in Photoshop

Using the unsharpen mask in Photoshop

Start with the values show above: an Amount of 58%; a Radius of 0.9 pixels; a Threshold of 1 levels. Be aware that you can definitely overdo the sharpening process; if you start to see white lines (halos) around objects in your photo, you know you’ve gone way too far.

Click Okay, then with the image still open, move on to optimizing the image

Optimizing Images for the Web

Choose File>Save for Web & Devices (Photoshop)
Choose File>Save for Web (Photoshop Elements)

The Save for Web dialog box (shown below) allows you to preview the effects of the optimization options, while comparing it the the original.

Save for web and devices in Photoshop

The screen shot above is the image open in the Save for Web screen.
The original is on the left and a preview for the optimization is shown on the right.

You have already resized and sharpened the image but if you want to reduce the pixel size again, you may do so by entering in the size in pixels.

Select jpeg from the drop down menu, this is the best image format for photographs.

Work with the drop down menu to choose a level of quality (low to maximum) while previewing your resized image on the right. You can also use the “Quality” slider to drag the bar for reduction.
While you are resizing keep an eye on the file size and try to reduce as much as possible with out losing image quality.

Select the metadata you want to have embedded in the image. I usually select “All Except Camera Info”. If you are a photographer you may wish to include this. In that case select “All” from the drop down menu.

Click save and on the next popup, navigate to the folder that you created for your website images and over write the image file of the same name. Photoshop will prompt you to “replace” the file with the new one, click replace.

When the screen closes you are taken back to the main screen where you can close the image. There will be no prompting to save this image because you just did.

Saving the File Info in older versions of Photoshop

Older versions of Photoshop will not embed your file during the “Save for Web” process.

After you have optimized your image, open it again in Photoshop and add your file info. This process will bloat your image size sometimes doubling it. We need to reduce the file size by using the “Save As” command under the file menu.

  1. Open the resized image that has the meta data
  2. Under File click on “save as”
  3. You will be prompted to overwrite the existing file, click ok
  4. the next dialogue box allows you to reduce the file size – see image below
    1. In the image options set the quality to 9 or 10
    2. Check the file size number which you can see under the preview text on the right.
    3. Leave the other settings as they are.

The link to purchase the latest version of Photoshop Elements and easily optimize your images
Photoshop Elements $119
You do not need the full version of Photoshop ($600).

Resize your images online

Online free photo editors that you can use for free to resize your image and add a watermark.

This is an online tool provided by shrink pictures

  1. Browse your computer and select your image/photo to resize
  2. Select the new size for your picture –choose a custom size and enter 800 (it will keep the aspect ratio)
  3. Optionally, add an effect to your image
  4. Select output image/picture quality Lower quality means a smaller file- select “Better”
  5. Click “Resize” and wait for the processed images to be displayed, depending on the file size it may take a few minutes.

Once complete, you will be prompted to download the file. I recommend that you use “save as” and rename the file with your name and the name of the piece and put it into a separate folder away from your original images.

Now that we have perfectly optimized images we can upload and manage them in NextGen Gallery.