How to Optimize Photos for Web in Photoshop
How to Optimize Images with Adobe Photoshop
Since images can be very large in terms of kilobytes or megabytes, they must be optimized for quick webpage loading. This tutorial discusses the optimization of JPG, GIF, and PNG images, how they differ, and how to optimize them in Adobe Photoshop.
If unsure of the difference between these three image file formats, we recommend you first read our tutorial JPG, GIF, & PNG Image File Formats. Also, the terms optimize and compress are used interchangeably throughout this tutorial.
○ This tutorial contains affiliate links. Read our disclosure policy to learn more. ○
Optimization Options
When optimizing the file in Adobe Photoshop, you can choose to compress the file as a JPG, GIF, or PNG. If you choose JPG compression, you can select the percentage of compression, and the resulting file will have a file extension of .jpg. If you choose GIF or PNG, you can choose how Photoshop should handle colors and transparency during compression, and the compressed file will have a file extension of .gif or .png. We cover the various options you can choose during compression later in this tutorial.
JPG Optimization Overview
As the JPG format supports 16.8 million colors and GIF supports only 256, most photographs are stored as JPG files and should be compressed with JPG. The only exceptions are when transparency is required, or one wishes to seamlessly blend an image's background color to the background color of a webpage or other medium.
During JPG compression, the file will lose some of its original image data, or color purity. Because of this, compression of JPG files is termed "lossy." If you compare an optimized JPG file with its original, you will notice that solid areas of color in the compressed file contain a bit of "noise" - or pixels whose color has changed slightly from the original color. Also, some edges that were sharp may now be slightly blurred.
If you want to change a file that has already been optimized, always start with the original file! Make your changes, compress the file, and save the image with the same file name as the file you are replacing. Do not begin with the compressed file or the quality will continue to degrade due to the "lossy" nature of JPG compression.
GIF and PNG Optimization Overview
In contrast, compression of GIF and PNG files is termed "lossless" because colors retain their true values. However, as these image formats only supports 256 colors, only certain images should be compressed as GIF or PNG files, otherwise the image file might be quite large. Photographs and images that contain lots of different colors and color gradients will typically compress better as JPG files.
The only time it may be necessary to optimize a file as a GIF or PNG even though file size does not decrease significantly is when you need to match the background color or edge of the image to a background upon which it will be placed, or if the image must retain its areas of transparency. Only GIF and PNG support transparency; JPG does not.
Optimizing an Image in Adobe Photoshop
To compress a file for the web in Adobe Photoshop, open the file, and click File / Save for Web (or Save for Web & Devices …). The Save for Web window opens. There are four tabs at the top. The 4-Up tab is most useful because it allows you to compare the original image with three different compressed images that Photoshop creates based on different optimization settings. Depending on the image characteristics, Photoshop may display both JPG and GIF images. You can click on any of the 3 images and change any of its settings.
To see the differences in quality of the compressed files, you may have to click the Magnifier Tool in the upper left menu strip. Then clicking on any of the images will magnify them all. To see a portion of the magnified image not currently visible, click the Hand Tool in the same menu strip and drag the image, or just press the spacebar and drag the image.
When you click on one of the compressed images, you will see the available compression options in the upper right corner of the Save for Web window.
When you are finished compressing your image, click Save, and in the Save Optimized As window, type in a filename that is different than the original image, and click Save. Then close the original file without saving it.
A KeynoteSupport.com Tutorial
JPG Optimization Options
After taking the Save for Web option, click on the 4-Up tab. The original image is in the upper-left. Click on the upper-right image, select JPG under Settings and make sure the Optimized box is checked. Then choose High from the dropdown arrow in the box below. Repeat the process for the other two images, choosing Medium and Low instead. Notice that the percentage of compression is displayed in the Quality box and on the image itself. You can tweak the percentage by entering a number in the Quality box, or clicking the arrow and dragging the slider.
The Progressive option, when selected, saves the file in such a manner that the image is sent to the user's computer in several passes with the image quality improving with each pass. This option is most useful for visitors with low-speed Internet access.
Below the Settings are the Color Table and Image Size. If you want to change the dimensions of the image, click the Image Size tab. Enter the desired width or height in pixels, and make sure the "Constrain Proportions" box is checked. Then click Apply. The Color Table is not applicable for JPG compression.
GIF and PNG Optimization Options
After taking the Save for Web option, click on the 4-Up tab. The original image is in the upper-left. Click on the upper-right image and select GIF or PNG near to top of the sidebar. Below the file type, click the dropdown arrow to view the Color Reduction Algorithm selections. If your image contains less than 256 colors, then this setting is not very meaningful unless you want to constrain yourself to only using web-safe colors. Otherwise, if your image has a few more than 256 colors, then Adobe needs to know what 256 colors you want it to use. Your choices are:
- Perceptual: Adobe will choose the 256 colors from the image that the human eye is most sensitive to.
- Selective: Adobe will choose the 256 colors from the image that are the most prevalent and favor web-safe colors. This is the default setting.
- Adaptive: Adobe will choose the 256 colors from the image that are most commonly seen in the image.
- Restrictive (Web in older versions): Adobe will use the 216 web-safe colors for the image.
If the image being compressed does not appear to have the same colors as the original, try the Perceptual and Adaptive algorithms in the other images in the 4-Up window and compare. There can be a huge difference depending on the image.
Dithering: The concept of dithering is that the system displays alternating pixels of two different web-safe colors in an attempt to trick the eye into seeing a third color that is not supported. If you are using only web-safe colors, you need not be concerned about dithering. If you are not using the web-safe palette but don't care how perfectly your images display on the old systems, forget about dithering. Even when images are dithered in an attempt to enhance their quality of display on the old systems, the effort is often not worth the end result. In the 4-Up window you can choose the web-safe palette and turn on dithering to see what the images look like.
A KeynoteSupport.com Tutorial
How to Make Images Blend Seamlessly on a Webpage
If you want the background color of an image to blend seamlessly with the background color of a webpage, PowerPoint slide, ImageReady poster, etc., you must do two things. First, make sure the background or edge color of the image has the exact same 6-digit hexadecimal code that you have specified for your webpage or poster background color.
Secondly, you must you must optimize the original image using GIF or PNG as both of these file types are "non-lossy" or "lossless" - the color in the image retains the exact color you specify. Just make sure the Lossy value is set to its default of 0 (zero) on the "Save for Web" window in Adobe Photoshop.
We hope you've enjoyed our tutorial about Optimizing Images in Photoshop. Cheers!
↑ Return to the top
How to Optimize Photos for Web in Photoshop
Source: https://www.keynotesupport.com/pc/optimizing-web-graphics.shtml
0 Response to "How to Optimize Photos for Web in Photoshop"
Post a Comment