Sizing your image for the web - DPChallenge Forums

Canon EF 24-105mm f/4.0L IS

05/17/2003 02:20:00 PM · #1

I've noticed that several photos in the latest few challenges are very small, so I'll share my way of getting them the right size. There are probably other ways, and I'd like to see them, too.

This will be for Photoshop; I hope others will post methods for other applications such as Paint Shop Pro.

Step 1: Import your photo into Photoshop and make adjustments as desired (dark/light balance, hue/saturation, etc.). SAVE IT AT THIS TIME.

Step 2: select "Image Size..." from the Image Menu. Make sure "Constrain Proportions" and "Resample Image: Bicubic" are selected.

Step 3: In the Pixel Dimensions boxes, change your longest photo edge to be 640 (the DPC maximum) and then select "OK."

Step 4: Use the Unsharp Mask filter, if desired at this time (this one was new for me!--I always did it before resizing).

Step 5: In the FIle Menu, select "Save for Web..." Usually, four options of your photo will appear. Just select the best one, no matter the file size (which must be under 150k).

Step 6: Under "Settings" select "JPEG" and "Maximum." You can see the file size just under the photo you've selected.

Step 7: Adjust the Quality box until the file size is under 146K (it always adds a couple of K). Then select "Save," rename your file for the web.

You are now done! Yay! And you have two files now: your original file that is large that you saved in step #1 (from which you can make a print) and your web version, which is smaller, grainier, and not as good, but is optimized for the web.

Other notes:

For all intents and purposes, the internet only displays 72 dpi, so there is no need whatever to save your web file at any greater dpi. If you save it at 300 dpi, for example, it will still only display it at 300 dpi, and your image will need to be much smaller because of memory size.

For changing sizes for prints, see these tutorials:

//www.dpchallenge.com/tutorial.php?TUTORIAL_ID=8
//www.dpchallenge.com/tutorial.php?TUTORIAL_ID=10

And this tutorial for Paint Shop Pro:

//www.dpchallenge.com/tutorial.php?TUTORIAL_ID=15

Good luck! I hope to see other methods, if mine doesn't give me the best web image possible.

Message edited by author 2003-06-27 14:08:04.

MikeO

Fujifilm x100

05/17/2003 05:36:59 PM · #2

Thanks for that - I have had trouble with a couple of images - too small etc.

margem

Minolta DiMAGE 7Hi

05/17/2003 08:10:38 PM · #3

I was one of the postage sized people. Another thing to add, is don't wait till the last minute to submit or when you are so tired you can't think straight. I did both and manged to shoot myself in the foot by "cramming for the big one" or waiting till the last minute to submit. I had caught my mistake and fixed the file size by creating a new file and still managed to upload the wrong file. That's life.

zeuszen

Canon EOS-1Ds Mark II

05/17/2003 09:55:59 PM · #4

Sizing photos for the web using a Mac, OS X Jaguar, with iPhoto and Graphic Converter

1. Import photo into Graphic Converter and fine-tune edits not yet achieved in iPhoto (Sharpen, Channels etc.) via the Picture and/or the Effects menu.

2. Select Scale from the Picture Menu > Size. Select either Width or Height (whichever is the larger dimension) and enter 640 Pixel. Make sure the Scale Picture, Keep Proportions and Use High Quality Scaling boxes are checked. Do NOT make any additional adjustments under 'Size' here. The default resolution should remain at 72.0 for both x and y. Click OK.

3. Select Save As in the File Menu. In the Save dialog box JPEG (not JPEG 2000!) should be selected by default. Check the box labeled 'Web Ready (without resource)'. Click Options.
If the File Size box is checked, the size will be indicated to the right of it. Move the slider for Image Quality to the closest value to 132 KB (usually somewhere between 89 % and 96 %). (Up to about 18 KB may be held in latent data under OS X). Click Save. -Done.

Little Caveat: Remember to save with a file name that adheres to cross-platform conventions, i.e. without spaces and/or odd symbols in it. Do not make the name overly long either. Windows machines will not be able to read them.

Tamron AF 28-300mm f/3.5-6.3 XR Di LD Aspherical IF for Canon

05/18/2003 12:42:25 AM · #5

Just bumping this in case it is needed....

cykhansen

Canon PowerShot G1

05/18/2003 09:34:15 AM · #6

My steps 1 to 4 are the same as yours, dsidwell, but instead of
Step 5: In the FIle Menu, select "Save for Web..." etc.

I simply save as, change the filename and save as High (not maximum). That always seems to get me under 150KB, and often under 100KB. However, I haven't tried your method. I plan to do that to see if it will give me better results.

