Web graphics

Web graphics should be small and high quality. It used to be that you had to choose one: quality or size. These days, there are several options (most are automatic) that will lead to both small and high quality images for the web. Here are a few quick tips that show you how to accomplish that.

Read

  1. Speed Up Your Website with Better Image Optimization in Photoshop
  2. 16 Impressive Image Optimization Tools
  3. Clever PNG Optimization Techniques
  4. Clever JPG Optimization Techniques

Download

  1. PNGCrushrrr
  2. ImageOptim
  3. wp-smushit (WordPress)

Use

PNGCrushrrr, ImageOptim, and wp-smushit automatically optimize images for you. Wp-smushit even works behind the scenes in WordPress–once it’s installed, every image is always optimized.

If you’re one of those people that wants to spend time doing this manually, go open Photoshop now. Open your file, and click “Save for Web”. Spend some time comparing various methods of compression. I highly recommend those two Smashing Magazine articles about png and jpg optimization. There are several Photoshop walkthroughs in those articles.

Transparency

You can knock out the background of an image and keep it transparent (outside of Photoshop). Erase the background (or whatever you don’t want), then File > Save As > Format: PNG. Interlaced: None. You’re ready to go. This picture is an example of transparency in a png image. See how the sky is now transparent. Good stuff.

As with all graphics, the key to creating quality images is to keep practicing. Have fun!