Tools and Tips on how to Optimize Images for the Web

By / Feb 7, 2013 / Tips

The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today we gathered a few links here to show you some tools and articles that will help you with this issue. Even if you are a pro at “saving as better quality jpg” it is always nice to check out some tools (old or new) to have you covered when it is time to optimize images.

Useful Tools

TinyPNG

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.

Tools and Tips on how to Optimize Images for the Web

Smush.it

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files.

Tools and Tips on how to Optimize Images for the Web

OptiPNG

OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information.

Tools and Tips on how to Optimize Images for the Web

ImageOptim

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

Tools and Tips on how to Optimize Images for the Web

CodeKit

CodeKit helps you build websites faster and better. And it also helps you optimizing images.

Tools and Tips on how to Optimize Images for the Web

imgo

Image optimization tool.

Tools and Tips on how to Optimize Images for the Web

jQuery Lazyload

jQuery plugin for lazy loading images.

Tools and Tips on how to Optimize Images for the Web

Articles

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

  • http://jm-creative.co.uk jm creative

    Great little list. I’v always noticed its PNG that tend to be the heavy files on my sites. Some times they just cant be avoided though so some good tools to help with the file size. Iv used Tiny PNGs so will try some others as well.

  • http://wwwblogdoed.blogspot.com.br/ Edvaldo Lopes

    Olá Gisele. Amei seu site e também descobri recentemente uma linha nova carreira e estou empenhado nela, seu site está sendo muito útil.

  • http://www.listmark.net Alex Edwards

    If you use a *nix OS, Trimage is a pretty nice equivalent to ImageOptim and worth a mention too. On Ubuntu/Debian:

    sudo apt-get install trimage

  • http://bloggingwordpress.net/ Liam

    nice collection!
    thanks for share!

  • http://www.jepsonrae.com @iamphilrae

    A good trick with 32bit alpha transparent PNGs is to put them through Adobe Fireworks 8-bit alpha transparent PNG filter to see if they can be optimised a fair bit as long as you don’t mind reducing the colour palette down to 256 colours. It’s especially useful for photographic images with a transparent background, where JPEG isn’t an option because of the transparency, and 32bit PNGs offer very poor compression (because they’re meant for block colours).

    Sometimes the effect can be a little ‘grundgy’, and the alpha transparency isn’t always as perfect as 32bit, but still better than 8bit indexed transparency you see on standard 8bit PNG or GIFs. For a few of our sites, its reduced the overall image load on a page from a totally unacceptable 10MB to a more reasonable 200KB.

    It seems that out of all the Adobe software though, only Fireworks does this 8-bit alpha export. File > Image Export > PNG > 8bit Alpha

    Oh, and remember to put them through ImageOptim afterwards to improve the compression even more!

  • http://greyskymedia.com Jamison Mergens

    For JPGs you can you use jpegmini.com as well.

  • http://forzawebsolutions.com Joe Petchonka

    This is a very important thing for site load times as well. Most people pick the highest resolution images that they can get their hands on and then shrink them without lowering the image file size.

    Nightmare!

  • http://www.keyhousemedia.com Ryan Key

    Some of these most basic things seem to be the most forgettable for web designers.

  • http://quadrochave.com Henrique

    PNGNQ is other gret line-command tool for otmize png files:
    http://pngnq.sourceforge.net/

    EX: pngq -n 256 imagem.png

  • http://www.sweetmag.my Web Design Malaysia

    Thanks for the awesome article! been using TinyPng eversince 😀

  • http://www.a2zcreativesolutions.com Aamir Shahzad

    Simply use Photoshop and use save as for web it will automatically optimize it for web and you have custom setting as well…you can also check the image load time etc.

    these tools can be helpful but i always prefer Photoshop.

  • http://funwidtricks.com vinay

    Thats what I was looking for! Thanks for listing….

  • Elliane

    I used another excellent image optimizing tool–Lossless Photo Squeezer.It is a mac app and very easy to use.And could shrink your photos without losing quality.

  • http://webeminence.com Ryan

    Good overview. I’m sure most people use software on their computer for this but there are some good tools out there to take care of this. I did a video overview of some of the options for optimizing images for speed and size and found imageoptimizer.net to be a pretty useful tool. I explained a couple other options including software and WordPress plugins. Here’s the video I did for those that are interested. http://youtu.be/oi5SCqS-7xw

  • Kris B

    I’ve used so far tinypng (.com) and plugin then found on a project with another CMS the Imagerecycle tool. Something that may change the image optimization during webdesign creation is to do not care of image weight during the process and automate all optimization after. See this post: https://www.imagerecycle.com/news/27-online-image-resizing-optimization

    Now I’m waiting for a plugin that use the new html5 element