Resize Images

The first thing you have to do in preparation to add content to your site is to optimize your images. Optimizing is a term used to indicate a change to a photo or a graphic, to reduce it in both visual size and file size, for use in other programs. For use in an Artbiz website I ask clients to resize to no larger than 800px in any one direction and no larger than 50 to 100 kbs.


Photoshop or Photoshop Elements

Choose “File” > “Save for Web & Devices” (Photoshop)
Choose “File”>”Save for Web” (Photoshop Elements)Use the Save For Web dialog box to preview the effects of different optimization options on a photo you want to share on the web.

  1. Open a photo in the Editor and choose File > Save For Web.
  2. Then choose a format from the file format menu (GIF, JPEG, PNG-8, or PNG-24) and set options as desired. (The file format menu is directly in the Preset menu.)
  3. Click okay and save your image with a new name or in a separate folder.
  4. When the screen closes you are taken back to the main screen. IMPORTANT! when you close your image you may be prompted to save changes don’t this action will apply the resizing options from the save for web screen.
Resize Images Step 1

Resize Images Step 1

Resize Images Step 2

Resize Images Step 2


Resize your images online

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 do a “save as” and rename the file with a name that is more relevant that the name provided by the online tool and put it into a folder called website.

There is also a video tutorial http://www.youtube.com/watch?v=YbR5DVZBkPw&feature=player_embedded


Adding Image Descriptions in Photoshop

After resizing your images you can added your image descriptions. When you upload your images to the gallery it will automatically add your descriptions for you. You need to add this to the already resized image and not to the original full size image as Photoshop will strip it out when you resize the image for the web.

Also and this is important, if you are adding the descriptions in Photoshop it will add to the overall file size making the image approximately 1/3 larger. Take this into account when resizing your image.

  1. Open your resized image in Photoshop or Photoshop Elements
  2. Under the File menu select “File Info…” and a pop dialogue box will appear.
  3. Type in your information in the description box: Title, date, medium, size, etc.
  4. Type the image name into the Document Title, this will become the Alt text.
  5. Fill in all the fields if you desire but it is the Description & Title boxes that the gallery will draw from. All the other info that you insert will be added to the images Meta data.
  6. You can insert keywords and copyright notices as well.
  7. Save your image and upload it to the gallery.

Image descriptions step1

Image descriptions step 1

Image descriptions step 2

Image descriptions step 2