It took me hours and hours and hours -- never did get the bio picture down to 15 KB file size. That just seemed impossible.
As you may surmise I am having a really difficult time making any sort of order out of getting pictures converted (usually from Adobe Photoshop .psd's in the size range of 20mb) to pictures that display well on the web.
What sort of order do you all use? Following is what I have been trying to do.
1. First I take a large psd file that I am working on, flatten the file (if necessary) and then convert the profile to sRGB, under Adobe's Edit, Convert to Profile Window.
2. Then I have been converting the flattened psd file into jpg format by going to "Image Size," changing the resolution to 72 (from somewhere around 300), changing the long-side pixel measurement to somewhere between 400 and 600 pixels (letting the short side default). That changes the image measurements, but I don't touch those.
2. Next I save the image-size-altered file to a .jpg format but the total file size listed back in the image size window doesn't seem to correspond to the final saved file size.
I have tried using File, Save for Web (after I size down the psd file) but that seems to produce ridiculously small file sizes -- not very good choices in other words.
I must be doing sometehing wrong AND there must be an easier way. At this rate I could get old and in my grave before I get 3 pictures loaded onto the Internet.
Also, while I am asking what is a good safe size to put up on your website (compromise between good viewing and people stealing).
Thanks so much for any help you can give me.
Posted by Steve Foss on January 4, 2007 at 9:43 PM
Laurel, I also use the "save for Web" feature in photoshop CS2 to make my images ready for my Web site and for other online posting. As a rule of thumb, I first size my horizontals to 600 or 700 pixels across and verticals to about 450 pixels across, all at 72dpi. Then I select "save for Web" choosing to save at an 80 percent quality jpeg. Saving for Web doesn't reduce file size by making the image suck. Partly, it strips the administrative data associated with the image, which reduces file size. I've found my images retain very nice sharpeness and color subtlety, to my eye, at least, when I follow this protocol.
1) Flatten image if necessary
2) Resize to 640x426 pixels for landscape format and 426x640 if it's a portrait format
3) Convert profile to sRGB if necessary
4) Sharpen if necessary
5) Save As for Web, JPEG 75% quality is good enough.
Save for Web is the right thing to do - it does produce smaller files than you get through the other procedures, since it uses better algorithms and yet maintains a lot of information.
As to the stealing part - there was a saying "Locks are meant to deter the good guys". Bad guys will always steal.
I feel inspired. I think I will go back to the picture I posted to My NPN gallery and do it again . . . I hope I will see a difference in what I produced earlier and the image I will generate with your methods; I have, hitherto been really, really disappointed in the web display of my converted images. (I know how to get a good print; I just hadn't known how to get a good web display). I now understand why my file sizes didn't correspond (the administrative data, added to the final file size).
Regards, Laurel
lpauline@fromwhereshestood.com
Posted by Bill Chambers on January 5, 2007 at 8:41 AM
Hi Laurel - I choose NOT to use the Save for Web command, so if your interested in another method here goes.
After finishing any post processing I do the following:
Layer>Flatten image
Image>Image Size - change to 72 dpi, then adjust long side to 720 pixels. Short side defaults to whatever.
Image>Mode - change to 8 bits from 16 bits
Edit>Convert to Profile - change to sRGB
File>Save as - change format from PSD to JPEG, save in appropriate folder. When the JPEG Options screen comes up I use the slider under Image Options to adjust image size to something under 200 KB (usually under 180 KB because the finished file size is always a little higher than what shows, usually by 15-20 KB).
I've had better luck using this option than the Save for Web option in that my colors seem to retain better values.
Posted by Steve Zimic on January 5, 2007 at 9:19 AM
Laurel,
The goal here is to have an image of 720 pixels on the longest side and a file less than 200KB. Step 1 is fine. Next assuming your original is already saved, go to image>dupicate and then close your original file. For step 2 don't worry about DPI or document size - they mean nothing for the web. So now when you go into 'image size' first make sure the resample box is checked then go to the top and change the largest pixel dimension to around 1000 pixels - as you said the shorter dimension falls where it may. Next at the bottom of the 'image size' dialog box, choose 'bicubic sharper' to preserve as much detail as possible. At this point you may want to slightly oversharpen the image so it looks good online.
Step 3 Choose 'save for web'. Made sure the JPEG format is selected. Also check the 'ICC profile' box. Select the tab for image size and make the largest dimension 720 and click 'apply'. Near the top of the 'save for web' dialog box there's a little right pointing arrow. Click on that arrow which will give you a option to 'optimize to file size'. When that comes up, set it to 199K. Click 'Save' and your done. When the PS window comes back you can now close the duplicate file without saving it.The save for web command strips out all the EXIF information such as date, shutter speed etc. etc. which allows more space for preserving the quality of the image.
I use save for web and never have any problems whatsoever. I save for web, make the longest side 720 pixels, and adust the quality to the % i need to get the image just under 200mb. Of course, sometimes the quality will be lower than you want, but I have not had any problems there. You could adjust the size accordingly. Then I save the downsized photo in a temporary folder to access when I post. I hope you get the kinks worked out so you can post lots of images!
Posted by David Marotta on January 5, 2007 at 11:44 AM
These tips and tricks have helped tremendously. I've been racking my brains out over this and now it's a cinch. Thanks for taking the time to help those of us who are graphically challenged.
Posted by Bill Chambers on January 5, 2007 at 11:48 AM
Laurel - just a little clarification on what Steve mentioned about changing the dpi. It's true that will not make any difference in web presentation, but if someone steals the image from the web and it's at 360 dpi it's much easier to enalrge it to a usable print size - for that reason I always make my web images 72 dpi - might as well make it more difficult for the internet thieves!
Posted by Alan Melle on January 5, 2007 at 12:27 PM
Bill, this is incorrect. The limiting factor here is the image size of 720 pixels on the long side. The DPI is totally irrelevant except for printing. To test this uncheck "resample image." If you set the DPI to 360 the image will show that it can be printed at 2 inches. If you set the DPI to 1 (ridiculous) it will show that it can be printed at 720 inches. With less than lovely quality I might add!
If someone steals a 720 pixel image they are stuck with the same quality limitations. Changing the DPI to 72 won't change the image quality for the thief any more that it will for you.
Posted by Bill Chambers on January 5, 2007 at 1:26 PM
I stand corrected - thanks Alan,
Posted by Steve Foss on January 5, 2007 at 4:38 PM
Thanks for those who followed me posting here. I obviously haven't plumbed the depths of the "save for web" and other features like some of you, so I learned a bit today. And that makes it a good day.
Posted by Chris Ross on January 16, 2007 at 10:01 PM
For web display all that matters is pixels. I do set 72 dpi though as It's easier to get the PS text tool to type at the size I want when the image is set to 72 dpi. It makes no differece to the image on screen.
Save for web is a very useful tool, you can adjust the size using the slider, or click the small right pointing triangle at the top corner of the dialog box with the slider, this opens up a screen where you can enter a target file size. You can even open up a box applying differential sharpening to an image based on a mask in an alpha channel . It seems to work quite well on smooth bg images like say a bird or flower against a smooth bg, allowing a high quality setting, with the bg set a notch or 2 lower and making the file 20kB smaller than it would have been in some cases.
You do have to be careful though a highly detailed scene like a shot of a forested hillside needs a higher quality setting than a bird against a clean blue sky to quote 2 extremes. The preview in Save for web will show the effect on the quality fairly well.
Discussion
13 replieshttp://www.photoportfolios.net/portfolio/pf.cgi?a=up&pi=LPAULINE&u=29236
It took me hours and hours and hours -- never did get the bio picture down to 15 KB file size. That just seemed impossible.
As you may surmise I am having a really difficult time making any sort of order out of getting pictures converted (usually from Adobe Photoshop .psd's in the size range of 20mb) to pictures that display well on the web.
What sort of order do you all use? Following is what I have been trying to do.
1. First I take a large psd file that I am working on, flatten the file (if necessary) and then convert the profile to sRGB, under Adobe's Edit, Convert to Profile Window.
2. Then I have been converting the flattened psd file into jpg format by going to "Image Size," changing the resolution to 72 (from somewhere around 300), changing the long-side pixel measurement to somewhere between 400 and 600 pixels (letting the short side default). That changes the image measurements, but I don't touch those.
2. Next I save the image-size-altered file to a .jpg format but the total file size listed back in the image size window doesn't seem to correspond to the final saved file size.
I have tried using File, Save for Web (after I size down the psd file) but that seems to produce ridiculously small file sizes -- not very good choices in other words.
I must be doing sometehing wrong AND there must be an easier way. At this rate I could get old and in my grave before I get 3 pictures loaded onto the Internet.
Also, while I am asking what is a good safe size to put up on your website (compromise between good viewing and people stealing).
Thanks so much for any help you can give me.
1) Flatten image if necessary
2) Resize to 640x426 pixels for landscape format and 426x640 if it's a portrait format
3) Convert profile to sRGB if necessary
4) Sharpen if necessary
5) Save As for Web, JPEG 75% quality is good enough.
Save for Web is the right thing to do - it does produce smaller files than you get through the other procedures, since it uses better algorithms and yet maintains a lot of information.
As to the stealing part - there was a saying "Locks are meant to deter the good guys". Bad guys will always steal.
I feel inspired. I think I will go back to the picture I posted to My NPN gallery and do it again . . . I hope I will see a difference in what I produced earlier and the image I will generate with your methods; I have, hitherto been really, really disappointed in the web display of my converted images. (I know how to get a good print; I just hadn't known how to get a good web display). I now understand why my file sizes didn't correspond (the administrative data, added to the final file size).
Regards, Laurel
lpauline@fromwhereshestood.com
After finishing any post processing I do the following:
Layer>Flatten image
Image>Image Size - change to 72 dpi, then adjust long side to 720 pixels. Short side defaults to whatever.
Image>Mode - change to 8 bits from 16 bits
Edit>Convert to Profile - change to sRGB
File>Save as - change format from PSD to JPEG, save in appropriate folder. When the JPEG Options screen comes up I use the slider under Image Options to adjust image size to something under 200 KB (usually under 180 KB because the finished file size is always a little higher than what shows, usually by 15-20 KB).
I've had better luck using this option than the Save for Web option in that my colors seem to retain better values.
Hope this helps.
The goal here is to have an image of 720 pixels on the longest side and a file less than 200KB. Step 1 is fine. Next assuming your original is already saved, go to image>dupicate and then close your original file. For step 2 don't worry about DPI or document size - they mean nothing for the web. So now when you go into 'image size' first make sure the resample box is checked then go to the top and change the largest pixel dimension to around 1000 pixels - as you said the shorter dimension falls where it may. Next at the bottom of the 'image size' dialog box, choose 'bicubic sharper' to preserve as much detail as possible. At this point you may want to slightly oversharpen the image so it looks good online.
Step 3 Choose 'save for web'. Made sure the JPEG format is selected. Also check the 'ICC profile' box. Select the tab for image size and make the largest dimension 720 and click 'apply'. Near the top of the 'save for web' dialog box there's a little right pointing arrow. Click on that arrow which will give you a option to 'optimize to file size'. When that comes up, set it to 199K. Click 'Save' and your done. When the PS window comes back you can now close the duplicate file without saving it.The save for web command strips out all the EXIF information such as date, shutter speed etc. etc. which allows more space for preserving the quality of the image.
If someone steals a 720 pixel image they are stuck with the same quality limitations. Changing the DPI to 72 won't change the image quality for the thief any more that it will for you.
Save for web is a very useful tool, you can adjust the size using the slider, or click the small right pointing triangle at the top corner of the dialog box with the slider, this opens up a screen where you can enter a target file size. You can even open up a box applying differential sharpening to an image based on a mask in an alpha channel . It seems to work quite well on smooth bg images like say a bird or flower against a smooth bg, allowing a high quality setting, with the bg set a notch or 2 lower and making the file 20kB smaller than it would have been in some cases.
You do have to be careful though a highly detailed scene like a shot of a forested hillside needs a higher quality setting than a bird against a clean blue sky to quote 2 extremes. The preview in Save for web will show the effect on the quality fairly well.