Picture compression

[dreamlife789]

I have a bunch of very large image files. Should I resize them before I compress them? Should I compress them before I resize them? What is the standard picture size and compression? I want them to load quickly and look good to the search engines.

[HTMLBasicTutor]

You could start with reducing the DPI to 72. This is all you really need on the web. By doing that the actual picture size and picture file size will be reduced.

What kind of pictures are we talking about?

[dreamlife789]

I mean, like what should the image size be in terms of MB or KB?

And what are good picture dimensions for web display?

[stone]

Originally Posted by dreamlife789

I mean, like what should the image size be in terms of MB or KB?

And what are good picture dimensions for web display?

This question is way too general. There's no correct answer.

I run my pictures through irfanview, and after resizing them specific to where I want to use them... irfanview optimizes them when saving, according to the quality I set.

When I post to my tumblr, I may save the pictures as large as 1000 px! More often, I set at 700 px... when looking at the pics on photoset (carousel) the entire pic shows up...

If I was going to post here, 200 px might be enough.

If I had a 200 px picture, I might be able to get the size down 10 kb or smaller...

In checking my 700 px pics, I notice that they range from 70 kb to below 40 kb.

We want a smaller sized image, because it will load faster, but an image that's been set at a resolution that leaves you guessing at what you are looking at... May as well not even bother.

[ScriptMan]

I follow the rule of crop first, resize second and compress last. Quality comes from starting with the original image each compression costs some quality so tis better to only do it once.

Using PS, irfanview or pixresiser a quality level of 50% will be fine for almost all web purposes. For posting at a photography site a tad bit higher quality might be desired.

Somehow I have hunch that HTML's answer may work better but I don't fully understand how to do that so I stick with what I know.

[HTMLBasicTutor]

Originally Posted by ScriptMan

Somehow I have hunch that HTML's answer may work better but I don't fully understand how to do that so I stick with what I know.

Originally Posted by HTMLBasicTutor

You could start with reducing the DPI to 72. This is all you really need on the web. By doing that the actual picture size and picture file size will be reduced.

Depending on how your camera is set up,
The images imported from the camera have a large size (dimensions) and a high number of DPI.

If you change the DPI down to 72 the graphics program proportionally reduces the image size (dimensions). From there you can continue your edits.

[Nealrm]

You could start with reducing the DPI to 72.

DPI is a derived hard-copy concept, it has no use on the web or effect on photo file sizes. File size is only effected by the total number of pixels and compression type.

For best results, all editing should be done at the original file size and stored in a non-loss compression format (TIFF, JPG with compression turned off, etc). Then resize the the image and compress. In general, you want the resized image to match dimensions with the images used on the webpage. So if the page is displaying a 720x480 image, you should resize the photo to 720x480. IF you have the storage space, you may even want several different sizes of the same photo, for use in different location on a site.

On compression: the higher the compression level the more data that is removed from the photo and the fuzzier the result. For photos jpg tend to work the best. But for graphics, look at gif and png file types.

[Nealrm]

An additional point: you can reduce the processing requirements of photo edits by resizing and cropping first. There will be some decrease in the quality of the ending images, but the trade off may be worth it.

[ScriptMan]

@HTML I will open one up and play a little later in the day. I must say PS is the most expensive program I ever bought with mostly worthless help files.

[Nealrm]

Scriptman, what are you trying to do. I'm pretty good with PS.

[ScriptMan]

Reset the DPI per above as a test. I have done it before. I just need to recall where it hides. I use PS6. I figure learning it will keep me entertained until I am too old to care.

I got sidetracked yesterday into updating some static html files. I am going to play with PS this morning while waiting for the coffee to kick in.

Edit: Okay I played and now I am confused. Actually stating to think the post above that said DPI has no bearing on anything but print size is correct.

I loaded a 3872 x 2592 jpg file (2.72 MB) and PS automatically was 72 DPI. @ 72 DPI the print size was 54 x 36. Now maybe my problem is that I don't do raw files because there is no codec for PS6 for DNG and whatever the Pentax format is called. My little Cannon does TIFF if I want. Nothing but the print size was affected when I entered various DPI numbers.

I know I have opened PSD files that were higher than 72 DPI so maybe the jpg affects the setting that PS uses as a default?

[Nealrm]

To reduce the image size in photoshop go to Image->Image size (Ctrl Alt I).


Since this is for the web, we will use the "Pixel Dimension" box. Set the height and width to match the size you are using on the webpage. Since I have the "Constrain Proportions" option checked, the height to width ratio will remain constant. Also since this is a reduction, select the "Bicubic Resharper" resizing option. After changes the pop up should look similar to this:

Note the size reduction. Click ok when done.

A second option is the Save for web devices feature. It can be found at File->Save for web devices (Alt Shift Ctlr S). This will give you the chance to change the image size, the compression format and preview the effects before saving. The screen shot below shows the original image, max, min, and 50% jpg compression.

Look along the top the heads to see the effects of compression. Below each image is the new files size and the upload time. You can change the download speeds that is used to calculate the times. To save, click on the image you like and hit "Save"

[ScriptMan]

Nice post! For web quality they all look about the same. I could not read that tiny print. What were the different compression factors?

[Nealrm]

Original - 1.1M

100 - 3.86.8K, 138 sec @ 28.8 kbps
50 - 63.6k, 24 sec @ 28.8 kbps
0 - 17.97k 7 sec @ 28.8 kbps.

This is the max, min and middle settings that are possible in photoshop.

[Nealrm]

So you can better see the effects of compression. Here are the images at different levels of compression. Each is at 720x580, with optimization set ON.

Max Quality (100)


Middle (50)


Low Quality (0)


Look at the differences in the fur and at areas were colors change. Also look for colors being more in blocks then natural fading between the colors and textures.

[ScriptMan]

At the full 720x580 one can see a difference but unless it for a photography site or thread don't you agree that the middle (50) is entirely adequate quality for most web images?

For something like 1/6 the space, bandwidth and DL time I think it is the place to be. The 0 one looks really sharp compared to some of the images you will find on some of the news sites.

I am just saying that the average reader does not spend that much time looking at the details.

Tell me what you think.

[jayrudalf]

I think super moderator is right here.

[ScriptMan]

Originally Posted by jayrudalf

I think super moderator is right here.

Flattery won't get you anything.

There is no really right or wrong answer but tell me in a little detail why you thing I might be right.

[Nealrm]

For general use, you can even go a little less than the 50. A 40 or 35 setting should work.

The biggest issue, is to keep browser resizing to a min. If the browser has to reduce the image, you are spending time sending discarded data. If the browser has to increase the size, the image will be fuzzy.

[ScriptMan]

I never resize in the browser. It is a complete waste of resources.