{"id":589,"date":"2009-08-21T14:02:45","date_gmt":"2009-08-21T19:02:45","guid":{"rendered":"http:\/\/www.blog.jimdoty.com\/?p=589"},"modified":"2012-12-04T23:14:07","modified_gmt":"2012-12-05T04:14:07","slug":"resizing-photos-for-the-web-with-photoshop","status":"publish","type":"post","link":"https:\/\/www.blog.jimdoty.com\/?p=589","title":{"rendered":"RESIZING PHOTOS FOR THE WEB WITH PHOTOSHOP"},"content":{"rendered":"

\"Bay
\nBay Area Bridge. Photo \u00c2\u00a9 Jim Doty Jr.<\/em><\/p>\n

I was asked recently how to re-size images for the web using Photoshop. The person asking the question was not only having problems resizing images, but the photos looked desaturated with muted colors.\u00c2\u00a0 My instructions (below) are for using Photoshop CS3 for Windows, so some menu items may be a little different in other versions of Photoshop or with Photoshop Elements, but the basic principles and steps are the same.<\/p>\n

My reply follows.<\/p>\n

<\/p>\n

*** \u00c2\u00a0 ***\u00c2\u00a0\u00c2\u00a0 ***<\/p>\n

Resizing is simple. It is what you do before you re-size the photo that might mess up your image quality.<\/p>\n

I prefer to save images with the metadata (including my copyright info) intact. If you want to strip out the metadata, replace step 6a below with step 6b, the Save for Web and Devices option.<\/p>\n

Some of the menu items might vary depending on the version of Photoshop you are using.<\/p>\n

1.\u00c2\u00a0 MOST IMPORTANT!\u00c2\u00a0 Save your full size image with all layers and corrections intact as a PSD file. This is your master file. That way you can go back and rework your master file if you want to tweak the image. Don’t save over this master file. When you save your web sized image, give it a slightly different name so you don’t risk saving over your master file (more about this later.<\/p>\n

Photoshop menu items and dialog box choices are in bold type<\/strong>.<\/p>\n

2. Flatten the image<\/p>\n

Layers > Flatten Image <\/strong><\/p>\n

3. Convert your image from 16 bit to 8 bit<\/p>\n

Image > Mode<\/strong>, check 8 Bits\/Channel <\/strong><\/p>\n

You should work with 16 bit images whenever possible for the best image quality. You should only switch to 8 bit when you are preparing an image for the web.
\n4. Change the color profile from Adobe RGB (or ProPhoto RGB) to sRGB to maintain the color quality of your image on the web.<\/p>\n

Edit > Convert to Profile<\/strong>, choose sRGB IEC61966-2.1<\/strong><\/p>\n

Adobe RGB is a good color space to use for working on your images since it has a wider color gamut (range of colors) than sRGB, but if you post an Adobe RGB image on the web, the colors will looked muted or washed out (desaturated).
\n5. Now you can re-size the photo.<\/p>\n

Image > Image Resize<\/strong><\/p>\n

Make sure the Constrain Proportions<\/strong> box is checked. that way when you change one dimension, the other will change proportionately so your image isn’t distorted.
\nChange the longest dimension (whether it is length or width) to the size of your choosing (the other dimension will change proportionately). I usually change the longest dimension to around 400 pixels (for a small image), 600 pixels, or 800 pixels (the largest size I would recommend for the web.
\nClick OK<\/strong>.<\/p>\n

6. IMPORTANT. When you save your re-sized image, change the name in some slight way as an extra precaution against saving over your master file (step 1).\u00c2\u00a0 It can be as simple as adding “w4” to the end of the file name to indicate a web image resized to 400 pixels on one side.
\nFile > Save As<\/strong><\/p>\n

In the File Name<\/strong> box, change or add something to the file name so it is different from the master file.<\/p>\n

In the Format<\/strong> box, choose JPEG<\/strong><\/p>\n

Click SAVE<\/strong>.<\/p>\n

In the Jpeg Options<\/strong> box that opens, choose a quality of 8 or 10. That is good enough for small web-sized images.
\nFor Format Options<\/strong>, I choose Baseline Optimized<\/strong>.<\/p>\n

Click OK<\/strong>.<\/p>\n

You now have a web sized file with all metadata intact, ready for the web.<\/p>\n

***
\nTO STRIP METADATA FROM THE PHOTO.
\nDo steps 1-5 above.<\/p>\n

6b.\u00c2\u00a0 Use the Save for Web and Devices options.<\/p>\n

File > Save for Web and Devices<\/strong><\/p>\n

Preset drop down:\u00c2\u00a0 Jpeg High<\/strong><\/p>\n

Check the Optimized<\/strong> box.<\/p>\n

Set Quality<\/strong> at 60<\/strong> or higher.<\/p>\n

Click SAVE<\/strong>.<\/p>\n

A dialog box will open.<\/p>\n

In the File Name<\/strong> box, change or add to the file name so it doesn’t overwrite your master file.<\/p>\n

In the Save as Type<\/strong> box, choose Images Only (*.jpg)<\/strong>.<\/p>\n

Click SAVE<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Bay Area Bridge. Photo \u00c2\u00a9 Jim Doty Jr. I was asked recently how to re-size images for the web using Photoshop. The person asking the question was not only having problems resizing images, but the photos looked desaturated with muted … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,12],"tags":[],"class_list":["post-589","post","type-post","status-publish","format-standard","hentry","category-computing-and-software","category-general","category-photoshop"],"_links":{"self":[{"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=\/wp\/v2\/posts\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=589"}],"version-history":[{"count":2,"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions"}],"predecessor-version":[{"id":3286,"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions\/3286"}],"wp:attachment":[{"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blog.jimdoty.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}