Apr 2014

How to Optimize Images for the Web Using Pixlr

Written by  | Comments...

Taking high quality pictures with a variety of devices is getting easier with today's technology. Unfortunately, higher quality means larger image file sizes which slows  a web page's loading time or, in some cases, break the page completely. This video demonstrates how to quickly optimize these images for the web using a great free resource:

To get started:

  1. Visit http://pixlr.com to get started
  2. Click "Pixlr Editor"
  3. Click "Open image from computer"
  4. Navigate to your desktop or folder where the original image is located, then select your image and click "Open".
  5. In the top menu, click "Image" - > "Image Size"
  6. Leaving the "Constrain proportions" checked, update the width to 1400 pixels - note that the height will adjust automatically - and click "OK"
  7. In the top menu, click "File" -> "Save"
  8. Update the file name so as to avoid overwriting the original image. In this example, adding "demo_web" to help keep things organized.
  9. Leave the "Format" and "Quality" settings as they are ... both are fine for most web applications. Click "OK", then "Save"

You now have a more manageable image file size, reduced from 2.41 MB to 370 KB, that allows extensions like Joomla's K2 or Simple Image Gallery to process without maxing out the server's resources, a common occurrence when using a shared hosting plan.

Pixlr also has plenty of tools to modify or create images from scratch, but at the very least you always want your images to load quickly to help better the user's browsing experience.

Image credits: The Postcard View - Victoria, BC by Brandon Godfrey