Decoding New York

From Decoding New York

Optimizing Photos for the Web

• Open your image in Photoshop
• Re-size your image. Select Image > Image Size
• The top item you see is “Pixel Dimensions.” The drop down menu to the right of the numbers specifies whether you are viewing the image by pixels or by inches. When working on web images, always chooses pixels.
• Make sure that “Constrain Proportions” at the bottom of the menu is checked. This step insures that when you change the width of your image, the height is changed by the same proportion, which avoids distortion.
• Enter the target width and height. Sometimes your programmer will give you dimensions that don’t fit your image exactly; make sure that neither your width or height are larger than the target dimension.
• Select File > Save for Web.
• A new window will appear. This window allows you to see your original image side by side with the optimized image that you are creating, or with various possible optimized images, depending on whether you select the “2-up” or “4-up” tab at the top of the window. Either will work.
• Make sure the zoom level is 100% (in lower left corner or “save for web” window)
• Choose the smallest file size possible without getting an unacceptably distorted image. Aim for a file size of around 20k. You can adjust the image quality (under “settings” on the right) if needed.
• Click “Save” and save your optimized image with a new filename.
• Close original image. Don’t save changes – this way you retain a copy of your original image intact, in case you need to come back to it later.