12 Really Useful Image Optimization Tools For Web Designers

Sep 17th, 09 by Dicky | View Comments |
You maybe interested in our latest article Personal Facebook Fan Pages of Celebrities.

Images are very important because they will make your web pages look nicer and more attractive. But, high quality and beautiful images always huge in file size. They make your pages load slower and consume more bandwidth. So we, the designers should optimize the images so that they are tiny in file size, but good in quality.

There are a lot of useful image optimization tools which can help us to optimize and reduce the file size of the images. These applications are available as both web-based and desktop-based applications.

Web based Image Optimization Tools

1. Smush.it

Smush.it is a popular image optimization tool that able to reduce the image file size but retain the quality, which is what we called “lossless” image optimization! You can run Smush.it through the web site (5 images at the same time) or through Firefox’s YSlow extension.
Smush.it

2. Dynamic Drive Online Image Optimizer

The Online Image Optimizer lets you optimize different image file formats such as GIF, JPG and PNG. You can either upload the image from your local machine or paste the URL of an image. This tool able to optimize and convert your image to different file format. The limitations of the Online Image Optimizer are 200KB per file, and only single file allowed per conversion.
Dynamic Drive Online Image Optimizer



3. PunyPNG

PunyPNG uses several optimization techniques. It will first check your images and then determine which technique is the best for that particular image. PunyPNG supports most of the popular image file formats and will automatically determine the converted image format for you.
PunyPNG

4. SiteReportCard Image Optimization Tool

SiteReportCard Image Optimization Tool support GIF, JPG and PNG formats. You can either paste the image’s URL or upload it from your computer, and the tool will compress and optimize the image into various size and quality.
SiteReportCard Image Optimization Tool

Desktop Image Optimization Tools

1. Shrink O’Matic

Shrink O’Matic is an AIR based application which is able to rize image on the fly by drag and drop images onto it. You can choose options like the output formats, output name or the output sizes.
Shrink O'Matic

2. OptiPNG

OptiPNG is an advanced PNG Optimizer, which will convert various file formats into optimized PNG. Windows users can integrate OptiPNG into the shell through the OptiPNG Windows Shell Integration project, or use OptiPNG as Paint.NET Plugin. While Mac OS X users can enjoy OptiPNG through the PNGCrusher application.
OptiPNG

3. ImageOptim

ImageOptim is a front end tool for a set of image optimization tools. ImageOptim uses AdvPNG from AdvanceCOMP, OptiPNG, PngCrush, JpegOptim, jpegtran from libjpeg, Gifsicle and optionally PNGOUT.
ImageOptim

4. PNGOUT

PNGOUT is a command line application which has a lot of different options. It supports PNG, GIF, BMP, JPG, TGA and PCX formats.
PNGOUT

5. PNGGauntlet

PNGGauntlet is a .NET application that use the PNGOUT to optimize PNG files. It is able to convert JPG, GIF, TGA, PCX and BMP files to PNG. If you are not familiar with Windows Command line, you can try PNGGauntlet.
PNGGauntlet

6. JPG & PNG Stripper

This application able to remove unnecessary metadata from the image files. It supports JPG, JFIF and PNG file formats.
JPG and PNG Stripper

7. TweakPNG

TweakPNG is a low level tool for optimizing PNG files. So, you need to familiar with PNG file format in order to use this tool. You can read more about PNG through this site.
TweakPNG

8. RIOT – Radical Image Optimization Tool

RIOT able to read and optimize different image formats by reading the magic number. So, it is able to optimize images with uncommon extensions, which makes it unique compare with other image optimization tools. RIOT will display the original and output images side-by-side, so that you can compare the quality of them easily.
RIOT - Radical Image Optimization Tool

