How To – Resize, Crop and Optimize Your Web Images

By November 12, 2012 April 3rd, 2014 Websites

If you use a digital camera to take pictures for your website, there’s a few things you’ll need to do with your images to prepare them for the Web. In this post I will show you how to crop, resize and optimize these images using Pixlr.

What is Pixlr?

Pixlr (http://pixlr.com) is a free online image editor that works on virtually every computer that can run a modern web browser (Firefox, Chrome, Safari, IE 9+).

Why should I optimize?

“People will visit a Web site less often if it is slower than a close competitor by more than 250 milliseconds (a millisecond is a thousandth of a second).” – New York Times

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. Thus making smaller faster files and not losing any quality or detail in the image.

How to upload an image

  1. Open the Pixlr Editor
  2. Click on “Open image from computer”
  4. Browse for the picture and click “Open”
  6. In the top menu click “Image”
  7. From that drop down select “Image size”
  9. Make sure “Constrain Proportions” is checked
  10. Type or scroll to the desired image width
  11. Click “OK”
  13. Your image is now resized

How to Crop an image

  1. In the left tool bar click the top right tool “Crop” or push “c” on your keyboard
  3. A toolbar will appear just below the top menu
  4. Select “Output Size” from the constraint
  5. Type in the exact Width and Height you would like to crop to
  7. Hit the “Enter” key on your keyboard
  8. Your picture is now cropped

How to save your image

  1. After you image has been cropped or resized click on the “File” menu
  2. Select “Save image”
  4. Give your new image a unique name
  5. Select “Jpeg” with a quality of “80” (default)
  7. Select “OK”
  8. Pick a place to save on your computer and click “Save”

How to optimize your image (Optional, but recommended)

  1. Optimizing your sites images is the LAST thing you do before you upload your image to your web server
  2. In your browser navigate to Yahoo!’s Smush.it
  3. Click on the “Uploader” tab. And then click the “Select Files and Smush” button
  5. Browse for picture or pictures and click “Open”
  7. When all the files have uploaded and been processed, Smush.it will display how successful it was in reducing the size of your files
  9. Click the Download Smushed Images button and save the zip file. Extract the files to a folder on your your hard disk.
  10. Upload the final image(s) to your site

Leave a Reply