Preparing Images for the Web

Est. Reading Time: 2 minute

Our clients often have the ability to add and change out photos on their sites at their leisure. There is a small amount of preparation that is required in order to ensure images are properly sized for web. Straight out of a digital camera, images can be quite large but a quick crop and save can keep your site loading fast.

Cascade Server does have a built-in image editor. This editor will allow you to crop, resize, flip & rotate images.

Otherwise, Photoshop is the best option. Here are a few quick steps to guide you through image editing for web:

1. Check what size your image needs to be. The resolution will always need to be 72dpi for web.

2. In photoshop use Edit > Image size to resize your image. Or you can use the Crop Tool.  With the Crop Tool selected, in the top bar, you can set the resolution (72dpi) and/or the preferred image dimension(s) and simply crop to the correct size.

3. Save the image using File > Save for Web (this will default your images to 72dpi and RGB color mode) and use the following recommended settings for the appropriate file format:

.jpg is the preferred file format. A quality of 80 is fine, unless you are saving out a extremely large background image, then something like 30 or 40 is more appropriate.

.png should be used if the image has transparency. .png-24 is preferable. Select transparency if your image has transparent areas.

.gifs are acceptable for simple graphic with flat color (such as a logo). Using .gifs for photos and images with a wide range of colors is not recommended. .gifs can also be transparent, but this is no longer recommended because the .png file format is far superior for transparency.

For more detailed & wordy explanations, you can view my previous post on this subject here.