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 have a full colour PSD image file which I want to convert to a format that can be easily shared on the web.

The current size is of the PSD is around 7MB.

I want to reduce the file size to something around 70kb without losing quality.

What is the best format and best method to do this?

I tried to achieve this file size reduction with Photoshop tools. Saving as a JPEG and setting the quality to high gives me a file of 110kb

This is too big, and with a lower quality level gives me unacceptable results.

I know there are plenty of other methods to reduce the file size, can you share your experience on this issue?

share|improve this question

migrated from webmasters.stackexchange.com Mar 23 at 13:27

This question came from our site for pro webmasters.

    
A 1000% reduction in file size is always going to reduce quality.... always. –  Scott May 23 at 19:01

4 Answers 4

Is it a photograph or something closer to a vector image like a schema?

  • In the first case, JPEG is your best choice: PNG images would be often larger. This doesn't prevent you trying PNG in the preview and seeing how it affects the quality and the size, but in most cases, you would be disappointed.

    When using JPEG, don't limit yourself to the compression levels from the list (i.e. 20, 40, 60, 80 and 100). In a few cases, picking, for example, 75 instead of 80 produced smaller image, while the quality drop was practically unnoticeable.

  • In the second case, JPEG will usually result in important loss of quality, while PNG won't.

    Also, if the image has no gradient, try PNG-8 instead of the default PNG-24, and experiment with number of colors to see how it affects both the size and the quality of the image.

    For example, it's not unusual for PNG-8 with 16 colors to produce much smaller files compared to PNG-8 with 32 colors or higher or compared to PNG-24, while the drop in quality is barely noticeable.

The dialog displayed when going to FileSave for Web and Devices encourages experimentation by letting you quickly preview different settings; also remember to use "2-Up" and "4-Up" tabs at the top left corner of this dialog.

Finally, remember golden rules of a web designer:

  • Do never put text inside images. There is no need to waste user bandwidth when you can simply include text in HTML, not counting other disastrous consequences of putting text in images (such as killing SEO, auto-translation, accessibility, etc.)

  • Think twice whether the image is really useful for your users. Does it enrich the content, or just add more visual clutter? Couldn't it be replaced by the elements provided by HTML 5 and CSS 3?

  • Do never create images which would be always shown smaller than their real size. If the thumbnails of the products of an e-commerce site are 400×300, don't reuse the full-scale 1 200×900 photos, unless you really want to kill your server's and your clients' bandwidth.

share|improve this answer

If it's not a photorealistic image, and/or has limited color palette, Photoshop Save For Web in PNG-8 format could be your best option. Here you can specify the number of colors (2-256), the fewer colors the smaller the file. You can plug in different values for number of colors, and see the effects on the image (in preview) and the resulting file size.

You might even want to go back and rework your image to work with fewer colors, I often try from the outset to make web graphics look good with fewer colors in order to make a small PNG-8 files.

share|improve this answer

In addition to the trying different quality settings, also experiment with more compression and the "blur" setting for jpegs.

Also try additional optimization tools like Image Optim, ImageAlpha, TinyPNG or JPEGmini.

share|improve this answer

I recently read here that you can save at jpg compression 31 using double the dimensions that you need, then display it on your webpage at half those dimensions and it will look good. So if you want your photo to display at 200px by 200px, you save it at 400px by 400px at 31 quality, and set your image size in your CSS or HTML to be 200px by 200px. This makes the image look like it was saved at high quality but with a much smaller file size AND it looks good on retina displays. This would work well for photos.

For images with big areas of solid colors, I'd either save as a PNG-8 or if the image has a gradient or lots of colors, PNG-24. Or if you made it in Illustrator you could save as an SVG, depending on your target audience (and their browsers).

share|improve this answer
    
Using HTML to resize images is just poor practice. –  Scott Jul 22 at 18:25

Your Answer

 
discard

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