How to Optimize Images For The Web Online

Many users take pictures with their digital cameras for the purpose of using those images on their sites, but they may not think to optimize images before putting them up on their website. Digital cameras capture images at higher “resolutions” which create files with more digital information (or “pixels”) than are really needed for most web pages. As a result, web pages that use these high resolution images are slower to load and the images themselves take up more space on your web server than an optimized image. Since you can optimize images yourself  pretty easily, it is in your best interest to optimize images before you upload them to your website.

To optimize images, follow these simple steps:

• Cropping off excess of unwanted area of the picture
• Resizing its overall dimensions
• Saving the image using the file format and settings that offer the best combination of image quality and file size savings

The good news is that there are simple solutions available where you can optimize your images before you upload them to your Content Management System (CMS) website. Best of all, many of them are free and some can even be done directly within a web browser.

How to Optimize Images For The Web Using PicResize.com

Using PicResize is very straightforward, but for those that need it, here are detailed instructions that should fit the needs of most users:

1. Select Picture:
   1. Visit www.picresize.com
   2. Make sure the button “From Computer” is selected.
   3. Click the “Browse” button on the screen to locate the image file on your computer you wish to optimize OR drag the file in question from your computer’s Desktop and drop it onto the area of the page that reads “drag a picture file here”.
   4. Click “Continue”.
2. Crop and Rotate Your Picture:
   1. If you wish to crop your image to remove excess image area, drag your mouse over the Image Preview area. Drag the handles located around the dotted border to change the Cropping Area if necessary. Then click the “Crop Selection” button on the screen. (To cancel the cropping operation and start over, click the “Deselect” button”.)
   2. If you wish to either Rotate and/or Flip your image, click on the corresponding onscreen buttons.
3. Resize Your Picture:
   1. Choose “Fit to screen: 800” from the drop down menu, which will resize the width of your image to 800 pixels wide. Its height will also be resized in proportion.
4. Choose Special Effect:
   1. Leave the choice of “None” selected (unless you wish to apply an optional Special Effect to your image).
5. Save As:
   1. For best results in most cases, choose Image Format as “JPG” and JPG Quality as”Better”.
   2. Click “I’m Done, Resize My Picture!” on the screen.
6. Get Your File:
   1. If you wish to see a preview of your image before you download it, click “View Image”.
   2. If you are happy with the results, click “Save to Disk”. Your optimized image will be downloaded and saved to your computer, (most likely either into your Downloads folder or directly onto your computer’s Desktop).
   3. Log into the CMS (Content Management System) of your website and upload your optimized image. Make sure to upload the OPTIMIZED version of your image and NOT the ORIGINAL high resolution version.

This information is also available as a short video:

PicResize.com also offer additional features such as Quick Resize, Multiple Pics (for batch processing mutiple images at once) as well as Plugin software modules that you can install to access these features directly in your web browser.

Bower Web Solutions is also available to assist you should you wish to hire us to perform this work for you. Please feel free to contact us with any questions regarding Image Optimization you may have.