Image Optimization with WebResizer and ImageRecycle
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
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).
I love the Joomla plugin on [url=http://imagerecycle.com]imagerecycle.com[/url]
Good point, Russell. Yes, they’ve got Joomla, WordPress and Magento integrations.
I definitely agree with the note of caution.
and let’s not forget [url=http://www.resmush.it]www.resmush.it[/url] : free service that has a Drupal integration through imageapi_optimize module. (WordPress plugin also available)
Hi Sil,
Thanks for the feedback! [url=http://resmush.it]resmush.it[/url] looks like a great resource for developers. The Drupal module looks excellent and automates the process when you upload images in Drupal.
As to WordPress, I couldn’t find the plugin for it. Looks like [url=https://wordpress.org/plugins/wp-smushit/]https://wordpress.org/plugi…[/url] used Yahoo’s Smushit until it was discontinued. But, then it switched to its own API:
[url=https://wordpress.org/support/topic/resmushit-is-a-free-alternative-to-yahoo-smushit]https://wordpress.org/suppo…[/url]
Maybe it has an option to use [url=http://resmush.it]resmush.it[/url] though. I’ll have to check it out this week and see if I can write a tutorial for it.
The same thing goes for Joomla. There was a Smush It extension, but I’m not sure it got converted over to [url=http://resmush.it]resmush.it[/url]
I always throw my images files through: [url=https://tinypng.com]https://tinypng.com[/url]
Great site, Peter!
I just tested one image on TinyPNG and ImageRecycle.
The original image was ~68 KB and both brought it down to ~20 KB, with negligible difference between each.
hello,
Thanking you sincerely for publishing such an amazing list.