Part of the web development process is helping clients learn how to optimize their site images. This is important because image files can add a lot of weight to a site and increase the amount of time it takes to load into a browser window, especially for mobile devices. So I've created this tutorial that addresses six things to remember when optimizing your site images.
Because my primary digital design tool is Adobe Photoshop, all of my examples will be from that application. But there are many other affordable image editors out there: Apple’s $30 answer to Photoshop, Pixelmator; the free GIMP image manipulation application; and browser-based image editors such as Pixlr. These Photoshop alternatives have the capability to do all of the functions I’m going to cover, though their interfaces and menus will be slightly different.
The web is built on a resolution of 72 pixels per inch (PPI). A pixel is the smallest visual unit for displaying color on a computer screen. You may have heard of high-resolution screens such as Apple’s Retina displays, and you can read more about how to optimize images for those here, but for this post I’m going to focus on optimizing images for standard resolution.
Most images from a camera or purchased as a stock photo are quite large in dimensions (height x width) and/or resolution (72 to 300 PPI). Always use 72 PPI as your final resolution for the web. Anything larger will not improve the image quality and will only cause your site’s pages to load more slowly, especially if they have many large images. If you’ve ever been to a site where the images load as if they were window shades being pulled down, you can bet those images weren’t optimized for the web.
You can check the size of your image within Photoshop by going to the “Image” menu and selecting “Image Size.” The dialogue box will show you both your image’s dimensions and current resolution. You can change these here if needed.
The color mode for all of your web images should be RGB (which stands for Red, Green, Blue) because computer monitors display full-color images using different intensities of red, green and blue pixels. The CMYK color mode is for printing, and leaving your web images in CMYK mode will increase the file size of your image and affect the speed of your site. Stock photos you purchase may be in a CMYK color mode by default, but that is easy to check and change.
Go to the “Image” menu and select “Mode.” The color mode of your image will have a checkmark next to it. If it’s anything other than RGB, select “RGB” to change it. You may see a warning message that says, “You are about to change the color mode of your image.” Simply click OK to confirm the change.
It’s important to know the target size for images on your website so you can match your original to it. This is for design consistency, but also so pages load quickly and the overall data weight of the site is as light as possible. You may need to both crop and resize your original image to fit the aspect ratio (height : width) of your target.
You can resize your image by going to “Image” from the main menu and selecting “Image Size.” Make sure the “Resample” checkbox is selected and the measurement units for height and width are set to “Pixels” and the resolution is 72 PPI. You’ll notice a small chain link icon between height and width. This signifies that changing one dimension will automatically and proportionally change the other.
You may want to crop your original image to focus on one particular part or make a poorly composed image more interesting. Cropping in Photoshop is relatively easy. Using the crop tool (fifth from the top in the toolbar), you can adjust height, width, or both. The crop tool will show you a preview of the cropped area and the Info panel (select “Window” and “Info” from the main menu if it’s not visible) will show you the dimensions of the cropped area. Holding down the Shift key while manipulating the crop tool will constrain its proportions to match the original image. Just hit the return key to commit the crop.
The image formats for uploading to the web are JPG, PNG and GIF. The JPG format is most commonly used for photographic images and provides good image quality. The PNG format allows you to create a transparent background for your image and is useful for illustrated artwork, like logos and icons. The GIF format is often used for images with flat colors and simple shapes (logos, icons) and also for creating animated images. For this tutorial, we’re going to focus on JPG and PNG.
Reducing File Size
The goal of optimizing web images is to create the best looking image possible while maintaining the smallest file size. All of the things I’ve mentioned above (resolution, size, color mode) play a role in that optimization. Selecting the proper image format will give you the best quality images, and Photoshop’s “Save for Web” feature works well for this. It lets you save your original image as a JPG or PNG file and select the best image quality for your purposes. You can also resize your image within Save for Web.
Go to “File” in the main menu and select “Save for Web.” The Save for Web panel has many features, but I’m going to focus on just a few. The multi-pane view lets you see your original image next to a preview of the optimized image. At the bottom of each pane is information about format and file size; original image on the left, optimized image on the right. The right-hand side of the panel lets you select the image format (JPG, PNG, etc.) and the image quality. I generally leave mine set to “Very High” but you can experiment with lower quality settings and see how it affects the image.
Further down the right side you can change the size of the image, either by pixel dimensions or by percentage. When you’ve finished selecting your settings, click Save to create an optimized copy of your original image. In the example above, I’ve changed the original image dimensions from 1820×1362 pixels to 800×599 pixels. This reduced the file size from 1.83MB to 238K, a savings of about 75 percent. (And remember, the final dimensions of your image should match the target dimensions for your website.)
Beyond the image optimization capabilities of Photoshop, there are several free image optimization tools. These are useful if your image is already the proper format and dimensions and you simply want to compress it further to make the file size as small as possible. I recommend JPEGMini for JPG files. The free downloadable app will allow you to optimize up to 20 images per day (you can upgrade to a paid version for unlimited file processing). For optimizing both PNG and JPG files, I recommend the online app TinyPNG. It has a simple drag and drop interface that, upon completing optimization, shows you just how much the file was reduced.