[jeaniesa]

Many people seem to have questions on how to resize images under the 100KB(*) limit needed to upload images to RetouchPRO. I wrote this a few days ago and since more questions are popping up, I thought I’d post it for everyone.

(*)Actually, the 100KB limit applies to the forums only. In the gallery, you are allowed up to 200KB for image file sizes. This discussion still applies, just substitute 200KB wherever you see 100KB for gallery images.

Please note that this is written with Photoshop in mind. I realize that many of you are not using Photoshop, but it’s what I’m familiar with. Not to worry though – the explanation and technique is the same for other programs, though the actual menu choices may have different names.

First some background knowledge necessary to understand image file sizes. There are a few things which affect the file size of an image:

• The pixel dimensions of the image.
• The mode of the file (i.e., grayscale, 8-bit RGB/CMYK or 16-bit RGB/CMYK).
• The format the file is saved in and whether any compression is applied.

Let’s talk about each of these in more detail, starting with pixel dimensions. In Photoshop, go to Image->Image Size... You'll get a dialog box with a bunch of numbers in it. The numbers you are most concerned about for posting an image to the web are in the top section labeled "Pixel Dimensions". In general, 800x600 pixels is the largest you can get away with and still make it under the 100KB limit. And sometimes you can’t even go that big, but I have had luck with many images with pixel dimensions as large as 800x600.

Still in the Image Size dialog box, the "Constrain proportions" at the bottom should be checked (that's the default) so that you don't end up changing the ratio of height to width. Make sure this is checked before you edit the pixel dimensions. For now (so as not to confuse things), ignore the section labeled "Document size". That has to do with printed documents and is not applicable to images destined for the web.

Moving on to the “mode of the file”:

Each pixel in a grayscale image takes up one byte of information; in an 8-bit RGB image it takes 3 bytes (each of the red, green and blue channels takes one byte); in an 8-bit CMYK image each pixel is 4 bytes. So, let’s say we have an image that has pixel dimensions of 100x100 = 10,000 pixels. Since a grayscale image takes up one byte of information per pixel, a non-compressed file size would be about 10KB (10,000 bytes). An RGB image takes 3 bytes per pixel, so a 100x100 image would be about 30KB. Similarly, a CMYK image takes 4 bytes per pixel, so a 100x100 image would be about a 40KB file size. (I’m ignoring the 16-bit mode now to simplify the discussion, but you can do the math yourself.)

You can do this experiment yourself. In Photoshop, make sure that the Status Bar is turned on (Window->Status Bar). The third field in the Status Bar should be Document Size. If it’s not, slick the little arrow to the right of that field and choose “Document Size”. Now, make a new image (File->New) that is 100x100 pixels in grayscale mode. (It doesn’t matter what the background color is.) Look at the first Document Size number in the Status Bar (the number for the current size) – it should say 10K.) Now change the file mode to RGB (Image->Mode->RGB Color). Again, look at the Document Size number: 29K (or about 3 x the original file size). Lastly, change the file mode to CMYK (Image->Mode->CMYK Color). The Document Size number should change to 39K (or about 4 x the original file size.)

So, what is the relevance of this inforamtion for images uploaded to RetouchPRO? In general, you want your image to be in RGB format. Even if your image is a black and white image, you will discover that there is most likely different information in each of the RGB channels – especially if your image is old and faded or stained. Uploading an RGB image is especially helpful if you are asking for help in solving a problem since many of the techniques for restoring photos involve looking at the individual channels. I would say that the only reason to use Grayscale mode is if you are uploading a B&W image strictly for viewing and not asking for help; in that case, Grayscale mode will help reduce the size of your file. In most cases you would not want to upload a CMYK image, since the file size is ultimately larger than RGB. However, if you have a question pertaining to CMYK mode, that option is certainly available.

Now for the file format and compression scheme:

File formats are actually discussed elsewhere on this site. Please see this thread for a general discussion of file formats. The format you’ll be most interested in for posting photographs and artistic images is JPEG. (The exception to this is either graphical images - or animated images, which JPEG does not support. In both cases, you’ll most likely use GIF.) As noted in the page from the link above, JPEG is a “lossy” file format – meaning that data is discarded as part of the compression scheme to reduce file size. You have probably seen JPEG images which have been severely compressed; the “blocks” which are most often visible in areas such as a sky, but can be seen over an entire photo if the compression is severe enough, are called “JPEG artifacts”. And, the stronger the compression, the more details are removed from the image.

