Approve the Cookies
This website uses cookies to improve your user experience. By using this site, you agree to our use of cookies. Read More.
OK
Index  •   • New posts  •   • RTAT  •   • 'Best of'  •   • Gallery  •   • Gear  •   • Reviews
New posts  •   • RTAT  •   • 'Best of'  •   • Gallery  •   • Gear  •   • Reviews
Register to forums    Log in

 
FORUMS Post Processing, Marketing & Presenting Photos RAW, Post Processing & Printing
Thread started 20 Jan 2007 (Saturday) 08:11
Prev/next
sponsored links
(this ad will go away when you log in as registered member)

STICKY: PS Tutorial - Resizing Images Using Save For Web

 
Scottes
Trigger Man - POTN Retired
Scottes's Avatar
12,842 posts
Joined Nov 2003
A Little North Of Boston, MA, USA
Jan 20, 2007 08:11 |  #1

NOTE: This tutorial is very old. It was made in January 2007, and Photoshop has been updated numerous times. You might want to look for a tutorial that is more appropriate for the version you are using.


NOTE: The new maximum for attachments is 150KB. The new maximum dimensions for all embedded images is 1024 X 1024px.

Resizing Images Using Save For Web
Saving images to sizes that are appropriate for viewing on the web can sometimes be tricky. This tutorial discusses the process of saving your photo using Photoshop's Save For Web feature.

The POTN Image Posting Rules state that any image posted here must be no longer than 800 pixels on the longest side. Furthermore, if you use the Attach feature you're limited to 100KB. If you host your image on another site you can have a larger file size, but I'll stick with 100KB for this tutorial. (If you do host your images on another site please try to stay below 150 KB. It's not a rule, but larger images slow people down and it's almost never necessary to go above 150KB for an 800-pixel image.)

Resize The Image
The first thing you want to do is get the image so that it's 800 pixels on the longest side. The easiest way to do this is using Photoshop's Fit Image tool. In CS2 this can be found by clicking on File... Automate... Fit Image. A small box will pop up saying "Constrain Within" and listing 2 boxes, Width and Height. Simply type in "800" in both boxes and click OK. Your image will be re-sized to 800 pixels on the longest side.


If you don't have Fit Image then you can click on Image... Image Size. You'll get the following box:

IMAGE: http://www.itsanadventure.com/postimages/ImageSize.jpg

On the bottom left make sure that all 3 boxes are checked. For the resampling type I always use Bicubic. Bicubic Sharper is good for resizing images smaller, but I never use it because I like to control the sharpening and Bicubic Sharper doesn't allow you to change the sharpening strength or type.

In the top boxes, under Pixel Dimensions, change the Width to 800. You'll see that the Height changes automatically. If the Height is larger than 800 simple change that to 800 and the Width will change automatically.

Ignore all the other boxes, no matter what they say. Trust me. Just click OK and your image will resize.


Sharpen The Image
Next you want to view at 100%, so click on View... Actual Pixels or hit Control-Alt-0 (zero).

At this time you want to sharpen the image to suit this size. I will not go into sharpening here - it's far too complicated for a quick tutorial.

Convert to sRGB
To make sure that the image's color display properly on the web you will want to convert to the sRGB colorspace. (If your working colorspace is already sRGB you can skip this.)

The process for doing this changed in Photoshop CS2, and it's been a while since I used older versions of PS, but...

In PS CS or older: Click on Image... Mode... Convert to Profile
In PS CS2: Click on Edit... Convert to Profile.

A box will pop up with some options.

IMAGE: http://www.itsanadventure.com/postimages/ConvertToProfile.jpg

