Image Optimization with WebResizer and ImageRecycle

| Coding Tutorials
cropp images

One of the biggest factors to a slow page load is unoptimized image sizes. The bigger the image, the more time it takes the browser to load it.

This tutorial will show you the two free tools that I use to optimize images quickly.

These services will be useful whether you use WordPress, Drupal, Joomla or any other platform.

Background information

When you access a URL, it sends your request to the host server. The server then sends over the requested information.

Three main factors determine the total speed of the page load:

  • Your speed: internet connection, hardware, and software speed all contribute to this
  • The host speed: internet connection, hardware, and software speed all contribute to this
  • The total size of the information being transferred

Image optimization focuses on the 3rd part, the information size. The smaller the images, the less that's needed to be transferred. But, you don't want the images too small so that they are blurry or users can't see them. Finding the right balance is best.

The faster the site, the more users like it. Also, it will rank better in Google and other search engines.

Crop and scale down: WebResizer.com

Image Optimization with WebResizer and ImageRecycle

Keep your images as big as you need them, and no more.

New developers make the mistake of using HTML to resize the image after it's loaded. But, that slows down the page load. The browser still downloads the big image.

If your image will only be displayed to 175px by 175px, you don't need it as 2000px by 2000px. Scale the image down to the size you need it.

I use WebResizer to crop and scale down my images. It's free, easy to use, and effective.

Optimize the weight: ImageRecycle.com

Once you're done cropping and scaling in WebResizer, upload the finished image to ImageRecycle.com. It will reduce the size even more, about 50-80% more. And it's free!

Voila! You now have an extremely optimized image, perhaps with a 90%+ reduced size from the original.

A Note of Caution

These two services are web services. So the images are uploaded to 3rd party websites. As a result, I only recommend this approach for public images.

For images that contain sensitive information (ex: contractual information), use secure personal software. Focus on software that only allows you to have access to the images.

For example, GIMP would be a good option. It stores the files on your computer and doesn't share it with others (even its developers).


About the author

Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.