Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
1  
There are several answers to this - an example of the sort of images you're talking about would help. –  e100 Jul 24 '12 at 13:16
1  
@e100 - I update question to provide example image and add more information. –  Lynda Jul 24 '12 at 19:16
    
Similar question: graphicdesign.stackexchange.com/q/3429/10419 –  porneL Mar 5 '13 at 23:25

4 Answers 4

up vote 10 down vote accepted

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.

share|improve this answer
    
My biggest concern about progressive option is support for email clients. I added more info to my question to explain this. –  Lynda Jul 24 '12 at 19:19
    
As far as I can tell “progressive” is a part of JPEG standard and not something exotic, so support should be almost 100%. But it's “I think” not “I know” :). –  thebodzio Jul 24 '12 at 21:15
    
I agree and I believe you are right, I had asked this question over on Webmaster SE and at worst case the images will show but not until they are fully loaded. –  Lynda Jul 25 '12 at 1:12
    
That's exactly how "progressive" is intended to work: it should show more and more detailed versions of the image consecutively as more data becomes available. –  thebodzio Jul 25 '12 at 10:11
    
Sorry, what I meant was nothing shows at all until the image is loaded vs loading scan by scan. –  Lynda Jul 25 '12 at 19:57

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.

share|improve this answer

I´ll try to answer some so far unanswered questions:

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.

You can send html emails (the way newsletters are made). With html and inline CSS (for compatibility). The images have to be on a server and you have to put the full URL in the stylings/img-tags. Here´s a list of what works in different e-mail clients.

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.

Try google webfonts, by far the best webfont-source. All free to use. Another one would be Font Squirrel. (It uses @font-face as well).

share|improve this answer
    
Thanks for the links. I have browsed some of Campaign Monitors website but have not seen the CSS page. Very useful info there. –  Lynda Jul 25 '12 at 20:01

There's no way you can do this. JPEG is lossy format. There's always a trade between quality and file size.

share|improve this answer
    
Any other recommendations other than using JPEG. How is PNG? –  Lynda Jul 24 '12 at 3:48
1  
PNG is lossless but also quite big. Where do you use this image? If it´s for the web, it´s always better to code the text. –  Jannik Ruf Jul 24 '12 at 7:12
    
JPEG and GIF are good choices for Web-view(PNG is rarely used). But it depends alot on what you want to do: background, image slideshow, thumbnail or icon etc... –  wanting252 Jul 24 '12 at 10:52
    
If it´s only Text without effects (i.e. just white text on black background) Gif is good and really small in size. –  Jannik Ruf Jul 24 '12 at 11:37
4  
This isn't really a very good answer. There are several ways of reducing file size; it is incorrect to say PNG is rarely used on the web. –  e100 Jul 24 '12 at 13:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.