Image optimization is important

Update april 2015: the tool Smush It is recently put offline. More information about this on geekwire.com. A possible alternative: www.resmush.it.

Image optimization is important when attempting to improve the speed of your website. Search engines take the loading speed into account when rating your site. A slow site will generally end up further down in the search results than a fast website. Your visitors will appreciate a faster website too. Research shows that when loading your site takes too long visitors will tend to leave. In this blog I will explain how you can improve the speed of your site by optimizing the images using Smush.it. I will focus on ways to implement image ‘smushing’ for three well known CMS: WordPress, Joomla and Magento.

Image optimization using Smush.it

Yahoo provides a extensive list of tips & tricks to improve the loading speed of your website: “Best Practices for Speeding Up Your Web Site“. Loading images, stylesheets, scripts and other files takes up the biggest chunk of time. By reducing the amount of components within your site, you will reduce the amount of HTTP-requests resulting in a faster pageloading time. You can also gain a lot of speed by reducing image file size. Yahoo provides a free service, ‘Smush.it’ that can help you out with that.

Smush.it uses optimization techniques specific to the image format when removing unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.

Smush.it currently uses the following algorithms:

  • ImageMagick: identify the image type and convert GIF files to PNG files.
  • pngcrush: strip unneeded chunks from PNGs. Yahoo is also experimenting with other PNG reduction tools such as pngout, optipng, pngrewrite. Hopefully these tools will provide further optimization of PNG files.
  • jpegtran: strip all metadata from JPEGs (currently disabled) and try progressive JPEGs.
  • gifsicle: optimize animated GIFs by stripping repeating pixels in different frames.

Optimize images before upload

When the website is still in the development phase, the developer can easily optimize images using Smush.it. Now comes the hard part. Your site is live and the developer is no longer actively working on developing the site. From then on, the content editor is responsible for optimizing images himself when writing new content.

Standard procedure for the content editor should be:

  • write a blog-post or page
  • create or find an image
  • go to www.smush.it and optimize the image
  • download the optimized image
  • use the optimized image in the blog-post or page

But why would you do that if image optimization can be done by the software running the website? However, a lot of software is not able to do it out of the box. If this is the case, you should ask the web-developer to implement this technology. Not only because the end result will be better (less data = speedier site), but also because you don’t want to trouble your content editor(s) with the burden of optimizing images.

Optimize images in WordPress

Using the WordPress plugin “WP_Smush.it” will optimize every image as a background process when uploading the image to your website. Installation is simple and can be done using the WordPress plug-in install page. Search for “WP Smush.it” and install the plug-in. Automatic smushing of uploaded images can be controlled on the Settings > Media screen.

wordpress-smushit
plugin WP_Smush.it on WordPress.org

Optimize images in Joomla

Using the commercial extension “jomCDN” every uploaded image will be uploaded to an external storage and optimized using Smush.it. This extension can be bought from www.corephp.com and installed using the Joomla installer. Instructions on how to connect the extension to an external CDN can be found on the product-page of jomCDN on corephp.com.

joomla-smushit
extensie jomCND on Joomla.org

This extension is not the same as the simple solution WordPress uses (optimizing the images as a background process). It would be great if Joomla could offer the same kind of solution: “optimize every uploaded image and store it on the Joomla site”. Connection to an external CDN is a could have… not a should have, nor a must have. Is there a developer who would like to create (or has created) such an extension? If so, we will gladly post a link on this blog-post to that extension.

Optimize images in Magento

Unfortunately I haven’t found a Magento extension which optimizes images using Smush.it when uploading an image to the Magento webshop. You’ll have to create your own solution. The Dutch blogpost “Snelheid optimalisatie: afbeeldingen compressie” by Frank Broersen for PitGroup in October 2009 should get you started. His solution was to write API to optimize images using Smush.it:

Use this PHP for images in combination with the location for the optimized image and the API will do the rest. The API can be downloaded from the Dutch blog-post and from the link below. Thank you Frank Broersen for sharing your knowledge.

Download the PitGroup Smush.it API

Calling all developers

As shown in this blog-post only WordPress offers a clean and simple solution for optimizing images using Smush.it. It would be great if both Joomla and Magento offered the same kind of solution. For example, a plug-in for JCE in Joomla would be great. For Magento, extending the image uploader could be a solution.

If there’s a developer out there who has created an extension for Joomla or Magento or knows of a existing solution for these CMS’ we would really like to hear about it so we can share it with our audience.

 

 op

Hans Kuijpers is Joomla! en Magento specialist. Zijn eerste website maakte hij in 1995 tijdens zijn studie Technische Bedrijfskunde en sindsdien zijn er tientallen meer verschenen. Met de totstandkoming van deze Byte blog mag hij zichzelf ook wel een ver gevorderde WordPress ontwikkelaar noemen. Kennis delen en plezier hebben in het leven is wat Hans wil.