: Reduce file size without losing quality 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

@Sims5801359

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

Vote Up Vote Down

@Si6392903

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:






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


JPEG, Progressive, Quality: 40, Blur: 0.18, Size: 9 672 bytes
JPEG, Optimized, Quality: 60, Blur: 0, Size: 16 898 bytes
JPEG, Progressive, Quality: 60, Blur: 0, Size: 11 104 bytes
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.

Vote Up Vote Down

@Sims5801359

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.

Vote Up Vote Down

@Chiappetta793

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

Vote Up Vote Down