Usually, the goal for images destined for uploading to RetouchPRO is to provide as large and detailed an image as possible – and get the file size below 100KB. If you are running Photoshop 5.5 or above, this is not too difficult. (If you’re not running Photoshop 5.5 or above, it will be a little trickier, but still very possible. See below.)

In Photoshop 5.5 or above, when saving images for the web, I find that I get the best results using the File->Save for Web... menu choice. This will bring up a dialog box with four tabs: Original, Optimized, 2-Up and 4-Up. I like to work in the 4-Up view because I can see the most options that way.

In the 4-Up view, you'll see 4 views of the same portion of your image. You can use the hand tool to move the image to a section that has the most detail or that you are most concerned about preserving the detail in. You'll notice that below each of the four views is information about:

• the type of compression being used (it should say JPEG - if not, you can change it in the pull down menu to the right),
• the size of the file when saved to disk,
• and the amount of time it will take to load with a dial-up modem.

You want to pay attention to the file size number. The goal is to use as high a quality compression as possible and stay under 100Kb in size. There may already be one of the views which is sufficient for you. If not, click on one of the views (other than the "original view), then adjust the pull down menus on the right in the dialog box. In general, you'll want to adjust the "Quality" number. The lower the number, the smaller the file. However, too much compression can make the image start to appear “blocky”, so sometimes you can also adjust the blur number to get a slightly better looking image - the higher the blur, the smaller the file. Obviously, too much blur is not acceptable either, so you have to play with the numbers until you get the effect you want. You can see the effect of the numbers you choose in the preview box you have selected.

One very easy trick is to let Photoshop do the "guesswork" for you. Click on the little triangle in a circle near the top right corner of the Save for Web dialog box. This will bring up a menu that includes the option "Optimize to File Size". Choose that option and you will see a dialog box where you can input the desired file size (in this case, 100 KB). You can choose to start with either the current settings or let Photoshop decide for you. In most cases, I just use current settings, but if I'm really having trouble, I might see what Photoshop suggests. Click OK to return to the Save for Web dialog and see what affect the new settings have on your image.

If you’re still not able to get the quality you want, you may need to reduce the file size a bit. Click on the "Image Size" tab in the "Save for Web" dialog box and you can adjust the image size for the saved image without affecting the size of your original image. In any case, the file size number is what you want to get below 100KB. (I have found this number to be quite accurate in predicting the actual file size of the saved image.) Once you've done that, click "Save" and save it to disk. Then you should be able to attach the image to your RetouchPRO post.

For those of you who don’t have the Save for Web option, you will need to use the Save As feature of your imaging program. (Usually found under File->Save As…) This should bring up a dialog box that allows you to choose the file format (choose JPEG or JPG) and the file name. At least in Photoshcop, once you click the “Save” button, it brings up another dialog box allowing you to enter the level of JPEG compression to use. (I assume this is the same in other imaging applications.) Again, the lower the number for Quality, the greater the compression. At least in Photoshop, you can click the Preview box to see the effect on your image before you save. You will need to save the image to discover the actual file size created though. I have not found the approximate file size shown at the bottom of that dialog box to be realistic. If you find that you have to compromise quality too much, you may want to consider reducing the size of your image.

In my experience, I am almost always happy with a JPEG quality setting of 5 or 6 for an RGB image with pixel dimensions of 800x600. However, your mileage may vary.

As always, feel free to ask questions if anything is unclear.

Jeanie

[GOLDCOIN]

Jeanie.......

Oh thank you..... I've been having so much touble, your explaination sure has made me understand what the problems were.... and how to fix some of them.

[jeaniesa]

Wonderful! I'm so glad you found it useful!

I just realized something else. (Amazing how that happens when I actually read the manual. ) In the Save for Web dialog box, you can actually change the image size right there! You don't need to change it in Image->Image Size first, and then go into Save for Web. In the lower right of the Save for Web dialog box, there are two tabs: Color Table and Image Size. At least in mine, Color Table is on top, so the Image Size options are obscurred. But, if you click on the Image Size tab, you'll see options to change the pixel dimensions or to a percentage of the original size. This should make it even easier to adjust all of the parameters (JPEG quality, Blur and Image Size) at the same time to give you the best overall image below 100KB in size!

One other comment about what affects the final size of an image file. Obviously, the more layers you have in an image, the larger the file size. However, JPEG does not support multiple layers, so your image will automatically be flattened before the file is written when you choose to save in JPEG format.

Jeanie

[Doug Nelson]

Wow, this is amazing, and extremely useful. About the only complication I can think of to add is that 100k is the size limit for the forums, but 200k is the size limit for the Member Gallery and Challenge areas of the Gallery.

Thanks for taking the time and putting in the thought necessary. I'm sure this post will save many headaches in the future.

[jeaniesa]

Thanks Doug. I made a slight change at the top to clarify the point of 100KB forum images vs. 200KB gallery images.

Jeanie

[CJ Swartz]

Jeanie, a load of good info, well explained!

To tell the truth, I haven't been using the 4-up option, and now I will since you explained how useful it is. Thanks!

[phili1]

Ok Jeannie, I underwstand all of that, but my problem is I have a 600 x 800 or 800 x 600, JPG 5 and try to download it and it tells me I am exceding the limit.

I now change the 600 to 550 and get the same ans and then change it to 500 and get the same ans and then 450 and it sometime accepts it. Now my file is so small no one can see it

I also go to Save as web and pick a Jpg do a 4 up and pick a file that is under 100k and save it and give it a new name and when I open it in Photoshop its size is 481K and is to large to down load.

I am pulling my hair out because I cant figure out what is happening. I have used all the advise that I have gotten and the same results. I just used CJ recomendation and set and save it at 100k and it still makes a file size of 481K. The only way I can get it in is tio make it to small.

Now this does not happen all the time but it is getting worse.

The swiss clock was the same size as I down loaded it from the challenge but when I tried to down load it it would not accept it

I am stumpped

[jeaniesa]

Phili1,

Don't look at the file size after you've loaded it back into Photoshop. That will give you an "uncompressed" file size (about the size you'd get if you were to resave the file as TIFF) - which is not the same as the compressed file you just saved to the disk.

After you save it, look at the file size with Windows Explorer (or whatever the Mac equivalent is). Either right click on the file and choose properties to get the file size, or use the "detail view" to view all of your files - one column of which should be the file size. If you choose a file size that is under 100K in Save for web, then when you look at that file with Windows Explorer, it should be the size it said it would be in Save for web (give or take 1KB.)

Does that make sense?

Jeanie

[Ed_L]

It's hard to believe I haven't seen this thread before. Jeanie, you gave an excellent explanation that should make life easier for a lot of people. Like CJ, I didn't use the 4-up option either. Thanks for all the good info. Your initial post to this thread should have a spot of it's own where newbies can easily see it when they come aboard.

Ed

[jeaniesa]

Chuck, Next time you edit a post and try changing the image, be sure that you refresh you page when you view the image after the change. If you don't, it will still show you the old image - even if the name has changed I think. (I've had this happen to me numerous times.)

Jeanie

[cinderella]

Very useful information. Wish I had found this before I sent off my images a couple of days ago. ( Seems like I couldn't find anything yesterday - hmmmmmmm) Thanks for a clear, great explanation. JR

[Shoff]

This is not working for me. Even saved at Jpeg at 0 quality my file is almost 1 meg. What am i doing wrong.

[phili1]

Shoff read. are you selecting the original on the left. If you are then thats your problem. Photoshop loads four set ups. the first one is original size the next is reduced and then the third and fourth. If you select No 2 your reduction will be largere then if you selected three or four.

Jeaniesa's exxplanation is right on the money.

[Ed_L]

Shoff,

If you click on "Save for web", and select the 4 up option, you will see 4 images of different quality, and the file size will appear at the bottom left of each image. Let's say you have an image of 500K that you need to reduce to 100K to display. Click on the arrow (shown on attachment). You will now have an option to click on "optimize to file size". Doing so will bring up a box that will allow you to enter 100K (or whatever you wish). Click on OK, and your 4 images will be redrawn to new quality levels, again with the file size showing. Choose the one you want, then click OK. Hope this does the trick for you.

Ed

[Shoff]

I'm getting an error message.

"Could not complete this operation. There was not enough memory available."

I have 1 gig of ram. What is going on here?