Preparing Your Photos for the Web – Part 2
Tools
What do you need to ensure your website has great images and to make them ‘web-ready’?
1. Adobe Photoshop
Not that many computer programs become part of the English vocabulary. “Photoshopped” is now a verb that is often used in reference to images that were edited to look better than they actually appeared in real life. Although there are a number of graphics editing programs in the market, the most commonly used (and most reliable) is still Adobe Photoshop.
Over the last two decades, Adobe Photoshop has become the professional standard digital picture and photo editing software. It is the most used software, not only because of the quality of images that it produces, but also because it is quite user-friendly, and even non-professionals will be able to get the hang of it after only a few tips and tutorials.
Preparing pictures for the web is just one of Adobe Photoshop’s many functions, and for that purpose, you won’t really need to learn every single one of its hundreds of controls.
For your website’s purposes, you’ll need only a few of Photoshop’s capabilities.
2. Scanner
3. Digital Camera
These 3 tools can really make a difference when needing to supply images for your website!
Preparing “web-ready” photos.
1. Save “Original” images .
• For editing, always use a copy, never the original.
• Save original images in a “loss-free” format such as TIFF.
• Digital cameras as well as scanners usually offer you the option to save your pictures in TIFF format. This uses lots of storage space, but gives you the best output. Save the master copy of every photo that is taken via camera or scanner, then make copies in jpeg for use on your website.
2. Plan which photos to use on your website
• After you have discussed the details of your website with your web developer, ask for a “wireframe”
. A website wireframe is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including photos.
• This is very important from your end because you’ll get to know exactly how many photos you’ll need to provide, and where each photo will end up within the website
• Discuss with your web developer if you need to do the cropping or if they only need the uncropped jpegs and will do the cropping and resizing themselves.
• Ask your web developer about the exact image sizes that they’ll need to get from you.
3. Organize folders for your website photos
• Have a “master folder” containing the original photos in TIFF format.
• With the website wireframes as a guide, make folders corresponding to every page of your website.
• Using Adobe Photoshop, open the TIFF files one by one (in the order of every page of your website), and convert them one by one, then save them in the corresponding folders.
4. Converting images to JPEG
• Using Adobe Photoshop, open the TIFF file.
• Click the “File” menu and then “Open” to select your TIFF file. Once the file is open, click “File” and then “Save As.” When the pop up appears you will want to select JPG as your file type.
• Make sure you save them in the correct order of website folders.
5. Cropping
• First of all, discuss with your web developer if it needs to be you who’ll do the cropping or if they only need the uncropped jpegs and will do the cropping and resizing themselves. Knowing this will also save you a lot of time and effort.
• If you have agreed that it will be you who’ll do the cropping, then open Photoshop
• Click on the Crop icon from the icon bar at the side of the window.
• Use your mouse to draw a box around the area of the photograph you want to keep. Hit enter or right-click your mouse and select Crop.
6. Saving JPEGs for the Web
• Resize your photo to a the size that you and your web developer have agreed on. To do this, click “Image>Image Size,” enter the desired width in the “Pixel Dimensions” box and click “OK.”
• Click “File>Save for Web” to open the Save for Web dialog box.
• In the top left corner of the Save for Web window are a series of tabs labeled Original, Optimized, 2-Up and 4-Up. You can switch between a view of your original photo, your optimized photo (with the Save for Web settings applied to it), or a comparison of 2 or 4 versions of your photo. Choose “2-Up” to compare the original photo with the optimized one. You will now see side-by-side copies of your photo.
• Click on the photo on the left side to select it. Choose “Original” from the Preset menu on the right side of the Save for Web window (if not already selected). This will put a preview of your original, unedited photo on the left side.
• Click on the photo on the right side to select it. Choose “JPEG High” from the Preset menu. You can now compare your optimized photo on the right (which will eventually be your final file) with your original on the left.
• Edit the jpeg quality. The objective is to find a balance between file size and quality. A quality between 40 and 60 is usually a good range, depending on your needs. Try using the preset quality levels (i.e. JPEG Medium) to save time.
• Once you are satisfied with your photo on the right, click the “Save” button. The “Save Optimized As” window will open. Type a file name, browse to the desired folder on your computer and click “Save.”
Look out for Part 2 of Preparing Photos for the Web later this week!
