optimize-images for-websites

Blog & Website Image Optimization Tools & Tips

One of the most common things that webmasters, bloggers, and online marketing professionals need to do when working on their websites is to optimize images and pictures. Since images can affect load time for the page, it has become necessary to reduce the file size. This may involve converting the image to a JPEG, or 256 color PNG, or resizing to a smaller image, and most importantly … compressing images to a small file size.

A few file formats have become popular for the web, each with their pros and cons.

Image Files Used On WebPages

  1. JPEG or JPG (Joint Photographic Expert Group) JPG or JPEG images display a high color palette. This makes it suitable for portraits, product images, and photographs. JPEG files can be highly compressed, usually at 60% to 90%. If lower than 60% compression, the image quality can suffer, but it depends.
  2. GIF (Graphics Interchange Format) GIF images provide a simpler palette. This makes the file suitable for simple drawings or images that do not require a detailed color spectrum. GIF is also best used for simple animations.
  3. PNG (Portable Network Graphics) PNG images come in two flavors:
    • True Color. In this mode, due to the large palette size, PNG images can slow down your blog or website. Convert to JPEG or to 256 Color mode.
    • 256 Color. In this mode the file size can almost be cut by 70%. Most PNG’s you will use will probably be True Color, so downsizing it to 256  (or less) can make a big difference. However, the image quality will suffer if the original image contained 1000 or more colors. A good color dithering algorithm is required (see below for the best tools).

Here is a good link from Google that explains in detail what image format to use on your site, depending on its main purpose.

Even if your website or blog posts have one or a few images, optimizing can make the pages load faster. And if you use a lot of images per post, then it becomes even more imperative that you optimize those images, because page load time can be much slower. This need makes sense when you read this link on how long page load times can make your visitors back-out before the images all finish loading.

So now comes the need for free software that optimize your images and makes your pages load faster. The following is what we have installed on our computers to optimize the images on our website (we have a lot!)

Image Processing Tools

Some of the below tools just compress files, resize, or convert, and some do all three functions. Let’s review them and see which ones you like.

GIMP – http://www.gimp.org/downloads/

The GIMP image editor is more like a free version of Photoshop. It can do all three functions needed in image optimization (convert, resize, compress). However, quality suffers quite a bit when resizing. It can convert one file to another, and has good JPEG compression settings. It also can significantly decrease a GIF animation file size. The 256 PNG conversion does not have good color dithering options, so the quality on 256 color images suffer. For Mac and Windows.

Photoshop – http://www.adobe.com/products/photoshop.html

Well it is not free, you can get it cheap on monthly payments. Its ‘Save For Web’ tool is exceptional. Resizing images down is very nice. It has very good JPEG compression. And GIF animated files can be easily edited and compressed smaller than GIMP can do. Note: You can get the Photoshop Elements version at a low cost. For Windows and Mac.

XnConverthttp://www.xnview.com/en/xnconvert/

XnConvert has many features like batch processing many images at once. You can perform edits like convert, resize, crop, change color depth, etc. I found that resizing and lowering PNGs to 256 or less colors produced poorer quality results than some of the other tools here. But processing JPEG images are very good. For Windows / Mac / Linux.

pngquant https://pngquant.org/

This is the popular command-line utility for compressing PNG files in batches. You can download  GUI programs to make it easy to use. I use PNGgoo for Windows or ImageAlpha for the Mac. These links are found on the main page. The results are very good. What pngquant does is compress PNG files in 256 colors. You can convert and compress a True Color PNG with hardly any image degradation. If you need an image as a PNG, then this utility blows everything away. However, the image files are a bit larger that what some others can do. Also, there is no image resizing or editing, and you will have to use one of the other tools to covert to PNG first.

JPEGminihttp://www.jpegmini.com/

