Faster Loading: Web Images

February 20th, 2012how to build a websiteComments Off on Faster Loading: Web Images
crop-canvas-thumbnail

One way to speed up your site is to optimize your web images for faster loading. There are many ways to do it, but here is what I do.

Steps to Optimizing Web Images for Speed

Part 1: Basic Optimization

Option “A”: Use Photoshop or Other Photo Editing Software on Your Computer

I use Photoshop, so these instructions are specific to Photoshop. However, I have found most photo imaging software programs are very similar.

  1. Know the size (height and width in pixels) you need the finished image to be.
  2. Open the web image in Photoshop.
  3. Crop the web image (if necessary). Re-center as you wish, remembering that the sides or top and bottom of the image may be cropped again to set the correct sides. How to Crop Web Images
  4. Resize the Image. 
    • Go to “Image” on the Top Navigation Bar (hover so it gives you a drop down bar)
    • Click “Image Size”
    • Set either the height or width in PIXELS. Use the field that allows the opposite field to be the same as or MORE than what is needed. You can crop, but it’s harder to create more of an image.
    • Example: I opened an existing file, went to “Image,” then clicked “Image Size” to get the popup shown below. I’d like to change the size to 150 pixels wide by 150 pixels high.To Resize Web Images Part 1
    • In the example above, I would set the height to 150, and leaving the proportions the same, the width is 200 pixels.
    • Then, go to “Image” again. Click “Canvas Size.” Crop Image Using Canvas
    • If at any time you want to go back and reverse what you’ve done, go to “Window” on the top navigation bar, and make sure “History” has a check mark by it. If it doesn’t – click it. Then look for the History window on your screen. You can click on events, then start again from there at any time. Once you go back in time and start again, you cannot un-do it after any changes have been made.
  5. Save as Optimized Web Image. When using Photoshop, go to “File” on the top navigation bar, and “Save for web”. You’ll get to see the different ways to optimize and save the web image.
    • Photos: best as .jpg
    • Vector images usually best as .png
    • Sometimes .gif

Option “B”: Use Online Services.

I use the following:

Resize Images Online with shrinkpictures.com to resize images in a pinch.

Dynamic Drive image optimizer is a free online service to reduce the file size of your image. I use it in a pinch, also.

When testing your page in PageSpeed from Google, if your images are not optimized, PageSpeed will give you a link to an smaller, optimized version of the slow images. I use this often.

 

 

« How to Blog for Free: Web Images
Services: eCommerce Site »

Post tags

About Tiffany

The wife of an amazing, supportive man, Duane, and mother of 3 fantastic young adults, Tiffany lives an active life in Columbus, Montana, just west of Billings. She and Duane lived most of their lives in the magnificent Skagit Valley of Northwest Washington State, where they and their kids were born and raised. Twitter @TiffanyYoungren

» has written 31 posts