Silentlulu's Blog

One of the easiest ways to reduce page response times is by optimizing your website images to reduce their file sizes as much as possible. Optimizing images not only makes your web pages load faster, but also reduces your bandwidth consumption, which can translate to significant savings in your hosting bills.

There are several free tools available at your disposal to shrink and optimize images. In this article, you will find convenient and user-friendly tools for making your web images as tiny in file size as possible.

1. smush.it!

smush.it! makes optimization of your images a breeze. Created by Stoyan Stefanov and Nicole Sullivan, smush.it! is a tool that is available as a Firefox extension, a bookmarklet, or as a simple web-based application (hosted by Yahoo!). It takes in most types of image formats, and automatically converts GIFs to PNGs (because they’re virtually the same, only that PNGS weigh a whole lot less).

2. RIOT

RIOT – which stands for Radical Image Optimization Tool – is an image optimizer for Windows users that is available as a standalone application or as an extension of IrfanView. It supports inputs in JPG, PNG, and GIF files and has the ability to strip out image metadata for further reduction of file bloat. It also has some basic image-editing utilities such as pan, zoom, and rotate, and flip built in.

3. PNGOUT

Created by game programmer Ken Silverman, PNGOUT is a popular, free, and no-frills tool for lossless optimization of your images. PNGOUT can run in the command-line or Windows Run dialog box. It has a robust set of options so that you can easily customize the way your files are compressed. It takes most of the popular image file formats (such as JPG, GIF, and PNG).

4. Online Image Optimizer

The Online Image Optimizer from Dynamic Drive is a web-based tool for compressing your images further. You can either provide the link to the image you wish to optimize, or upload it from your local machine. Besides optimization, you can select what output you’d like the optimized image to be (the default is the same file type as the input). The limitation of Online Image Optimizer is that it only accepts images less than 300 KB.

5. SuperGIF

SuperGIF is a free utility for Windows and Mac OS users that optimizes your GIF images. It has an intuitive and simple user interface that allows for drag and drop interaction, and it can compress GIFs 50% more in some instances. The free version can only compress one GIF at a time, but it has all the same features as the commercial version ($29.95) except batch processing.

6. PNGGauntlet

PNGGauntlet is a .NET GUI application for PNGOUT. It can be used to convert JPG, GIF, TGA, PCX, and BMP to highly optimized PNG files. PNGGauntlet is perfect for individuals that are uncomfortable working in the command-line/Windows Run dialog box, but would still like to take advantage of PNGOUT’s superior optimization algorithm. Check out PNGGauntlet’s FAQ page or its forum to get help in case you run into trouble using it.

7. PNGCrushrrr

PNGCrushrrr is a free GPL-licensed Mac OS utility for crushing down your PNG files to very small sizes. It has a drag-and-drop interface, allowing you to drag one or more PNG files into it, compressing the files and preserving the original file so you are able to compare the size difference. The creator says that PNGCrushrrr is best used on PNG-24 files.

8. SuperPNG

SuperPNG is a free Photoshop plugin for saving significantly smaller PNG files compared to Photoshop’s native save feature for PNG’s. It also includes some advanced PNG-creation features such as 16-bit color support, variable compression, gamma correction, and metadata saving. Check out some PNG samples saved by SuperPNG in the PNG Samples page.

What’s your image optimization tool?

If your favorite image optimization tool isn’t on the list, please share it with us in the comments: let us know why you prefer it over other image optimization tools.

Minimizing the filesize of the CSS stylesheet has been regarded by many as a good way to increase your site loading speed. Indeed, by reducing the CSS file by several kilobytes, the server will take a shorter time to load and result in a faster webpage.

In the event that your articles hit the Digg frontpage, this could also be one of the few deciding factors (there are many more) whether your server will crash or not.

Some of the most common methods used to minimize/ optimize a CSS stylesheet involves eliminating unused selectors, unwanted whitespace, tabs, comments and change the longhand declaration to shorthand notations.

