Optimize your images

It is vitally important that we optimize all the images we ship as resources in the framework: these images will potentially be downloaded several times on each of the pages our users build using the controls that use them.

Even a few bytes can make a significant difference and alter the perception of the performance of ASP.NET applications. We also have a chance to contribute in making the web as a whole a faster, or a slower place.

It is the same for all web developers: the size of your images contribute to the user experience of your web site and to the perception of its performance. Reducing their sizes can help you make better use of your bandwidth and that of your users.

 

This walkthrough uses Photoshop, but you should find similar optimization settings on your own favorite image processing software.

 

To save an optimized version of your image, you'll need to select File/Save for web.

 

You’ve got a few options there that you can manipulate. Try all settings until you’ve reached what you think is the most compact size for your image that does not degrade its appearance.

 

I recommend that you zoom so that you can see the pixels. It’s easier to see degradations this way. But always zoom back to 100% before you decide to keep your settings to check the final appearance at the real size. The zoom setting is in the bottom left corner of the window.

 

You can also use the tabs on top of the window to see the original uncompressed image and the compressed version side-by-side (2-up tab). On the bottom of the compressed image’s view, you can see the final size of your image, as well as an estimation of the time it will take to download on a crappy modem. You can change how crappy the modem is by using the little right-pointing arrow in a circle on the top-right corner of the previews.

If you want to have access to the compression parameters, you’ll have to click on the compressed view so that it has a thick blue border.

 

Here are the settings you can use:

-         Preset: ignore that.

-         Image type: use GIF if your image is small and looks fine with less than 256 colors. Large photographic images should use JPEG. For JPEG, the parameters will be different (basically, it's just a question of compression level and is easier to optimize than GIF: just pick the compression that does not degrade your image). PNG is not supported by all browsers.

-         Lossy: ignore that.

-         Palette type: you can try different settings. I always use Adaptative because it tries to use a color palette that fits the original colors of the image and not some predefined palette. It helps to prevent dithering.

-         Colors: this is the most important setting. On small images, the palette itself can take an important proportion of the final image size. Changing it can in some cases reduce the size of an image from 800 bytes to around 50. Try the lowest setting that does not degrade the image too much.

-         Dithering pattern: if you use 0 dithering, you don’t need to set that. If you don’t, just try them and select the one that works for you.

-         Dither: I always use zero here. Dithering is introducing noise in the image in the same way that colors or gray levels are produced in a newspaper. It looks ok when seen from afar, but is really ugly up close. It looks better to increase the palette size a little than to introduce dithering. I also suspect that dithered images are harder to compress and result into larger files. Not sure about it, though.

-         Transparency: in many web images, we need transparency, so check this if it is the case. To select which color will be considered transparent, select the eyedropper tool on the left side of the window and select the right color directly in the image. It will select the same color in the palette. Click on the checkerboard-like small icon below the palette (Maps selected color to transparent) and the color will disappear from the preview to show the background checkerboard. You can repeat for several colors if you want.

-         Matte: Choose None. This is the color Photoshop will consider is the background color the transparency should be calculated against: for the image transparency to look better, it anti-aliases border pixels so that the edge looks smoother. We can’t use that in our own images because we can’t know the background color in advance. So we have to choose none here even though it degrades the quality a little on the borders. If you're a web developer and you use a fixed style sheet, you may know in advance the background color the image will be displayed over. Use this color here.

-         Transparency dither: choose “no transparency dither”

-         Interlaced: don’t check that. It was only useful for large images at the time when modems were 9800bps.

-         Web snap: this is to try to coerce the palette into being closer to the so-called web palette. This web palette is supposed to be a palette that all devices should be able to display correctly. I usually don’t use that feature. Your call here.

 

Finally, you can click on the “preview in default browser” icon to view the final results.

Press Save to save the final image.

 

Of course, you may find that your own settings will work better in your particular case. Experiment and keep what works best for you, as always.

2 Comments

  • What web browsers don't support png? That is, among those used by more than four people worldwide on a daily basis?



    And the number of colors is more important than just for palette size. It reduces the "alphabet" that exists in the image data, making compression more effective.



    Dithered images *are* harder to compress. Ordered/pattern dithered images less so, but they'll still end up bigger than no dithering.



    You should use interlacing on large gif or png images. Some people still connect at 56k, and sometimes your server gets overloaded. If your image is large enough to matter, the slight increase in file size won't matter, but you should probably consider using jpeg or css instead.

  • Josh: you're right, most browsers that are used today understand PNG. But for us, "most" is just not enough, we need all. But for your day to day web design needs, you're right, PNG can now be used pretty safely (and it has the advantage of not being restricted by patents). I agree 100% with your other comments, in particular on the fact that if your image is large, you should consider JPG.



    Hal: Paint.NET is not really MS technology, it's a student project. It's pretty nice (i use it too sometimes) but still has a long way to go to compete against Photoshop. Then again, it's free, which is a really nice feature.

    The MS imaging product is Digital Image Suite, which has amazing features, but is not targeted at professionals. It is more oriented towards familial users. I use it at home to fix my photos.

    Anyway, the reason I used Photoshop in my tutorial is that it is by far the imaging product that's the most used by professional web developers.



    Dimitri: OK for the MSDN article. Send me mail so that we can arrange that.

Comments have been disabled for this content.