PREPARING IMAGES FOR THE WEB



1. RESAMPLING  THE IMAGE (CHANGING PIXEL COUNT)

You have to size your image properly for monitor display and Web use.  We do not call this sizing, but resampling. Resampling the image means changing the total number of pixels that make up the image, which means making the image larger or, more often, smaller than the original image in terms of pixel count. Decreasing the pixel count is called "downsampling," increasing the pixels count is called "upsampling" or "uprezzing."

When dealing with monitor display, we talk only about pixels and never about units such as inches and centimeters. We completely disregard image resolution, because image resolution is dependent on the native monitor resolution, which varies between monitors.

In your photo editing software, under IMAGE SIZE put a check mark next to CONSTRAIN PROPORTIONS. Decide how wide or high the image should be as measured in pixels. When you assign a width or height to one dimension of your image, the other dimension will be automatically and proportionally resampled.

I have greyed-out the Document Size fields, because they are completely irrelevant when resampling images.






In the example above we have an image that is 4032 pixels wide and 3024 pixels high. Make sure that Constrain Proportions is checked.  Let's resample the image so that it is 900 pixels wide:





Type "900" into the Width box. The new image height will be automatically calculated.

Depending on the sophistication of your editing software there may also be options for RESAMPLING THE IMAGE. Resampling means the editing software has to calculate a new image with less or more pixels than the original image has. Each resampling option will use a different algorithm that optimizes downscaling or upscaling. You may want to use BICUBIC SHARPER FOR downsampling (making "smaller") an image, and BICUBIC SMOOTHER for upsampling (making "larger") an image.



2. SHARPENING THE IMAGE

Under FILTERS, find and use SMART SHARPEN or the USM (Unsharp Mark) to sharpen your image. Choose a RADIUS of 0.5 and an AMOUNT of 15% as starting points. Disregard THRESHHOLD ) Not shown in the Smart Sharen feature of Photoshop. You may want to experiment with the AMOUNT, but keep in mind that over-sharpening tends to cause unsightly sharpening artefacts. It is best to first overhshrapen, then back off until the preview looks good.






3. COLOR SPACE

For monitor display and Web use we use usually the sRGB color space, which is an international standard. There are other color spaces which are used by experts with wide gammut monitors and by people who want to print in the best possible quality. Chances are your out-of-camera JPG image is in the sRGB color space. You can check easily by going into the menu of your photo editing software. Depending on your software, under EDIT or under IMAGE, you can find a setting called CONVERT PROFILE or something similar. If you click on this option, you can see in which color space your image is, and you can convert the image to another color space. Remember, you want your image to be in the sRGB color space.




The important thing here is that you convert your image to the sRBG Color Space before saving the image. The Destination Space is must be sRGB.



4. SAVING THE IMAGE "FOR WEB"

For monitor display you want to save the image as a JPG (jpg) file. You can "SAVE AS JPG," and choose from various compression options. usually there is a slide with settings from 1 to 12. 12 is the best quality setting and results in a larger file than a lower settings. Choose "optimized" if you have that option.  If you are editing a JPG file, make sure to not overwrite your original file accidentally by choosing "SAVE." It is best to always "SAVE AS"and to save the new file under a new name.

You may want to  "SAVE FOR WEB." The resulting file will also be a JPG file, but it has been optimized for Web use, which makes for smaller file size and faster up and download speeds.  Put a check markn in the box next to "EMBED ICC PROFILE" if you have that option. Whether or not you choose that option rarely matters, because most Web broswers will presume any image file to be in the sRGB color space.

You now have a scaled image that is ready to be uploaded to your Web site or photo sharing site. This image file is pretty small in terms of required memory. The image will load quickly.



You may also want to read

PREPARING IMAGES FOR PRINTING





All the content on this Web site is Thomas Mutzek 2012