Advertisement


Reduce file size without losing quality


Question

I would like to save files in Photoshop but keep them as small as possible.

I use Save for Web (and Devices) and save as a JPEG. Here are the settings I used:

Settings

I really do not want to lower the quality settings because I use text and sometimes I see artifacts if the setting is too low.

This produces file sizes of several hundred kilobytes depending on size of image. While this isn't a huge issue these images are used for the web and smaller is better. What are techniques without reducing quality to reduce the file size?

Update:

To add some more information here:

Many of the images I use and create get sent via email. This severally limits what I can do with placing of text using HTML and CSS over the image.

Also I use a variety of fonts. Some I could use for the web using CSS's @font-face but you can run into large file sizes and in some cases you cannot upload the font to the web legally. I could use a service like Typekit but again many fonts I use are not available with Typekit.

Here is an example image:

Example Image

2012/07/24
1
11
7/24/2012 7:16:00 PM

Accepted Answer

Choice of the best compression method depends on your image content. If you're trying to save image with a lots of colors and smooth transitions between them, your choice would rather be JPEG. Otherwise, if you've got some lineart, text, image with a couple of colors you should try PNG instead.

Specific compression scheme, parameters, color reduction etc. depend on the specific case. There are some images you can safely save with JPEG compression "slider" set to 30 or 40 without making artifacts apparent. Some other require settings 80 or more. Your eye should be the judge.

When we speak about JPEG compression, don't hesitate to try to use e.g. "Progressive" option or to set "Blur" to non zero value (subtle blur can mask severe compression artifacts).

In the case of PNG, you should try to reduce ammount of used colors as much as possible (use PNG-8 for that). When some "smoothing" is required try different dithering algorithms.

Here is a couple of examples:

JPEG, Progressive, Quality: 40, Blur: 0.18 JPEG, Optimized, Quality: 60, Blur: 0 JPEG, Progressive, Quality: 60, Blur: 0 PNG-8, Dithering: diffuse, 256 colors

Left to right, top to bottom, their parameters are:

  1. JPEG, Progressive, Quality: 40, Blur: 0.18, Size: 9 672 bytes
  2. JPEG, Optimized, Quality: 60, Blur: 0, Size: 16 898 bytes
  3. JPEG, Progressive, Quality: 60, Blur: 0, Size: 11 104 bytes
  4. PNG-8, Dithering: diffuse, Colors: 256, Size: 4 528 bytes

Compare them visually and then take a good look at their respective data sizes. First pair is about 9.7 kB vs. 16.9 kB. Second is 11.1 kB vs. 4.5 kB. All that by (IMHO) negligible visual difference.

2012/07/24
15
7/24/2012 1:30:00 PM

Here are some options:

  • Use another format other than JPEG (PNG or GIF); the results in terms of both file size and image quality will depend on the content of your image; each is better at certain kinds of content
  • Make the image smaller in terms of pixels - this will have a very significant effect and should definitely be considered if you have control over the overall layout
  • Use non-image elements where possible, e.g. try to replace text in images with HTML text; try to replace blocks of colour with HTML elements.

Expanding on the last two points, you should be looking to minimise the extent of images in your layouts as a whole before you spend time on reducing file size of existing images.

2012/07/24