Get the most out of “Save for Web and Devices” in Photoshop

By

save

Save for web and devices in photoshop, seems like a relatively easy feature to get your head around. But still I see a lot of graphic designers and webdesigners not using it properly. So here are some basic tips to get smaller images without loosing quality.

Use the right format (PNG, JPG, GIF)

First you should decide which format will let you keep the most details with the least amount of diskspace used. My rule of thumb is JPG for photos, PNG for graphics and GIF for Transparent graphics (Some older browsers have problems with png transparency). But you should still check the file size of the different settings as every image is different.

JPG

jpg

What to look out for here:

ICC Profile
Decide whether or not to keep the ICC profile on.

Progressive
Progressive can save you a couple of kb’s by letting the file be downloaded in chunks.

Quality
Play around with the quality setting to get the smallest acceptable size.

PNG

png

In the PNG setup you should look out for:

Number of colors included
Don’t include colors that are not needed.

Tranparency
Don’t click this if you don’t need it.

Color reduction algoritm
Here I use Perceptual on most things.

GIF

gif

GIF have the same features as PNG and you should still look out for:

Number of colors included
Don’t include colors that are not needed.

Tranparency
Don’t click this if you don’t need it.

Color reduction algoritm
Here I use Perceptual on most things.

So next time you use save for web, play around with it a bit instead of just hitting the save button, and you’ll get a much better result.




One Response to “Get the most out of “Save for Web and Devices” in Photoshop”

  1. Squeeze more speed out of your wordpress blog! - spiced2.com Says:

    […] Compress your images to the right format and the right size Getting your images down to the right size and getting them properly compressed isn’t as hard as you might think. Use photoshop if you have it or try something like SmushIt. and If you are using photoshop you can read about compression and save for web here. […]

Respond!