IT@Sam - Technology Tutorials

Image Resizing and Optimization

SHSU Technology Tutorials | Image Resizing and Optimization

Image Resizing and Optimization

Getting Your Images Ready for the Web

When putting your images on the web, it is essential to size and optimize them accordingly. Resizing will reduce the physical size of the image, while optimizing will reduce the file size ensuring a quicker download on a webpage. Using a photo editing program, it is possible to greatly reduce physical size and file size of an image without reducing the quality.

Scanning a Photo

When scanning a photo, it is possible to reduce the image resolution. You can choose resolution before scanning the image.

For best results, choose the 256 color optimized palette.

Resizing an Image

To resize an image, open it in an image editing program such as Adobe Photoshop or JASC Paint Shop Pro. Find the “image resize” option, which will most likely be under the Image menu.

For Photoshop:

For Paint Shop Pro:

The dialog box that comes up will allow you to enter new values for the image size.

For Photoshop: 

For Paint Shop Pro:

The image size can be adjusted by pixel size, percentage, or print/document size. Constrain proportions or aspect ratio will prevent distortion by keeping the height and width at the same ratio as the original image. As a general rule, you do not want to make the image larger using this function, because it will “create” parts of the image that aren’t there and degrade the overall quality. Resize type, resample image type such as smart size, bicubic, pixel resize are different methods of resizing the image.

Optimizing the Image

Once you have scanned and resized your image, you can save it in an optimized file format to upload to the web. The GIF format is best for graphics (like computer generated drawings and clip art, and anything with transparency in it) while the JPG format is more suited for photographs. The PNG format combines the best of both JPG and GIF, but may not be readable by some web browsers. The option to save your image in an optimized format can be found under the File menu, as these examples in Adobe Photoshop and JASC Paint Shop Pro.

For Photoshop:

For Paint Shop Pro:

From here, you can set compression and other options for your image.

Optimization Options

Interlaced: Image will download in multiple passes, rather than from the top-down.
Color Reduction Algorithm: Algorithm used to reduce the amount of colors used in the image. Options are Perceptual, Selective, Adaptive, and Web Safe.
Dither: How the edges are handled on the edges of transparent pixels. Options are Diffusion, Pattern, Noise and No Dither.