The options that I almost always use are shown above:
* Destination Space: sRGB IEC61966-2.1
* Engine: Adobe
* Intent: Perceptual
* Use Black Point Compensation: Checked
* Use Dither: Unchecked
* Flattten Image: Checked
(These last two might be grayed out. Don't worry.)


Preview The Color Changes
Check and uncheck the Preview box a few times to see if any color change is occurring. You should not be able to detect any change - well, you might but it's almost always very slight.

Click OK.


The Save For Web Dialog
Next click on File... Save For Web.

Along the top are 4 tabs. Click on "2-Up" which will display the original image (on the left) next to the image that will be saved.

Near the top rght corner you'll have a box with choices of GIF, JPG, PNG, etc. Set it to JPG.
Below that uncheck both Progressive and ICC Profile.
To the right of that check Optimized

IMAGE: http://www.itsanadventure.com/postimages/SaveForWeb1.jpg

Now look at the image on the right, and look all the way at the bottom. You'll see something like:

IMAGE: http://www.itsanadventure.com/postimages/SaveForWeb4.jpg

As long as that number below "JPEG" is 100.00K or lower you're fine. But if it's larger, look back up near the top right corner, to the right of where you set JPG, you'll see a box called Quality and it will probably say "100" in it but will say something between 1 and 100.

IMAGE: http://www.itsanadventure.com/postimages/SaveForWeb3.jpg

Click the arrow to the right of the number and a slider will pop up.
Grab the triangle and slide it until the size is below 100.00k.

IMAGE: http://www.itsanadventure.com/postimages/SaveForWeb2.jpg


Compare The Changes
Now check out the image on the right, which is what it will look like once you save. Does it look OK? Compare this to the original on the left.

You can use the tools on the left, Hand and Zoom, to scroll around or zoom in. You'll see that both images scroll or zoom simultaneously allowing to to compare. It's a very good idea to zoom in to compare and important feature, like a subject's eyes. I never zoom in more than once, which puts you at 200%.

So how do they compare? If the right image looks OK, and you're below 100.00K then you can just hit Save in the top right corner. But if the image doesn't look so great you may need to start all over again with a smaller image. Go back to the beginning of this tutorial, but instead of resizing to 800 pixels try 700 pixels. It may even take a few tries to get the image as small as possible while retaining quality.


Save The New Image
So once everything is set - 100.00K and the image on the right looks good - click on the Save button in the top right corner. You'll be prompted for a file - just be sure not to over-write your original! I save my web images in a separate directory to make sure that these version are kept separate from the originals.

This process should get you a fine-looking image at 800 pixels and 100 KB. Here's an example - 800x533 pixels and 99.62 KB:

IMAGE: http://www.itsanadventure.com/postimages/Wolf_55254.jpg


I hope this helps some folks. Enjoy!


Some Useful Links

POTN Image Posting Rules
Tutorial: How to attach photos to a post
Tutorial: Where to host my photos

You can take my 100-400 L away when you pry it from my cold, dead fingers.
Scottes' Rum Pages - Rum Reviews And Infoexternal link
Follower of Fidget - Joined the cult of HAMSTTR©

LOG IN TO REPLY
sponsored links
(this ad will go away when you log in as registered member)
MDJAK
Cream of the Crop
MDJAK's Avatar
24,618 posts
Gallery: 7 photos
Joined Nov 2004
New York
Jan 27, 2007 18:58 |  #2

That was helpful. Thank you.

I just posted and asked how to make a 100 percent crop. Suppose you wanted to crop just the wolf's nose at 100 percent. Wouldn't the result be a very small picture, much too small for evaluation in a thread? Do you then take that very small crop and enlarge it to 800 on its longest size?

For some reason, if I do that, my results vary from poor to not so good.

thanks
mark




LOG IN TO REPLY
Scottes
THREAD ­ STARTER
Trigger Man - POTN Retired
Scottes's Avatar
12,842 posts
Joined Nov 2003
A Little North Of Boston, MA, USA
Jan 27, 2007 19:51 |  #3

A "100% Crop" is a cropped area viewed at 100%, or actual pixels. The process would be to use the Crop or Marquee tool to highlight the area you wish to save, crop that area out. Do not resize, do not sharpen, do not adjust contrast or saturation. Then use Save For Web to save that cropped section as a JPG. It's best to crop a small area - like 400x400 - and save at a high quality so that JPG compression doesn't affect it. This will leave you with the best representation of exactly what the camera captured.


You can take my 100-400 L away when you pry it from my cold, dead fingers.
Scottes' Rum Pages - Rum Reviews And Infoexternal link
Follower of Fidget - Joined the cult of HAMSTTR©

LOG IN TO REPLY
Scottes
THREAD ­ STARTER
Trigger Man - POTN Retired
Scottes's Avatar
12,842 posts
Joined Nov 2003
A Little North Of Boston, MA, USA
Feb 12, 2007 19:43 |  #4

Optimize To File Size

I didn't even know this option existed until a few minutes ago when I read a post from rowdyred94. When in the Save For Web dialog box you can specify a particular file size and Photoshop will get the best quality that will fit into that file size.


On this menu:

IMAGE: http://www.itsanadventure.com/postimages/SaveForWeb1.jpg
Make sure the Preset is set to "JPEG High" and make sure that Optimized is checked.


Next click on the little triangle button above the Optimize checkbox (I highlighted it in red). From the flow-out menu choose "Optimize To File Size" - (if it's greyed out click on your right image and try again).
IMAGE: http://www.itsanadventure.com/postimages/OptimizeToFileSize.jpg


Next, enter the file size and set the other options:
IMAGE: http://www.itsanadventure.com/postimages/OptimizeToFileSize2.jpg


When you click on OK the settings will be automatically adjusted to fit the size specified. Now click on the Save button and give it a name. It's that simple.

You can take my 100-400 L away when you pry it from my cold, dead fingers.
Scottes' Rum Pages - Rum Reviews And Infoexternal link
Follower of Fidget - Joined the cult of HAMSTTR©

LOG IN TO REPLY
Beau ­ Hudspeth
-Cool Title-
Beau Hudspeth's Avatar
Joined Aug 2005
Aloha, Or.
Feb 13, 2007 15:07 |  #5

Question: When you save for web, do you normally leave the DPI at 300 as opposed to dropping it to 72? If so, can you explain why please?

Thanx!


_______________
My FAVORITE ImageGear List

Photoshop Action SetMy Flickrexternal link
_______________

LOG IN TO REPLY
In2Photos
Cream of the Crop
In2Photos's Avatar
19,808 posts
Joined Dec 2005
Near Charlotte, NC.
Feb 13, 2007 15:13 |  #6

Beau Hudspeth wrote in post #2703335external link
Question: When you save for web, do you normally leave the DPI at 300 as opposed to dropping it to 72? If so, can you explain why please?

Thanx!

DPI/PPI doesn't matter for web viewing, only for printing. Let's say for demonstration purposes that your image is 800x533 pixels. This image at 72 or 300 DPI/PPI will still be 800 pixels wide when viewing the image on your screen. But if printed, now the image will change. 800x533 @72 dpi will be 11.11 x 7.4 inches. That same image at 300 dpi would be only 2.67 x 1.78 inches.


Mike, The Keeper of the Archive

Current Gear and Feedback| My Pbase Galleryexternal link | mdsportsphoto.comexternal linkhttp://photography-on-the.net/forum/showthre​ad.php?t=835433

LOG IN TO REPLY
In2Photos
Cream of the Crop
In2Photos's Avatar
19,808 posts
Joined Dec 2005
Near Charlotte, NC.
Feb 13, 2007 15:16 |  #7

MDJAK wrote in post #2610787external link
That was helpful. Thank you.

I just posted and asked how to make a 100 percent crop. Suppose you wanted to crop just the wolf's nose at 100 percent. Wouldn't the result be a very small picture, much too small for evaluation in a thread? Do you then take that very small crop and enlarge it to 800 on its longest size?

For some reason, if I do that, my results vary from poor to not so good.

thanks
mark

Here is a 100% crop tutorial I posted some time ago:

First Post
Second Post


Mike, The Keeper of the Archive

Current Gear and Feedback| My Pbase Galleryexternal link | mdsportsphoto.comexternal linkhttp://photography-on-the.net/forum/showthre​ad.php?t=835433

LOG IN TO REPLY
Beau ­ Hudspeth
-Cool Title-
Beau Hudspeth's Avatar
Joined Aug 2005
Aloha, Or.
Feb 13, 2007 21:53 |  #8

In2Photos wrote in post #2703362external link
DPI/PPI doesn't matter for web viewing, only for printing. Let's say for demonstration purposes that your image is 800x533 pixels. This image at 72 or 300 DPI/PPI will still be 800 pixels wide when viewing the image on your screen. But if printed, now the image will change. 800x533 @72 dpi will be 11.11 x 7.4 inches. That same image at 300 dpi would be only 2.67 x 1.78 inches.

I completely understand the dpi/ppi from the printing standpoint, I usually resize to the monitors native 72 dpi when reducing for the web. :)


_______________
My FAVORITE ImageGear List

Photoshop Action SetMy Flickrexternal link
_______________

LOG IN TO REPLY
René ­ Damkot
Cream of the Crop
René Damkot's Avatar
39,856 posts
Joined Feb 2005
enschede, netherlands
Mar 30, 2007 10:47 |  #9

Scottes wrote in post #2570740external link
[B] Below that uncheck both Progressive and ICC Profile.

Why?
I prefer an ICC profile in web images. If only for those who do browse colormanaged...


"I think the idea of art kills creativity" - Douglas Adams
Why Color Management.
Color Problems? Click here.
MySpaceexternal link
Get Colormanagedexternal link
Twitterexternal link
PERSONAL MESSAGING REGARDING SELLING OR BUYING ITEMS WITH MEMBERS WHO HAVE NO POSTS IN FORUMS AND/OR WHO YOU DO NOT KNOW FROM FORUMS IS HEREBY DECLARED STRICTLY STUPID AND YOU WILL GET BURNED.

LOG IN TO REPLY
Scottes
THREAD ­ STARTER
Trigger Man - POTN Retired
Scottes's Avatar
12,842 posts
Joined Nov 2003
A Little North Of Boston, MA, USA
Mar 30, 2007 12:19 |  #10

It saves something like 1.8K, and the ICC info is useless to almost all browsers out there. AFAIK Safari is the only one that makes use of it.


You can take my 100-400 L away when you pry it from my cold, dead fingers.
Scottes' Rum Pages - Rum Reviews And Infoexternal link
Follower of Fidget - Joined the cult of HAMSTTR©

LOG IN TO REPLY
TomBrooklyn
Member
201 posts
Joined Jun 2006
Brooklyn, NY
Mar 31, 2007 11:24 |  #11

Scottes wrote in post #2570740external link
Sharpen The Image I will not go into sharpening here - it's far too complicated for a quick tutorial

Hi Scottes,
Thanks for that useful info on resizing. Is there any sharpening tutorial on the web that you can recommend? =TBk




LOG IN TO REPLY
Scottes
THREAD ­ STARTER
Trigger Man - POTN Retired
Scottes's Avatar
12,842 posts
Joined Nov 2003
A Little North Of Boston, MA, USA
Mar 31, 2007 12:01 |  #12

Take a look at The Light's Right web site. He's got a few sharpening tutorials, medium to advanced level. Be sure to check out his TLR Sharpening Toolkit, a collection of actions to aid sharpening.

http://www.thelightsri​ghtstudio.com/digital-darkroom.htmexternal link
http://www.thelightsri​ghtstudio.com/TLRSharp​eningToolkit.htmexternal link


You can take my 100-400 L away when you pry it from my cold, dead fingers.
Scottes' Rum Pages - Rum Reviews And Infoexternal link
Follower of Fidget - Joined the cult of HAMSTTR©

LOG IN TO REPLY
spcalan
Senior Member
621 posts
Joined Nov 2006
Clermont, Georgia
Jun 13, 2007 08:00 |  #13

What is the normal size for
1. Thumbnails
2. Medium Thumbnails
3. Full Page Photos
I am trying to upload some to my website and cannot get the sizes right.


Alan Hicks
Canon 5D w/Grip/ Canon Rebel 6mp ( back-up ) - Sold
28-135 USM IS / 50mm 1.4 / - Sold
Bunches of Lexar Pro 2GB/4Gb cards - Still got

LOG IN TO REPLY
In2Photos
Cream of the Crop
In2Photos's Avatar
19,808 posts
Joined Dec 2005
Near Charlotte, NC.
Jun 13, 2007 08:06 |  #14

spcalan wrote in post #3369669external link
What is the normal size for
1. Thumbnails
2. Medium Thumbnails
3. Full Page Photos
I am trying to upload some to my website and cannot get the sizes right.

Thubnails vary in size but around 80 pixels is fine. Not sure about "Medium Thumbnails". For full page photos I use 1200 pixels wide for landscape shots and 800 tall for portrait. The forum limit is 800 though.


Mike, The Keeper of the Archive

Current Gear and Feedback| My Pbase Galleryexternal link | mdsportsphoto.comexternal linkhttp://photography-on-the.net/forum/showthre​ad.php?t=835433

LOG IN TO REPLY
spcalan
Senior Member
621 posts
Joined Nov 2006
Clermont, Georgia
Jun 13, 2007 08:08 |  #15

What I am wanting to do, on my web page.
Is have a smaller photo, and then being able to click the photo and another page open up with a full size photo on it.
I want to be able to put 8-10 "see-able" thumbnails on a page at once
What would that size be?


Alan Hicks
Canon 5D w/Grip/ Canon Rebel 6mp ( back-up ) - Sold
28-135 USM IS / 50mm 1.4 / - Sold
Bunches of Lexar Pro 2GB/4Gb cards - Still got

LOG IN TO REPLY
sponsored links
(this ad will go away when you log in as registered member)

126,467 views & 0 likes for this thread
PS Tutorial - Resizing Images Using Save For Web
FORUMS Post Processing, Marketing & Presenting Photos RAW, Post Processing & Printing


Not a member yet? Click here to register to the forums.
Registered members get all the features: search, following threads, own gear list and ratings, likes, more forums, private messaging, thread follow, notifications, own gallery, settings, view hosted photos, own reviews and more...


AAA

Send feedback to staff    •   Jump to forum...    •   Rules    •   Index    •   New posts    •   RTAT    •   'Best of'    •   Gallery    •   Gear    •   Reviews    •   Polls

COOKIES DISCLAIMER: This website uses cookies to improve your user experience. By using this site, you agree to our use of cookies. Privacy policy and cookie usage info.

POWERED BY AMASS 1.4version 1.4
made in Finland
by Pekka Saarinen
for photography-on-the.net
Spent 0.0021 for 4 database queries.
PAGE COMPLETED IN 0.04s
Latest registered member is Redski
917 guests, 409 members online
Simultaneous users record so far is 6106, that happened on Jun 09, 2016