Faster loading web pages do better in the Search Engines. Do you have images that need to look great but also would like them to load quickly? The following instructions will give you a hands on approach to reducing the file sizes utilizing Adobe® Photoshop. Please do not use a web editor to scale or resize your graphic images; this does absolutely nothing to the file size.
There are two image formats that you should be familiar with before optimizing your images: GIF and JPEG. Both JPEG and GIF are compressed. That means that information has been organized inside the file in a special way in order to minimize the file size. The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF, on the other hand, the compression is designed to optimize images with large continuous areas of color, such as illustrations.
Step 1: Open an image in Photoshop that you plan on optimizing. The most common function that you will use on your website is most likely to resize images from a digital camera or scan. If this is the case, then let’s resize the image first. Select the Image Move Tool from the Tools window. From the dropdown menu at the top of the screen, go to Image>>Image Size. A window will pop up. Take note of the resolution. It should be set at 72dpi (dots per inch). Now select the dimension that you would like the most control over, either width or height. For example: you have three images and you want to make sure that they are all the same height, or if you have a limited space in a table cell that you need to conform to… this should be in your decision making. Based upon that, select either width or height and type in your desired size. The other will be modified automatically to keep the proportions of the graphic in tact. When finished, select OK.
Step 2: Now to optimize your image. Once the image is how you want it to look, go up to the dropdown menu again at the top of the screen and select File>>Save For Web. This opens the image up in a new window. Here is where the fun begins! Based on the differences you have learned between JPEG and GIF above, you should be able to determine which format your graphic should be in. In the new window that popped up, you will select your file format from a drop down box. Once you have selected your format, you will have different tools to work with in order to compress the file down. For JPEG formats, play with the Quality slider bar and the blur tool and make sure that the box marked “optimized” is checked off. While you are manipulating the image qualities in these boxes, notice the preview of the image on the left. Does it still look good? Also take a look at the lower left hand corner. It is here that you will see the file size and download time alter with your every change. With the GIF format, the dropdowns are different, but the practice is the same. You want to keep the image looking as good as possible with the file size as low as possible. By selecting “Adaptive” and controlling the number of colors present, you can reduce file sizes considerably. The colors is easily changed from preset dropdown choices or you can manually identify the number of colors to show. The dropdown is the best bet for newbies.
Step 3: Now that you have the image resized and at the best download size, it’s time to save your work. Select Save from the window to accept the changes as you want them. This will open up the folders on your computer to allow you to save. The format is already set so you only have to worry about naming the image. It would be best to separate the image from it’s original location, perhaps in a new folder so that you will not overwrite the original or confuse the two after. Save your image and you are done!