I know that some of you here are not tech-savvy enough to edit your own CSS code, so here I will provide you with some of the useful tools that you can use to optimize your CSS code, even if you have completely no knowledge of CSS coding.

Check your CSS code

W3C CSS Validator

The W3C CSS validator is a tool that you can use to validate your CSS. You can either download the Java validator to your computer and use it offline, or use the online form to check your CSS code.

CSS Validator Firefox Add-On

To make it easier for you to validate your CSS code, there is this Firefox extension – CSS Validator – that you can install on your browser. Once installed, you can easily and quickly check your code with a right click of the mouse.

CSSCheck

Even though your CSS code is validated, it does not mean that it is free from error. The validation only means that it complies with the CSS standards set by the W3C. If you want to validate as well as looking into a few browser compatibility issues with your stylesheet, then CSSCheck is a good tool for you.

CSS Analyzer

CSS Analyzer is an useful tool that allows you to validate your stylesheet against the W3C’s standard, perform a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

In case you are wondering, the color contrast test is to check that the foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits, or when viewed on a black and white screen.

Clean up your CSS code

Dust-Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors on the page that you are viewing. As you test subsequent pages of the same domain, the result is cross-checked with the previous data and any selectors encountered are crossed off from the list. You can use it to test individual pages or get it to spider the whole site.

In the end, you will get a report on the selectors that are not used anywhere in the site. You can then remove those selectors from your stylesheet (lesser code means smaller filesize).

CSS Redundancy Checker

Similar to Dust-Me Selectors, this tool checks your site for unused and redundant CSS selectors. The only thing that is different is that you need to manually enter the URI for each page that you want to test.

Optimize and Compress your CSS code

Once you have completed checking the validity of your CSS and cleaned up unnecessary code, it’s time to optimize CSS file and reduce it to the smallest possible size.

CSS Tidy

CSS Tidy is an open source software that you can use to optimize and compress your CSS file. It is available in .exe format (Windows only) and a zipped php script format (all platforms, for Web developers). What CSS Tidy does is mainly remove the comment, unnecessary whitespace and change some of the code to shorthand. During compression, you can choose between code readability or maximum compression. Depending on the length of your code, you can easily achieve a compression ratio of up to 30% or more.

Since CSS Tidy is an open source project, there have been several websites that use the code and turned it into an online tool for people to use. Here are some of them:

• CLEAN CSS
• Code Beautifier
• CSS Formatter and Optimizer from CSS Portal
• CSS Formatter and Optimizer from Flyspray

Other CSS Optimizers

FlumpCakes CSS Optimizer

A simple optimizer that comes with several options for you to choose from.

Robson CSS Compressor

While it may look the same as others, I have found the compression rate for Robson CSS Compressor to be the highest among them all. Although it comes with several options for you to tweak the setting, leaving all the options untouched (all options checked) always produces the best result.

CSS Drive CSS Compressor

The CSS Compressor offered by CSS Drive comes in two modes that you can use: Regular and Advanced. In the Regular mode, you only need to select which level of compression you want (Light, Normal or Super Compact) and the CSS Compressor will do the rest. In the Advanced mode, you are given more options and a greater say on how you want your stylesheet to be optimized.

CSS Optimizer

The CSS Optimizer from mabblog.com is a command line application for Mac and Linux. It is meant for those who are more comfortable with the terminal rather than an online interface. There is also a simple online version available for those who want to quickly get it over and done with.

Hopefully the tools listed here are enough for you to tweak and optimize your CSS stylesheet. If you have used any other tools that are more useful than those mentioned above, share them with us in the comments.

From: http://www.makeuseof.com/tag/useful-tools-to-check-clean-and-optimize-your-css-file/

说明：近期在做SEO流程标准化的工作，代码优化是其中一个必要步骤，查阅了不少相关资料，发现了以上文章，很受用。不知道最近有没有时间，想把这篇文章翻译一下，MS相关的中文资料并不是太多，希望有所帮助吧。