11

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

Improve this question
4
  • 1
    There are several answers to this - an example of the sort of images you're talking about would help.
    – e100
    Jul 24, 2012 at 13:16
  • 1
    @e100 - I update question to provide example image and add more information.
    – L84
    Jul 24, 2012 at 19:16
  • Similar question: graphicdesign.stackexchange.com/q/3429/10419
    – Kornel
    Mar 5, 2013 at 23:25
  • If you are controlling the website side, look into code / build options. I am the designer for a pro web team and we deliver full screen video to desktop / mobile phone without a big hit. Images unless strictly required are vector SVG and loaded as a font. Drastically reduces page KB count. 2000 pixel width hero banners are JPG at 85% and the guys pre-load in the background. The end user device is detected and delivered relative versions of the file (i.e. smaller version for mobile). By the time the user gets passed the home page, screen load is instant. And we aim for 2 seconds max home page.
    – Applefanboy
    Jan 17, 2020 at 15:50

4 Answers 4

Reset to default
15

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.

Improve this answer
5
  • My biggest concern about progressive option is support for email clients. I added more info to my question to explain this.
    – L84
    Jul 24, 2012 at 19:19
  • 1
    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, 2012 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.
    – L84
    Jul 25, 2012 at 1:12
  • 1
    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, 2012 at 10:11
  • Sorry, what I meant was nothing shows at all until the image is loaded vs loading scan by scan.
    – L84
    Jul 25, 2012 at 19:57
10

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.

Improve this answer
2

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).

Improve this answer
1
  • Thanks for the links. I have browsed some of Campaign Monitors website but have not seen the CSS page. Very useful info there.
    – L84
    Jul 25, 2012 at 20:01
-1

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

Improve this answer
8
  • Any other recommendations other than using JPEG. How is PNG?
    – L84
    Jul 24, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 13:18

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