Asexaul duck

Toshiba PDR-M81

05/18/2003 12:32:53 PM · #7

That mucho helped. tsankyou

sher

Canon EOS-300D Rebel

05/18/2003 01:05:12 PM · #8

Originally posted by cykhansen:

i used to save my photos the same way, cyk...just as "save as". i find i can get a lot closer to the 150kb size if i use "save for web". the closer you can get to that size, the better it is...it keeps your photo from having the "jaggies" (technical term :P)

:D

Nikon AF Nikkor 50mm f/1.8D

05/19/2003 08:10:40 PM · #9

I'm bumping this because I've received several privat messages from folks looking for it.

frisca

Nikon D70

05/19/2003 08:50:37 PM · #10

david..is there a way to make this a tutorial? That would certainly preserve the information in it.

06/27/2003 02:06:07 PM · #11

Bump.

I've noticed several small images in recent challenges. It would be nice to have other software methods here too as zeuszen has done above.

byetko

Canon EF 70-200mm f/4.0L USM

06/27/2003 05:34:23 PM · #12

The way I do it in PS7 I go to "save for web" and theres a small arrow near the right size where you can optimize and set the file size to 150k.

MarkS224

Canon EOS-300D Rebel

06/29/2003 09:48:52 AM · #13

OK, I've saved for the web as per Dsidwell's PSE2 instructions and my print size is 3.7" x 3". This stills seems pretty small. Is this OK sized or too small?

Mark

kavamama

Panasonic DMC-FZ10

06/29/2003 09:57:22 AM · #14

Somebody check me if I'm wrong, but couldn't a high resolution reduce the size of the photo if the end result sought was 150k? I use (easy because that's how they come out of the camera) 72 pixel/inch resolution for uploading to dpc.

MarkS224

Canon EOS-300D Rebel

06/29/2003 10:13:20 AM · #15

Thanks , that got it better. 72 DPI it is!

David Ey

Nikon D80

Nikon AF Micro-Nikkor 60mm f2.8D

06/29/2003 10:41:55 AM · #16

Are you forgetting about Image>Image size where you set the number of pixels (640x480 max)? Do this BEFORE you save for web. This sets how large the image appears on one's screen. Then when you save for web you change the file size to 150K max. This effects the quality of appearance on the net.
You can also set the resolution here too but I don't think it has anything to do with viewed quality on a monitor, only on a printed photo. Actually I think your printer overrides this setting too for quality of print.

Originally posted by MarkS224:

OK, I've saved for the web as per Dsidwell's PSE2 instructions and my print size is 3.7" x 3". This stills seems pretty small. Is this OK sized or too small?

Mark

Message edited by author 2003-06-29 10:46:08.

04/07/2004 10:55:49 PM · #17

Bump.

Looks like some of us need this again.

Prof_Fate

04/07/2004 11:52:44 PM · #18

Originally posted by kavamama:

PPI/DPI have no relationship to anything regarding a monitor and web 'resolution'. When printing, then the dpi has a direct relationship to the size of the print.

For example, my monitor has a physical display size of 13.25" wide. I am running 1024x768 resolution. so across my screen the 'dpi resolution' is 77.28. However, with a click or two i can make that 800x600, so the resolution is then 60.37. or i can go 1600x1200, so then i have 120.

The picture is 640 pixels wide. that does not change, so on teh above examples, teh pic would measure on my monitor:
10.6 inches wide, 8.28 inches wide or 5.3 inches wide.

YOU have no control over my screen setting, and no matter what resolutoin you save your picture at, it will have no bearing on how it is displayed (it might if your software takes DPI and inches and does math to get teh actual file size in pixels. PS does not do that)

for more info see scantips.com

Olympus 14-54mm f/2.8-3.5 Zuiko Digital Zoom

04/08/2004 07:49:01 PM · #19

Originally posted by bestagents:

scantips.com

Interesting stuff, Chris. Of course, now I have no idea what to do anymore . . .

kposey

Sony DSC-P50

08/11/2004 05:37:00 PM · #20

I use IPhoto Express. If I shoot a picture at 640 X 480 it shows a resolution around 150, which is fine. But if I change anything, say lighting or contrast, and save it the resolution is reduced to about 50. How can I keep the resolution up?

Thanks.

TomH1000

Olympus E-3

08/11/2004 05:45:31 PM · #21

Originally posted by dsidwell:

Step 4: Use the Unsharp Mask filter, if desired at this time (this one was new for me!--I always did it before resizing).

I feel this step is very important. When you downsize you loose some of the sharpness so adding a little at this point brings the pop back into the image I think.