Tweet
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:
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:
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
(*)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
) 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!
Comment