The steps below will help you save images for the web in the lowest possible size, keeping image quality high.
Some of the steps required are
- changing dpi
- choosing jpeg/gif
- choosing quality (jpeg) or number of colors (gif)
- choosing Matte
save for web
DPI is ”dots per inch”, i.e. the number of pixels per inch. Most images we upload on the web, or forward in emails for viewing purpose are 72 dpi images because your monitor allows only 72 dots per inch. Having a 300 dpi image wont help. 300 dpi images are useful for print because many printers print 300 dots per inch or even more to give a sharp photo print. So whenever we use File > “Save for Web & Devices”, it changes the dpi to 72.
Next step is to choose between jpeg or gif. There are 2 kinds of images, bitmaps, which are photographs, or images with many many colors like the one below
Bitmap image
Or vector images which have very few colors, like 4 to 254. Logos etc would classify as vector images. See an example below
Vector image
Bitmaps are to be saved as jpegs, and vector images as gifs.
save for web jpeg settings
Bitmaps/jpeg settings
After File > “Save for Web & Devices”
- Select the file format as jpeg
- Select the compression quality as “High”
- Ensure Quality is 60
- Ensure Matte is “None”
- Click on “Save”
Please see reference image on the left
After File > “Save for Web & Devices”
save for web gif settings
Vector/Gif settings
- Select the file format as gif
- Reduce the colors in steps from 254, 128, 64, 32, 16, 8, 4 till 2 till you get the lowest number which looks as good as the original.
- Incase the image has a transparent background tick “Transparency”
- For transparent image select Matte to be the background color on which the transparent gif image will appear
- Click on “Save”
Please see reference image on the left
Incase you are not sure which one will work better for you, gif or jpeg, you can always try each of these settings and see whats the filesize. Photoshop dynamically shows you the filesize as you change the settings.
Tags: gif, jpeg, photoshop, save for web