We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.
  • http://amberweinberg.com/ Amber Weinberg

    Great resources to use when you don’t feel like messing with Photoshop. thanks!

  • http://www.gordejev.lv/ Gordejev

    Thanks nice info!

  • http://www.web20images.org semmy@ web 2.0 images

    Nice post! Really Love it! thank you very much!

  • http://garmahis.com Michael Garmahis

    Check out ultimate guide How to Optimize Images for Web with all tools and techniques for PNG, JPEG and GIF optimization in one place. Free Photoshop action for download is included.

  • http://10steps.sg Johnson Koh

    This is very cool Dicky! Are these similar or better than the “Save for Web” function in Photoshop? Let me try it out now. I have a huge background image for my site to load…

  • http://www.smashingshare.com Waheed Akhtar

    Nice collection! Thanks for sharing

  • http://choosedaily.com/1322/12-image-optimization-tools-web-designers/ 12 Really Useful Image Optimization Tools For Web Designers | Choose Daily

    [...] 12 Really Useful Image Optimization Tools For Web Designers [...]

  • http://bunnygotblog.com BunnygotBlog

    great collection – thank you

  • http://www.dzinepress.com Dzinepress

    i really like all your resources which giving help for image optimization.

  • http://www.qianduan.net/12-pairs-of-very-useful-web-designer-image-optimization-tool.html 12个对网页设计师非常有用的图片优化工具| Resource| 前端观察

    [...] 译自:12 Really Useful Image Optimization Tools For Web Designers [...]

  • http://wparena.com Wordpress arena

    good list …was looking to optimization on my blog images..thank you

  • http://www.tripwiremagazine.com/user-news//user-link12-really-useful-image-optimization-tools-for-web-designers.html tripwire magazine | tripwire magazine

    [...] Thin and Light fonts are font types good for alternative logo design. Enjoy the list of 30 thin and light fonts. They’re beautiful. 12 Really Useful Image Optimization Tools For Web Designers [...]

  • http://design-newz.com/2009/09/22/12-really-useful-image-optimization-tools-for-web-designers/ 12 Really Useful Image Optimization Tools For Web Designers | Design Newz

    [...] 12 Really Useful Image Optimization Tools For Web Designers [...]

  • http://www.tripwiremagazine.com/news/news/80-stunning-articles-for-designers-and-developers.html 80+ Stunning Articles for Designers and Developers | tripwire magazine

    [...] 12 Really Useful Image Optimization Tools For Web Designers [...]

  • http://www.themepremium.com Harsh Agrawal

    I use Wp.smush.it plugin for my wordpress blog but I feel there is some issue at times with their server, it optimize only 60-70% of my uploaded images..

  • http://www.visualblog.de/2009/09/12-tools-zur-bildbearbeitung/ 12 Tools zur Bildbearbeitung – VisualBlog – das VisualOrgasm-Weblog

    [...] September 2009, 08:36 Uhr, 0 Reaktionen Kategorie: Webdesign Webdesignbooth präsentiert “12 Really Useful Image Optimization Tools For Web Designers“. Darunter sind vier webbasierte Lösungen: SiteReportCard, PunyPNG, Dynamic Drive Online [...]

  • http://www.ideaflea.com/ Nicole

    Free online webmaster tools to optimize your web site. Visit http://www.webtoolhub.com/

  • http://cssbrigit.com/CNews/entrada/2009092120103365 CSS Brigit | 12 Really Useful Image Optimization Tools For Web Designers

    12 Really Useful Image Optimization Tools For Web Designers…

    These 12 image optimization tools will help us to optimize and reduce the size of images….

  • Bret

    Why do all the images on this side flicker and blink when scrolling? It’s really horrible to view any large image on this site because of all the slow flickering

  • http://www.webdesignbooth.com Dicky

    Hi Bret,
    This is due to the jquery lazyload plugin. However i had deactivated the plugin now :)

  • http://www.cosassencillas.com/2009/10/13/12-buenas-herramientas-optimizar-imagenes/ 12 buenas herramientas para optimizar imágenes

    [...] que nos puede ayudar a optimizar y reducir el tamaño de archivo de las imágenes.En el artículo 12 Really Useful Image Optimization Tools For Web Designers, de WebDesignBooth, nos dejan 12 buenas herramientas de optimización de imagen para diseñadores [...]

  • http://www.yosefsilver.com Yosef

    That’s very cool, and very very useful.

  • http://www.sanpad-it-solutions.com/ SanPad

    Great resources. Very good article for image optimization

  • http://www.cleanerreview.com/registry-winner/ Jonny

    Thanks for your list, i used RIOT for a long time.

  • http://www.afiffattouh.com/web-design/image-to-icon-5-ways-to-easily-convert-images-to-icon-files Image To Icon: 5 Ways to Easily Convert Images To Icon Files | Afif Fattouh – Web Specialist

    [...] Image Optimization tools: This article shares 12 tools for you to optimize and reduce the size of your images. They may not be important for you, but these tools are essential for bloggers and webmasters. As Google put more weight on page loading speed, it is good that you pay some attention on your image size especially if you have many images on your articles. [...]

  • http://www.itsashirt.com Itsashirt T shirts

    I use photoshop and it does most of the tasks I need but I will try some of the tools you posted, thnx

  • http://www.blueprintds.com web design chicago

    great post! Minimizing image size is utterly important nowadays to conserve hosting resources. Thanks a bunch for this great list man..

  • http://www.web20graphics.org Web 2.0 Graphics and Images

    Great opt tools! RIOT is phenomenal

  • http://www.magicblogz.com/ Magic

    Thanx for sharing these useful tools.

  • http://www.lektira.me lektire

    oh, good article and tools turned into one pack :D aniways, i think dynamic drive is best and have much good tools and stuffs

    keep good work,good post

  • http://www.webdesignbooth.com Dicky

    hi lektire,
    Have you try Smush.it? A lot of people are moving to smush.it because it is merged with YSlow!

  • http://www.msintermedia.com Davis

    Yeah, this is a good idea, and definitely good for the navigation. All of the sites listed here are good but I think PunyPNG is better.

    Thanks for sharing

  • http://www.msintermedia.com chicago web development

    Yeah, this is a good idea, and definitely good for the navigation. All of the sites listed here are good but I think SmushIt is better.

    Thanks for sharing

  • neha

    Hai, It’s really good to came across the post as providing some really nice tool.

  • http://www.wpthemesonline.info/ karsten@free wordpress themes

    great tips I will check out smush it – recently I discovered aviary.com and love it…

  • http://www.skinmoisturizers.info Sophie Wilson

    Flicker is really great when sharing photos over friends and families. I love the resize feature of Flickr.~`,

  • http://www.spunkyjones.com/ Spunky Jones SEO Blog

    I have just learned about Smush.it recently. I started to use it and it has improved my website/pages loading times.

    It doesn’t degrade the images when you optimize the image, like some others do.

  • http://www.musichostnetwork.com Music

    thank you these are great resources

  • http://www.itouchzone.com iTouchZone.com

    Excellent tips, I am trying a few tools now and post my feedbacks after using them. thanks for your suggestions.

  • http://pablolastra.wordpress.com/2010/08/13/clase-del-6082010-optimizacion-de-imagenes/ Clase del 6/08/2010 – Optimización de imágenes « Baco DG

    [...] dejo unas cuantos trucos para optimizar imagenes para web en caso de que no tengan el fireworks: http://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers/ from → Clase Web No comments yet Clic para cancelar [...]

  • http://blog.sendgrid.com/10-tips-to-keep-email-out-of-the-spam-folder/ 10 Tips to Keep Email Out of the Spam Folder « SendGrid Blog – Email Delivery. Simplified

    [...] Optimize your images the best you can [...]

  • u64

    deflopt missing!
    deflopt.exe only shaves a few Bytes, but
    it works nearly instantly.
    Also works on all kinds of zip format files.

    Use deflopt after pngout for max effect.

  • http://www.123tweak.com/10-tips-to-keep-email-out-of-the-spam-folder/ 10 Tips to Keep Email Out of the Spam Folder : 123 Tweak

    [...] Optimize your images the best you can [...]

  • http://www.xportsoft.com Nisha Shah

    I like RIOT .

  • http://hubspoint.com Hubs Point

    Very useful for image optimisation, thanks for sharing I also had and article on same topic

    hubspoint.com/2010/10/10/how-to-optimize-images-for-search-engines/

  • http://www.dasheyin.com/?p=136 12个对网页设计师非常有用的图片优化工具 | 大舌音

    [...] 译自:12 Really Useful Image Optimization Tools For Web Designers [...]

  • khinnu

    nice gud way to optimze our site

  • http://www.posterboygotsawg.com Agnus Darron

    Simply a smiling visitor here to share the love (:, btw great style and design .

  • http://hotmegafun.com Hotmegafun

    i like it i helped me a lot for image optimization thks

  • http://www.nissindia.com Niss

    I really thank ful to you

  • http://extrafuture.com Phil Nelson

    For those that prefer an app to the command line or a website, I make a PNG optimizer called PNGPress which is available on the Mac App Store: http://itunes.apple.com/us/app/pngpress/id416848846?mt=12

  • http://www.nissindia.com niss

    Good post & nice information.

  • http://netforofo.wordpress.com/2011/05/23/como-usar-las-imagenes-en-la-web-bien-parte-iv-herramientas-para-reducir-y-optimizar-imagenes/ Cómo usar las Imágenes en la Web bien. Parte IV: Herramientas para reducir y optimizar Imágenes | netforofo.com

    [...] con lotes de imágenes y descargar las imágenes modificadas como fichero comprimido como ésta. En este enlace y en este otro se puede encontrar una lista de este tipo de herramientas en la [...]

  • http://mymonkeydo.com/image-optimization/ Image Optimization | My Monkey Do
  • selfprodigy

    These are really nice i personally use riot. i used it on my own site http://knowntechnology.com

  • http://www.bloggingshiksha.com/2011/10/website-optimization-to-make-search-engines-like-you/ website optimization

    Ye it’s important to designe your site first and alway remember that your site should open quickly, because user dont weight for the site to take long time.

  • http://www.hrincconsultants.com Placement Companies Chennai

    Image optimization is using the most compressed yet visually acceptable
    image in the proper file format for the specific role of the
    image.Optimizing images for the web is a tricky business. You have to
    get the right balance between file size and picture quality. 

    Placement Consultants

  • http://www.hiredotnetdeveloperindia.com/ Hire .Net Developer

    Yes I  also believe Image optimization is very useful for website traffic. this tools look like amazing and very unique feature to read about it, Great job.

  • http://www.bloggingshiksha.com/2011/10/website-optimization-to-make-search-engines-like-you/ website optimization

    Better review on this. As it is really necessary to use or to make a proprer website….

  • Ryan from Regina Web Design

    Hmm these are some great tools, the ease of use is likely the best thing about them.  Png’s are always an issue in optimizing a website and it’s great to see there’s a variety of tools out there.  My website, “http://www.stealthwd.ca” is relatively quick although we’re upgrading it very soon.

  • http://www.creativenature.com.au/ Web design perth

    asasasasaa

  • http://volts.ca/76-Portable-Generators/View-all-products.html Portable generators

    Yeah, this is a good idea, and definitely good for the navigation. All of the sites listed here are good but I think SmushIt is better.Thanks for sharing

blog comments powered by Disqus