JPEGmini compresses JPG images with no loss in quality. It does the same that pngquant does for PNG’s. But there is no compression percentage to adjust, so the files can be larger than what the other utility’s here can do. If you want the very best quality for your JPEG images with good compression, that JPEGmini is for you. Downside is you have to use another tool to convert to JPG first. The trial version allows 20 jpg’s per day, but you can purchase it for a fee. Available for Mac or Windows.

Riothttp://luci.criosweb.ro/riot/

This is one of our favorites for Windows. You can convert, resize, and compress images with very good quality results. There is batch file processing for multiple images at once. There is a bug in PNG batches, so I do one at a time, but JPG batches work fine.  You can see the before and after results on an image before compressing or resizing.

IrfanView http://www.irfanview.com/

Another excellent image processor. IrfanView is like XnConvert with a lot of editing options and batch processing if you have a lot of images. Resizing and JPG compression is very good. Reducing PNG’s to 256 colors is good. Be careful when batch processing down to 256 PNG images (depending on the image there may be poor image quality). For Windows.

So there you go. 7 image processing tools with pros and cons to them all. We have used all of them and still have them installed on our computers. But here is our formula:

Formula for Optimizing Images

GIF Images

  • Do not use GIFs unless they are animated. You can get smaller file sizes and better visual results with 256 PNG’s. So convert them.
  • For GIF animated files: Use GIMP if you can’t afford Photoshop. The GIF editor in GIMP is not as good as Photoshop, but can still drastically reduce your file sizes.
True Color PNG Images
  • These images usually have large files sizes, so …
    • convert to 256 colors or less.
    • or convert to JPEG and experiment with different compressions.

256 Color PNG Images

  • For best quality and good compression, use pngquant.
  • In addition, Photoshop is also very good.
  • For the best compression (smallest file size) and great visual quality use Riot.
  • For batch processing lots of images, use the GUI for pngqaunt, or IrfanView (Riot has a bug)

JPEG Images

  • For best quality and good compression use JPEGmini.
  • Photoshop and GIMP are also good for image editing, and compressing JPG’s.
  • For batch processing lots of pictures, use Riot or IrfanView or XnConvert.
  • Experiment with different compression settings.

Optimize Images Already Uploaded

How do you optimize images already uploaded, especially if you have a lot of pics? If your web platform supports plugins, you should find a plugin that can compress images you have already uploaded on the server side.

For example, WordPress, has plugins to do this. A few examples:

  • WP Smush.it
  • EWWW Image Optimizer
  • Kraken
  • TinyPNG

If you do not have access to plugins, and have your site uploaded on a server, then use Filezilla (FTP app) to go to your image folders and download to your computer. Then you can use the batch compression tools mentioned above, and copy and paste back to the image folders. Always keep the original images as backups in case you make a mistake.

Remember though, it’s easier to optimize your images BEFORE uploading.

File Size vs. Image Quality

Use Riot to visually compare the image results (256 PNGs against JPG’s). You can also see the file sizes of both. Play with the color depth on PNG’s or compression levels on JPG’s. Then you can see which will give you the results you want, the smallest file size without compromising desired quality.

Other Notes

  • When you make image edits like resizing or lowering color depth, make sure you do that BEFORE compressing. Some of the tools mentioned can do all in one go. But some like pngqaunt, or JPEGmini require you to use another tool to resize first. If you make an edit AFTER you compress, you can lose the compression. So be careful and check the file sizes.
  • Choose Progressive JPEG’s over Baseline. They load faster.
  • Screenshot images usually have low colors. Always convert to 256 , or 128 or 64 color PNG’s. Use The editors that allow you to lower color depth (Riot and IrfanView are good).
  • If you post lots of images, consider reducing the number, if you can make do with less.
  • Also, if you post a lot of images, consider resizing or cropping as many to a smaller size.
  • Make sure to compress your header image or logo.
  • Don’t forget to save the original images in backup folders on your computer.

Have you tried any image editing tools in this tutorial? Which one do you like best? Or do you use one I have not mentioned? Leave a comment and share this post with friends.

Share this post with friends:

Leave a Reply

Your email address will not be published. Required fields are marked *