.
  Lightstalkers
* My Profile My Galleries My Networks

jpeg optimization for the web

Hey all,

Does anyone here know the best way to optimize your jpegs for the web? I am noticing that images look so much better on some sites than on others, and have heard how you prepare them is of paramount importance.

Just using the “save for web” command in PS seems to have no effect on sharpness…just color/density etc.

I would appreciate any advice….

by [a former member] at 2006-04-22 08:01:23 UTC (ed. Mar 12 2008 ) New Delhi , India | Bookmark | | Report spam→

Have you tried saving in sRGB color space as opposed to adobeRGB (98)? Supposedly helps a bunch.

by Jethro Soudant | 22 Apr 2006 08:04 | NYC, United States | | Report spam→
i have a MAC so the way i do it is open the image in photoshop, in VIEW, go to PROOF SETUP and change to MAC RGB, check PROOF COLORS,
the image tends to look washed out, do the changes in levels, color balance, brightness, contrast etc… get the image the way you like it. if the image is in 16bits/channel, change to 8 bits/channel. change image to the size you want it, then go to IMAGE, MODE, convert to profile and you should be converting from adobe rgb to srgb, then you go into into FILTER and click on SHARPEN, click on UNSHARP MASK, i normally do it at 50%, radius .6 pixels, and then save for web. this has worked really well for me.

by [former member] | 22 Apr 2006 09:04 | | Report spam→
If you’ve got Adobe Creative Suite, try using Image Ready it’s supposed to be specifically used for optimizing images for web viewing. I haven’t messed around with it much, but you can do a search and find some pretty good tutorials.

by Corey Sosebee | 22 Apr 2006 09:04 | virginia, United States | | Report spam→
If I recall correctly “save for web” will automatically convert the image into sRGB, so there is no need to include the profile itself, which will save some space.

Also, you might want to carefully (re)sharpen the files after resizing them. Oversharpening jpgs will leave you with nasty artifacts though.

You could also use ImageReady, which has some very convenient and powerful features (like a detailed preview, advanced quality options etc.)

And if you want to spend even more time, you could set up an sRGB proof in PS (view → proof setup → custom → sRGB, perceptual) and adjust/process them with proofing swiched on. (cmnd + y)

A calibrated monitor will also help a great deal, especially once you have the PS color settings figured out..

Cheers,
Phil

EDIT:
Btw. save for web will automatically downsample 16 Bit images to 8 Bits. If you really want to reduce the bit depth (for whatever reason), you obviously shouldn’t do it until after you resized the picture.

by P.S. | 22 Apr 2006 10:04 (ed. Apr 22 2006) | Munich, Germany | | Report spam→
What is sRGB? Under “Proof” I have windows RGB, Mac RGB and monitor RGB..(PS 7..are you all using CS?)

by [former member] | 22 Apr 2006 11:04 | Brooklyn, NY, United States | | Report spam→
I think Phil is right, you just hit save for web after you have made the usual adjustments. I dont even see a “convert to profile” function under the Image-Mode tabs (I am currently using CS2). But I am a little confused here: I thought the problem had more to do with factors that were beyond our control, such as differences between browsers (Safari and Firefox, for example, consistently render my images with a slightly different hue and contrast, the former being much closer to the image as I have prepared it), and differences in monitors. I thought that the qualitative differences I was seeing, for example when I browse through people’s website or even just their galleries here on LS, stemmed more from their preparation of the files with regard to color balance, brightness, contrast and so on. In fact I never bother to “save to web” I just upload my regular jpgs and they seem to look just fine — or maybe I am wrong and you all been thinking, “damn, this guy’s color really sucks!”

by Jon Anderson | 22 Apr 2006 11:04 (ed. Apr 22 2006) | Santo Domingo, Dominican Republic | | Report spam→
You are killing me, Erica. A true film person, go here for an explanation http://www.w3.org/Graphics/Color/sRGB
It’s a color profile primarily used on the web and on the pc side. Translating color and compressing the color space.
PS >Image>Mode>Assign Profile or Convert to Profile. They are two different things. Proof is just softproofing on the monitor and not accurate, especially on an uncalibrated monitor, then it’s just useless, as uncalibrated monitors are in general. Still, every monitor is different and web browsers still have no standards converting colors, they are not displaying the same colors, contrast, dynamic range, etc.
I find cranking up the contrast is the most important, it will make the images pop, and I rather use a high quality setting to avoid jpg artifacts. The people that I want jobs from better have a t-1 or dsl connection.

by Andreas Kornfeld | 22 Apr 2006 11:04 | NYC, United States | | Report spam→
Now that is a good point. Cranking up the contrast, I have noticed, is an important step for both black and white and color. interestingly I have noticed that my scans from slides often have very close to the right contrast and richer color than my digital files straight out of the camera. Dont understand that really. Saving at a high-quality or at least medium setting works fine. After all, I think we can safely assume that we are presenting material to people with dsl. Dial-up is just not a valid criterion anymore.

by Jon Anderson | 22 Apr 2006 11:04 | Santo Domingo, Dominican Republic | | Report spam→
I’m in the process of redoing my web site and saving the images as sRGB. That’s crucial. The best way to increase the contrast is to go into curves and create a slight S shaped curve. If the exposure is about right I’ll just lock the middle and darken the backround and highlike slightly. If you just do the backround you are in danger of blowing out the highlights on some browsers.

Safari is by far the best browser for showing photos with the best contrast and colour saturation. In fact it’s a good idea, I think, to spike the saturation a little as well so that they won’t appear so anemic in Firefox and other browsers. Firefox is a clever browser is many ways but it can kill a jpeg.

by Paul Treacy | 22 Apr 2006 12:04 | Philadelphia, United States | | Report spam→
thanks Andreas…so much to learn, so little interest! But i’ll do whatever it takes to make things look good, eh? I keep forgetting that most of you shoot digital most of the time..I don’t even own a low end dig camera yet for snapshots, let alone a pro one.

by [former member] | 22 Apr 2006 14:04 | Brooklyn, NY, United States | | Report spam→
erica, apart from the three you named there should be another menu item called “custom..”
Click on that one and you can find the sRGB profile in the “device to simulate” drop down.
Choose “perceptual” as the rendering intent and save the proof setup, which you can now toggle with cmnd + y.

Like Andreas said, this is of very limited use unless you have your monitor calibrated, but softproofing should give you a pretty accurate preview of what the image is going to look like, rendered in sRGB, on a calibrated monitor..

A common problem is that all (?) browsers on a mac will use the monitors color profile instead of sRGB when rendering an image if it doesn’t have a profile attached.
Additionally macs have a different gamma than PCs. (so images will appear lighter on a mac than they will on a PC)

I dont’ think there is a foolproof way to make them display the same on all platforms in all browsers without sacrificing either quality or size. Boosting the contrast, sharpening them up and hope for the best seems to be a good idea though..

Cheers,
Phil

by P.S. | 22 Apr 2006 15:04 | Munich, Germany | | Report spam→
Wow, thanks for all the help- this is all very useful.

I notice a huge difference in the way they look when posted on the web with these changes. The one thing I still feel like I am missing though is image sharpness. I came across this guys website (who, by the way, no longer makes websites): http://www.arobasestudio.com/

If you go to the JPG VS JPG page he addresses this directly. I have seen personal websites where the image has tremendous depth and sharpness on the monitor, and I am losing that somewhere in between…….

by [former member] | 22 Apr 2006 16:04 | New Delhi, India | | Report spam→
oh man, Scott do know Franck from Arobase Studios? I was seriously just about to post a link to that EXACT site. Franck is a very close friend of mine, and I can tell you he is a scientist of digital imaging. He was my boss at Art + Commerce, and he designed my site. Small world…

by [former member] | 22 Apr 2006 16:04 | Cuenca!, Ecuador | | Report spam→
Regarding sharpening… only sharpen once. It should be the final step in the process. When processing RAW images (I use Capture One) I disable Sharpening and apply Unsharp Mask manually in Photoshop after all edits and adjustments have been made. Also, try converting the image to the LAB color space and sharpening only the Lightness channel, then converting back to RGB.

by Jerome Pennington | 22 Apr 2006 16:04 | | Report spam→
Dear Scott,


The reason why you are experiencing problems in quality and color/density, etc. after
optimizing (compressing) is because you are working from a jpeg file which is a
compressed “lossy” technique file..
Therefore…
1.) You are compressing twice when you optimize a jpeg for the Web, and
2.) Lossy techniques compress images by removing detail, which is still better
for photographs but not when your already compressed jpeg file is recompressed
through any type of “save for web” optimization.


I will cut to the chase and tell you that you need to save your photographs and
this is for the web only, not for jpeg emailing, in TIFF which is a “Lossless”
compression technique file. Lossless techniques compress image data without
removing detail.


There are also a few other incompatibilities with using jpeg files for the web,
other than Optimizing. Also, at least in Photoshop, when saving a jpeg, you are
given three format options to select from. All three choices have some problem when
applied to the Web.


One of my Gallery Website Designers, Ted Forbes, http://tedforbes.com/ gave me the
following five step Website Gallery prep list to do before I emailed him my zipped
Gallery images. Since, I started using his IPA Portfolio Image Submission Guidelines
I have never been able to spot on any other sites any imaging problems or changes in
color or detail with my Web images in comparison to the original artwork.


His instructions can be applied easily by both PC and Mac users and, besides me, every
single IPA Gallery user on the following IPA website link had to follow these instructions
before Mr. Forbes would accept their Zipped prepared emailed images for upload.


FIVE STEP PROCESS FOR PREPARING PHOTOGRAPHS FOR WEB GALLERY
OPTIMIZATION/COMPRESSION:


1) Image Mode – Please make sure images are set to RGB mode.
2) DPI – Images must be set at 72 dpi.
3) Size – Web Gallery Images will inevitably need to be re-sized .
Make certain that the image height and width are both set to a minimum of
500 pixels.
For example – if you have a horizontal scan, make certain you have it
scanned at 72 dpi and a minimum size of 500 px high by 200 px wide or
whatever the width comes out to be. The image can always scale down,
but scaling upwards results in a loss of image quality. Using 500 for
the higher width or height is the safest route to go.
4) Format – Please submit images in Pict or Tiff format. These formats are not
Compressed. No JPEG or GIF files please. These result in a quality loss when
recompressed for the web site. If you are not the web designer of your site and
you have to email your images for upload, as a convenient option, you can use
a Zip file software program. Don’t worry, compressing the complete once
compressed (optimized) TIFF file via zip or sea formats is perfectly fine
for emailing purposes since the file has to be unzipped to upload.
5) Quality – Please make sure that the scan looks like you want it.
In the case where you are not your Gallery’s Web Designer, there should be
no color corrections or enhancing done by anyone else after you have saved
your photograph changes with your image editing software program. After you
have emailed your photograph/s or Zipped Photographic file, each photo will
or should go on the site as you have submitted it, but re-sized.


http://illustratorspartnership.org/03_members/index.php
Click on:IPA Portfolio Image Submission Guidelines



Remember jpeg files do not have incompatibility problems with emailing software.
However, they do in Web use. Jpeg files are not always compatible with Website
Gallery use and with some Web browsers

Here are some further help points for Adobe Photoshop users regarding
JPEG file suggestions and limitations encountered because of incompatibility
problems that will help to additionally explain poor jpeg image results.


_*“In Adobe Photoshop, as long as you save a file in a format supporting the
image’s color mode, the color channels will be preserved. But alpha channels
are automatically kept only when you save a file in the Adobe Photoshop,
Adobe Photoshop 2.0 (Mac OS only), DCS 2.0, PICT, TIFF, or Raw formats.
Saving in other formats [like jpeg] may cause channel information to be
discarded [and so would result in problems in the color area.]

……

“In Adobe Photoshop, you can also select from three format options when saving
your JPEG file:
Select Baseline (“Standard”) to use a format recognizable to most Web browsers.
The Baseline Optimized format optimizes the color quality of the image and can
produce a slightly smaller file size, but is not supported by all Web browsers.
The Progressive format causes the image to display gradually as it is downloaded—
in a series of scans (you specify how many) showing increasingly detailed versions
of the entire image. However, progressive JPEG images files are slightly larger
in size, require more RAM for viewing, and are not supported by all applications
and Web browsers.


“Because the JPEG format discards data, it is important to save JPEG files only once.
[FYI,] when you are using jpeg to email your photographs [and not to upload to your
Website] Edit and save your image in a format that does not discard data
(such as the Photoshop format), and save in JPEG format only as a final step.


“Note: Some applications may not be able to read a CMYK file saved in JPEG
format. In addition, if you find that a Java application cannot read your
JPEG file (in any color mode), try saving the file without a thumbnail preview.


“…JPEG format supports CMYK, RGB, and grayscale color modes, and does not
support alpha channels. Unlike the GIF format, JPEG retains all color
information in an RGB image but compresses file size by selectively discarding
data. A JPEG image is automatically decompressed when opened. A higher level
of compression results in lower image quality, and a lower level of compression
results in better image quality. In most cases, the Maximum quality option
produces a result indistinguishable from the original.
(See Saving files in JPEG format.)”*_ Parts quoted from “ADOBE PHOTOSHOP HELP
except inside brackets which are mine.

by Gayle Hegland | 22 Apr 2006 16:04 (ed. Apr 23 2006) | Montana, United States | | Report spam→
That was extremely helpful – thanks for posting those instructions Gayle! I’m sitting here working on my website right now (a first time attempt, so please excuse the stupid questions). But basically what I’m getting from all of this is that if my pics have already been saved as a jpeg (at high quality), there’s not much I can do about the quality being poor once they are resaved for web? I could go back to all of the originals if I really had to, but I’m trying to avoid that. anyway, everything was shot in jpg format, not RAW. So, I’m guessing getting back to a tiff preserve quality is out of the question…? The main problem I’m having is when I save for web, the colors become VERY unsaturated. is there an easy fix for that other than guessing the desaturation level and compensating before saving for web? Also, in testing both ways, when I don’t save for web and just use the original jpeg, the color is fine – can I just do that and resize the image and be done with it?

thanks for any help!

by Ana Pimsler | 23 Apr 2006 13:04 (ed. Apr 23 2006) | Alexandria, VA, United States | | Report spam→
Gayle, That was excellent, and I may just give this a try next time I have to upload to a web gallery. But frankly I dont seem to be having the problems that other people have here. Or maybe I do without realizing it. But I notice that for one thing my scans from slides always seem to have rich color. If the digital shots dont, I just beef up the contrast and fix the color a bit, and they seem fine afterwards so I dont know if the whole process you outline is necessary. But I am going to run some tests.


Meanwhile two questions: the first is the same as Ana’s: if you are working from JPGs already I guess the whole Tiff avenue is moot — or is it? Second, using Tiffs, say on one’s website, doesnt slow up the download considerably? My site is pure html, very simple, and I keep it that way so that downloads are instantaneous. I dont want to change that.


By the way, I may cut and paste your instructions to a separate post, lock it, and store it in the Resources section as another tutorial, perhaps along wiht some of the other suggestions here. Thanks.

by Jon Anderson | 23 Apr 2006 13:04 | Santo Domingo, Dominican Republic | | Report spam→
Thanks, Ana and Jon,

Well, I am glad that I could offer you people some info I had on the topic.

If you have a method that works for you now, and it is not too
burdensome then you should go with that, but maybe you could glean
some information from the tips above to explain when and as new glitches
come up, such as, when you have to upgrade or for some unknown reason
you must adapt your tried and true methods that you have now.

Rather than having to operate from Murphy’s Law with all of the
continuous technological changes that happen at the speed of light
(if you don’t mind my pun) …. rather one needs to take Occam’s Razor
to heart. Use what works best and fastest for you now and as Jon
says take time to test some changes that will increase and simplify
the speed of your light or at least be a backup. Particularly, if
you have to buy a new laptop with all new upgrades and software or
worse yet, when your old tried and true software rebels against your new
operating system spouse after you install it and it crashes your
system…etc. …Well, you know how mean kids can be when a new person
is brought into the household, so to speak.

In answer to your question about originally saving in jpeg. It really
makes me think about how many times, being a illustrator, I made a color
change to my art and really liking the results, made sure that I saved it,
maybe even twice, who knows how many times, by.., yes, by jpeg. Now the
question is, is that technique an important part of my style now?
Well, in my case, I hope not.

Anyway, keep the future simple. If now you notice an extreme difference when you
save a TIFF file from that how many times saved(?) jpeg image from your original
jpeg scan, then go back to the original jpeg saved scan (if you still
have it) and save to TIFF, if that is still bad go to original photo or smart
card file, rescan/re-download, redo changes, sizing, resolution, etc. and this time
and in the future save first as TIFF, make sure you back it up and put it in the
archive bank with all your negatives and smart card files.

In the future always work from your saved TIFF, (etc.) file and save a jpeg email
copy for your jpeg file. (Notice in Adobe that your jpeg title save has copy
attached to the end of it) TIFF’s (or an exchangeable file format) will act as your
computer negative that you will guard with your life and religiously download it
immediately to that data drive that you hang around your neck and sleep with
under your pillow until you get back home to put it in The Archive Bank of Negatives
and Smart Card files.

This is a conclusion that I have made from my notes above that jpeg is not meant
to be used as a transferable or many times over saved file format.
“One time, last time” saved, is it’s correct photographic function.
Otherwise you have to spend time correcting and enhancing.
It’s major use is in emailing photographs and printing photographs because it is a
Lossy compression method and can save photographic detail well. JPEG uncompresses
when it is opened but after continual saving or transfer it apparently will lose
detail like a xerox, from a xerox, from a xerox, etc……..

by Gayle Hegland | 23 Apr 2006 16:04 | Montana, United States | | Report spam→
Ana, well I guess that would depend on your web designer software.
See if that is an option. Otherwise, if you are still seeing an extreme
difference when you change your camera’s jpeg file to TIFF and upload it to your
FTP, then you will have to go back and forth, I guess with your Web previewer
“guessing the desaturation level and compensating before saving for web”.

Anyway, hope this helps and next time you shop for a digital camera you will
have this in mind. Just make certain that you save all of your original camera
jpegs if possible because there might always be a software out now, in the
future, or maybe some of the other members tricks and tips mentioned in this
thread will solve that transfer and compression problem.

by Gayle Hegland | 23 Apr 2006 16:04 (ed. Apr 23 2006) | Montana, United States | | Report spam→
Oh, sorry Anna, remember that Jpeg files are saved with three different
formats that can effect how your website will be able to be viewed by different
Web Browsers.

Select Baseline (“Standard”) to use a format recognizable to most Web browsers.
The Baseline Optimized format optimizes the color quality of the image and can
produce a slightly smaller file size, but is not supported by all Web browsers.
The Progressive format causes the image to display gradually as it is downloaded—
in a series of scans (you specify how many) showing increasingly detailed versions
of the entire image. However, progressive JPEG images files are slightly larger
in size, require more RAM for viewing, and are not supported by all applications
and Web browsers.”

Or find out how your camera jpeg has been saved.

by Gayle Hegland | 23 Apr 2006 17:04 (ed. Apr 23 2006) | Montana, United States | | Report spam→
Hey all, once again thanks- it has made all the difference in the world in how they look. Working on them under srgb, and the proof setup really, really makes a difference.

It now seems like I may be spending the rest of my life updating my site though….

by [former member] | 23 Apr 2006 17:04 | New Delhi, India | | Report spam→
I know exactly how you feel Scott.

by Paul Treacy | 23 Apr 2006 17:04 | NYC, United States | | Report spam→
This is so helpful, thanks so much Gayle and everyone else. So many things to learn, so little time;) Is there a way we can archive this post so we can get to it later (Jon I think you mentioned something about that)?

by Ana Pimsler | 23 Apr 2006 19:04 | Alexandria, VA, United States | | Report spam→
Jon said he’d lock and load it as a resource.

by Paul Treacy | 23 Apr 2006 19:04 | NYC, United States | | Report spam→
I think the best thing would be to excise the various instructions given by Gayle, Jerome Phil and the rest, credit everyone, organize them by theme or technique and then lock that post so it cant be diverted or added to. Then I will link the thread to the Resources section under tutorials and it will be a permanent feature. that makes four tutorials now. Not bad.


Give me a day or so.

by Jon Anderson | 23 Apr 2006 20:04 | Santo Domingo, Dominican Republic | | Report spam→
What a jewel you are Jon


Some where in the near future (when im on the road) I plan to write few lessons about PS and the web. I will post them on some blog sit I intend to start.
I will inform every body about this later. Then it can be copied in her to if possible because i Intend to have some pictures to explain better. But that will be in a month or two :(


There is a need in the phtography world to gather some basic information about working methods. You can find them all on the web but all scatered in different websides.

by Kristjan Logason | 23 Apr 2006 21:04 (ed. Apr 23 2006) | | Report spam→
No rush but that is a great idea. Just cut and paste it onto a thread, lock the thread, and then link it to the Resource section. Easy. We will have a unified database in no time.

by Jon Anderson | 23 Apr 2006 22:04 | Santo Domingo, Dominican Republic | | Report spam→
Thanks Gayle, Jon, Jerome and Kristjan for all the useful info.
I for one, working with film, find even the basics of digital management of images very time consuming and at times confusing, but accept that is essential for the work to be seen by a wider audience.

by Simon Larbalestier | 23 Apr 2006 23:04 | | Report spam→
Well I said it would be some time untill I would write something about the net and saving jpg. But I needed to relax now and so I took every thing of my mind by doing this.


I still have to finde out how it is with pictures in this new system so if anyone can help out there it would be grate.


As for the english some one must step forth as the teacher and help with spelling and the proper writing. So here is the text and images will come as soon as I learn.


Im shure there are some on out ther with oppinions on this. That is good and please do not hesitate to contact me if some thing I have said needs fixing or some extra clarification. Input from others is good and only makes this better so Jon or some one can take this and give it a permanent place when its ready.


Photoshop and saving images for the web.


When saving images fore the web it is crucial to start with a good image. With a good image I mean an image with lot of information. One of the things that we are doing when saving images for the web is stripping as much information out of the file as possible and compressing the file so that it will load fast enough in the web browser.


1. Open an image.
Best is to start with an image that has not been compressed before, as compression is needed for the web and further compression only degrades the image, makes it pixelated and fussy. Therefore start with a file that is in a lossless form like .psd, .tiff, or raw. Do not use .jpg if possible as the file has already been compressed in a lossy format. Lossy format means throwing out as much information as possible.


2. Color space.
So what about color. I tend to convert all images that are intended for the web to sRGB
In Photoshop PS2 goto Edit —> Convert to profile and select sRGB. there can be some different sRGB profiles around and my profile has the full name sRGB IEC 61966-2.1.
In browsers that can read the informations of the profile the image will show your colors. But again there is no guaranty that it will be as you intended because you cant control the viewers monitor but you get close enough and did your best.


Before you start working on the images you have to see to that your screen is calibrated. If you do not have an “spider” and calibration software there are simple things that can help you out. One of them is making an image like this in Photoshop:


With an image like this and a gray card in hand (some thing all photographers own) you can now twist and tweak the color settings of your monitor so that you see all the grades and also see to that the middle gray is gray not yellow or red. The blackest blak should be that but you should detect the color next to it. the whitest white should be just that (no tint) and you should detect difference between that and the next shade and the gray should be gray and nothing else.


In our preparing of images for the web, one thing has to be considered. PC and MAC computers have different gamma settings and therefor images made on a MAC can be to dark, when seen on a PC. PC has a gamma of 2.2 and MAC has a gamma of 1.8. So if you are working on a PC you would want to Make your images a little bit lighter and on Mac a little bit darker than usual. In the Ideal world the browser would detect the image and correct it, but that is not the case. As most of the image world has been using the MAC a photographer would like to consider for what group of audience he is preparing his images. Ar they most likely to be viewed on a MAC or PC.
Computer screens in homes are not likely to be calibrated but they are more likely to be so in an environment that constantly is working with pictures. For those that have not yet gotten them self an calibration device, it is good to get familiar with the rgb values. That can rely help in color correction work. It is very good to know that a middle gray value is R128 G128 B128 all equal an therefore gray.
If you make a new image in photoshop and fill it with gray but your screen is shoving reddish gray yellowish gray it needs calibration or compensation there for.


3. Images and their size.
As not all browser show images alike, so do also software that one uses to publish images to the net or on the net. Flash is a software that is very popular to use for photographers sites. It is necessary for photographers that are going to use flash to get to know the settings in flash. It is crucial for good result that the images are of the right size. This is also the best for images in other software or just the old fashioned HTML. Sites like flickr that automatically resize images also degrade the image quality. Try to optimize the size to that what is needed. if an image is to be shown at 350 pixels with don’t make it larger or smaller. This can result in fussy image.



What is the right PPi or dpi for the web.
Screen resolution is 72dpi/ppi. That is the resolution images should be in. Not less not more. When resizing images in Photoshop (or similar software) a 350 pixel width 350 pixel height 72 ppi setting should look like this


A image like that should be around 200k in size which is not bad for the web.
Size does matter here and the bigger is definitely not better. The bigger the file the slower it downloads. The only way to show bigger file is to compress it more but that again degrades its quality.
One other way of compressing the file is to use the “save for web” function in Photoshop. For Photographers concerned about their copy right I do not recommend this, as this strips all the data out of the file. To compensate this one can put an logo, watermark or some copyright text on the images, but many photographers think this gets in the way. I try to do every thing. I put all information (IPTC data) in the fields under file info and put copyright text on my images, thus if any one grabs my images they can not argue that they did not know the image was not free.

4. Compression
It is ok when saving images as .jpg for the web to use compression of about 10. I say saving .jpg because it is the best known form on the web and gives you good enough file that has fine color rendition and not to big size I like to use the compression of 12 but my images are for people with good band with. Those with out it are not looking to buy my images. They are at my site for other reasons. Still I try to get them as small as possible so some times I use setting of 10 and in extreme cases I use save for web.

5. Now the final step before saving.
The sharpening. Sharpening should be carried out as the last step. It can differ a bit how much sharpening an image can take. There are many ways to sharpen an image in Photoshop but one has been with me for some time and i like it. The USM or unsharp mask can be found under
Filters—>Sharpen—>unsharp mask. this is the setting I most often use:

(setting added because of lack of picture) Amount=100, Radius= 0.6, Threshold= 1

It over sharpens the file a bit, but that is compensated when I save as .jpg, as the file gets fussier when the jpg compression is working on it.


6. Saving.

Go to →file→ save as
And save the image as .jpg with compression of 10 or 12.


7 Enjoy.
Now it should be ready for the web in its best dress.

by Kristjan Logason | 24 Apr 2006 22:04 (ed. Apr 24 2006) | | Report spam→
And again, more stuff I didn’t know…thanks for posting all of that!!

by Ana Pimsler | 24 Apr 2006 23:04 | Alexandria, VA, United States | | Report spam→
Here is a resource for a bunch of tutorial and pdf’s about color management.

http://www.digitaldog.net/tips/

Some of them are older, but it’s good to know and understand the basics of color management. Unfortunately, many photographers never even learned the basics of b+w, color theory and printing in general. There is a wealth of information on the web, put out by the printing industry. Those printers knew about color management a lot longer than the average photographer and now we are way behind, trying to catch up.

Hope this helps

by Andreas Kornfeld | 25 Apr 2006 00:04 | NYC, United States | | Report spam→
Would like to add some info about the mysterious monitor resolution, 72 ppi vs. 96 ppi, which influences the display and size of our images on screen, this has been bugging me since ’94. If you read this you will understand what a good resolution is for scanning and how the old standards have changed. The last part, the Macworld review, is the most interesting.

http://www.thegoldenmean.com/technique/resolution.html

http://www.creativepro.com/story/feature/19138.html

http://nikondigital.org/articles/image_size_ryan.htm

This is from Macworld:Review: November 03, 2005: The 17-inch model ($2,499) now displays 1,680 by 1,050 pixels, up from 1,440 by 900 pixels—a 36 percent increase in the amount of information the screen can show. Put another way, the number of pixels per inch (ppi) has jumped from 101 to 117—a record high for an Apple display.

In the 15-inch model, which now has only one standard configuration priced at $1,999, the default, native resolution has increased to 1,440 by 960 pixels, up from 1,280 by 854 pixels —a 26.4 percent increase. That comes out to a pixel density of 114 ppi, up from 101 ppi.

All those numbers translate into more room to work and play. It’s now easier to keep your palettes alongside the image you’re retouching in Photoshop, or your calendar next to your spreadsheet.

There’s a downside, though: the only way to add more pixels without increasing the screen’s physical size is to make each pixel smaller, and because of the way the Mac currently draws to the screen, all text, graphics, icons, menus, and everything else are correspondingly smaller. As a result, the screen’s desktop looks more compressed than on any previous Mac. (For comparison, the original Mac had 72 ppi. Today, the 12-inch PowerBooks and iBooks have 106 ppi; the 14-inch iBook has 91 ppi; and Apple’s current Cinema Displays range between 98 and 100 ppi.)

To help with readability, Apple has boosted the new models’ screen brightness—by a noticeable 46 percent in the 17-inch PowerBook and by 13 to 15 percent in the 15-inch model, according to the company.


Meaning you start out with a good resolution scan, assign the sRGB profile under Image>Mode>Assign Profile…, after all adjustments, size your images for, let’s say Lightstalkers gallery, to 640 × 480 ppi, that’s it. Like Kristjan said, no less, no more. The resolution in the Image>Image size… dialogue box will at this step determine the file size. At this point you should still be working with a tiff, psd, raw file. A 72 ppi file will look smaller on a 96 ppi monitor than a 100 ppi file. That’s why it is interesting to read that the monitor resolution on current monitors, especially the more and more common LCD’s, including all Laptop’s, is up, only the die-hards are still using CRT’s. Disregard the file size at this point. Next step could be to reduce the file size by converting from a 16-bit/channel file to an 8-bit/channel file under Image>Mode>8-bit. Now you can save this tiff file with the layers intact and make a new copy, flatten the image , which is under Layer>Flatten Image, to reduce the file size again. The last step should be a slight sharpening. Nowadays I sharpen once after changing to 8-bit and retouch bad artifacts out. Now it’s time to save the hero as a jpeg. At the 12 quality/100% setting level it should look the same as the tiff file. With the right profile it would be suitable for digital printing. I think for the web you are not able to tell the difference between an 100% and an 80% setting, unless it’s a big image or a big part of the image is a graduated color, like a blue sky. For some vibrant web images check out this german advertising guy http://www.georg-fischer.com/

Let me know if there’s a big error in here and I’ll correct it, but it’s time to hit the pillow, 3 A.M. in NYC.

by Andreas Kornfeld | 25 Apr 2006 02:04 (ed. Apr 25 2006) | NYC, United States | | Report spam→
You are right about the monitors Andres. This gives a sertain problem. But the resolution is in fact falsified by making the pixels smaller. Its like having a cake and cut it in to halves and then damand that you now own two cakes.


So its ok to stick to 72ppi but if you know that those that are going to look at your images have more resolution in their screens then make the image larger. That way you keep 72ppi but an image that was 350 pixel wide could be made about400 pixel wide , knowing that its going to be seen on a 100ppi screen.

this way it will show its best along all screens but be different in size, but so will also all the context it is in be. All elements on a webpage seen on 72ppi screen is large that on an 100ppi screen but they keep the scale.

by Kristjan Logason | 25 Apr 2006 10:04 | | Report spam→
I’ll never get my head around that…whish there was an iso for that.

by Andreas Kornfeld | 25 Apr 2006 10:04 | NYC, United States | | Report spam→
Can I just comment on one smallish thing. It doesn’t matter at all what dpi your web images have. I have pages on which some images are at 72 dpi and others at 4800 dpi and it makes absolutely no difference to how they display.
If an image is 600 pixels wide it will display 600 pixels wide on the monitor – about 6" on one of my monitors, rather less on another and more on the third, but 600 pixels on each of them. With monitors the dpi is set in the display properties and they take no account at all of the image dpi setting, they just lay out the image pixels on their screen pixels. So dpi is one thing you can simply ignore for the web, just concentrate on getting the right number of pixels.

The dpi will (often) make a difference to the print size if someone saves your files from your page and prints them, as the resolution is essentially an instruction to any device that outputs in some way other than directly to pixels.
So if you have a 600 pixel wide image with resolution 300 dpi, then it should print 2" wide for example. This happens if you print from PS, but none of the web browsers I’ve ever used prints like this – they work from the screen and ignore image resolution settings.

On sharpening I really like the FocalBlade plugin for Photoshop, but there are others as good. This has two settings for screen and print (and lots of other things you can set.) It can sharpen edges without increasing grain on surfaces

I worked out a little set of instructions when I had a job that needed around 750 web optimised images from prints which might be useful. I was scanning into PS7, but similar would apply to later versions and also to digital images. There are a few bits you can automate with actions if you like, but most steps really need some judgement:

1. Scan to give image roughly 2x size in pixels of size needed in web (no point in having it bigger, but it doesn’t matter)
2. Rotate to correct orientation (hint for small adjustments – use measure tool along a horizontal, then rotate, arbitrary.)
3. Crop. Make window larger than image to check crop as PS hides stuff on extreme edge in smaller window.
4. Remove any dust or other defects using healing brush or clone stamp
5. Use levels to fit black and white point, then curves to get tones as you want them
6. Colour balance (various plugins can help with this)
7. save as TIFF
8. Resize to actual size for web
9. Sharpen if necessary with unsharp mask or better with plugin
10. Assign sRGB profile
11. Save as JPEG, shifting the quality slider to the left until you see a slight change in image, then moving back up to next level.

It sounds a lot to do, but by the time I’d got to the end of the pile of 750 prints I was down to about 1.5 minutes per image including the scan.

by Peter Marshall | 25 Apr 2006 15:04 | London, United Kingdom | | Report spam→
Peter I dont want to get anal about this thechno thing but I have to dissagree with you here. It does matter what dpi you have


Regarding the size we can agree. 600pixel image in Photoshop will be that on the web to..


But again to the dpi.
If we take a 35mm image and scan it we have an image that is 24mm x 36 mm.
At 72ppi this would make an image that is 68 × 102 pixels and be 20 kilobytes
At 4800 ppi this image would make 4535 × 6803 pixels and be 88 Megabytes

To get it to be 400 pixels by 600 pixels we would scan it at 423ppi and get a filsize of 703kb

So here ppi matter and so does size. The smaller in bytes the image is the faster it loads and the more trouble it will be to print it out. Printing through the web browser always gives the look you se on the screen. But one can alwas download the image and for that reason alone you want the resolution to be as litle as possible. An image that is 600 pixels by 400 in 72 ppi will only print as 3.39cm x 5.08 cm at the usual print dpi of 300. Veras the image in 4800ppi would be enough for two page spread in an magazine.

So size matters to us. The smaller the better. :)

by Kristjan Logason | 25 Apr 2006 18:04 | | Report spam→
Kristjan, by mixing absolute pixel size with dpi you are mixing apples and oranges and needlessly cofusing the matter. The ONLY thing that matters is the absolute pixel dimensions of the image. A 600 × 400 pixel image has the same absolute resolution whether in Photoshop the print resolution is set to 72 ppi or 4800 ppi. An image that is 720 pixels wide will print 10 inches wide at 72 ppi, or 1 inch wide at 720 ppi. But the number of pixels is the same and there’s no way that you can print an image that is 600 × 400 pixels over a two page spread without it being horribly poor quality.

by Martin Mraz | 25 Apr 2006 20:04 | Prague, Czech Republic | | Report spam→
Martin you are right and I was not clear enough of course I did not mean that 600 × 400px image was the absoultue size of a 4800ppi image.
But you can have an image on a website that is shown in the size of 600 × 400 and if you would select print from your browser it would print as that.
on the other hand if you would download that same image (could take lot of time) and open it up in PS it would be 4535 pixels by 6803 and be good enough for a spread. The same would be if you opend that same image in a browser window with out the layout, It would be opend at 100% and you would have to do a fair amount of scrolling to se it.
Just as i said above 35mm image scanned at 4800ppi has the absolute pixels of 4535×6803
The same image scanned at 72ppi has the absolute pixels of 68×102
The only thing I was trying to emphasize was that sise matter and the smaller the image is in kb the better.

Maby Im just confusing things by taking these things in.

by Kristjan Logason | 25 Apr 2006 20:04 | | Report spam→
Kristjan I agree with you, size matters in terms of the file size you end up with for the web, smaller is better and faster to download and upload. And you are right about the pixels getting squeezed, as written in the stated articles, and it has the illusion that images are sharper, just compare a TV with an LCD monitor, the contrast ratio is also higher, which adds to the confusion when printing from screen to paper. We were on the same page on that one.

The initial question was about optimizing for the web. When Peter said the resolution doesn’t matter it’s ill advice, because a 4800 ppi file size would big, and there is no need to do that, as we probably all agree on. Printing is a whole ’nother issue, and as far as I can tell we agree on that as well.

Maybe the confusion came when I neglected to mention that I resample my higher resolution scans, because I want to see at least a file that is full screen at 100% when I clean and adjust it, but in the end I bring down the file size by checking the resample bicubic sharper box. Resampling left unchecked, the file will stay the same, in ppi and file size.


What initially irked me to write my post was the post from Gayle, you need to save your photographs and this is for the web only, not for jpeg emailing, in TIFF which is a “Lossless” compression technique file. This is wrong advice, a jpeg saved at 100 % looks and prints the same as a Tiff file, I do it all the time, but a jpeg file is smaller, we are optimizing!

incompatibilities with using jpeg files for the web, images must be set at 72 dpi ,misleading, that’s why I looked into the current state of affairs in terms of monitor resolution in the first place. The 72 dpi is from the days of typography moving to desktop publishing. Because I noticed that my images shrink on good quality monitors, I resample bicubic sharper to 100 ppi, my personal preference.

make certain you have it scanned at 72 dpi, a 72 ppi scan is pointless for negatives or transparencies, might be good for a line drawing.

I just think if this is going to be posted in the resource section then it should at least be correct. Now hit me, any corrections?

by Andreas Kornfeld | 25 Apr 2006 23:04 | NYC, United States | | Report spam→
Can anyone clarify this for me? Assuming you want a 72dpi image as the final result to post on the web..will the image look better if you scan from negative at say, 300 dpi before you convert it to 72, than if you scan at 150 dpi and then convert to 72?

by [former member] | 25 Apr 2006 23:04 | Brooklyn, NY, United States | | Report spam→
No, but normally you would want to make as high a scan as possible anyway so you can use your image for multiple uses—prints etc. Davin.

by Davin Ellicson | 25 Apr 2006 23:04 | London, United Kingdom | | Report spam→
Depends on how much you have to tweak your image in PS after scanning. You will get a better scan at a higher resolution, scanning resolution that is, especially if you scan 35mm negs, you are recording more original information, which translates in better color, better highlight and shadow detail, etc.

If you were to scan tearsheets, it wouldn’t matter so much as your original is big and the contrast range on a print is not that wide. For example, my scanner is useless for 35mm scans, but works great for my 4×5 transparencies, because I don’t have to blow the scan up so much.

That’s the whole reason the digital cameras are going ever higher in resolution, so you can record more information.

Depending on the scanner you are using, just try different resolutions. An Imacon scanner scans much better than a cheap flatbed and I firmly believe one should start out with the best possible original.

by Andreas Kornfeld | 26 Apr 2006 00:04 | NYC, United States | | Report spam→
Andreas (or anyone else), you said “Because I noticed that my images shrink on good quality monitors, I resample bicubic sharper to 100 ppi, my personal preference.” could you explain the resampling in simple terms?? I’m trying to make sense of all of this, and I think I’ve got it – but I haven’t heard that term before (or I probably have, but need a refresher on the explination:) I’m going from digital, not scans if that matters… Thanks!!!

by Ana Pimsler | 26 Apr 2006 00:04 | Alexandria, VA, United States | | Report spam→
Ana, in PS>Image>Image Size, you have the pixel dimensions, document size and at the bottom the three check boxes (the CS verison is what I have, might have changed in CS2), the last box is Resample Image: Bicubic, Bicubic Smoother, Bicubic Sharper. I read that bicubic sharper is better for reducing and Bicubic smoother for upsizing. Apparently that eliminates the need to buy overpriced software like Fractals, etc.

If your file from the camera would be 2000×1000 pixels at 300 ppi or pixels/inch your file size would be 5.72 MB at 8-bit. Uncheck the resample box and change the ppi from 300 to 100, the pixel dimension, width and height is still the same, the only thing that changed is the document size, which means your file is still big and nothing has really changed, unless you would print it on paper.

Now do the same thing with the resample box checked, and zipedidoda (just got that from my son), the file is now 650.7K at 667×333 pixels, don’t hit ok yet, at the top enter either a pixel height or width for your web image, the file size will change accordingly.

Now you can hit ok. This can be undone with cmd-z on the mac. Usually I now check for artifacts and apply the unsharp mask and then save as jpeg at 80 to 100% …Hint: if you are in the Image Size dialog box you can reset your settings by pressing the option key, the Cancel button will change to Reset. You can try this out by creating a new empty file under File>New

Disclaimer: that’s what works for me, if there are better solutions or explanations for sharper and smoother let’s hear it. Zipedidoda…..

by Andreas Kornfeld | 26 Apr 2006 01:04 (ed. Apr 26 2006) | NYC, United States | | Report spam→
One more thing, changing the bit depth makes a big diffenrence in the file size, the difference is not visible. For editing it is better to stay in 16-bit.

My goal is the best looking image at the smallest file size. If I could I would stuff transparencies up my dsl line to display on a minimum 30 inch screen.

by Andreas Kornfeld | 26 Apr 2006 01:04 | NYC, United States | | Report spam→
maybe we should all just go back to shooting film. it was so much LESS complicated!! hahaha…thanks for that explination. Now, I just have to find some time to actually go apply it:)

by Ana Pimsler | 26 Apr 2006 22:04 | Alexandria, VA, United States | | Report spam→
There’s no turning back now Ana.

by Paul Treacy | 26 Apr 2006 22:04 | NYC, United States | | Report spam→
hahaha I know, I know. I don’t even know if I remember how to shoot film:(


totally kidding…I hope…

by Ana Pimsler | 26 Apr 2006 23:04 | Alexandria, VA, United States | | Report spam→
A lot of my images shot in Nikon FINE JPEG get resampled to 72dpi after using the Save For Web feature, even if you don’t select Compression and other modifiers. I have to manually go back in and resize to 300 dpi at 6.667×10.023 and it works fine. I’ve yet to figure this out.

Edit: I use the Save For Web because my black & white conversion utitlizes Duotones and Tritones instead of Channel Mixing. And the only format CS will save it in when you select Save As is PSDs and such.

by [former member] | 27 Apr 2006 14:04 (ed. Apr 27 2006) | New York City, United States | | Report spam→
So don’t use “save for web”. I don’t like it. Do it manually. Save them as 100 ppi (for best viewing on current LCD screens etc.) and give them a little extra saturation if needed. When you use “save for web” I think you’ll find the images get a little washed out, certainly when viewed in some browsers this is the case. You need to do it yourself. Don’t let Photoshop do it for you as it’ll standarize everything.

by Paul Treacy | 27 Apr 2006 15:04 | NYC, United States | | Report spam→
I would, but I need the high-res versions from the Duotone conversion in JPEG format, and that’s the only way.

Give it a try: load a color image up, Greyscale it, then go to IMAGE then MODE and Choose Duotone. Pick a second tone and then try saving it as JPEG. It won’t let you.

If you know a way around this, I’d appreciate it. It’s been killing me.

by [former member] | 27 Apr 2006 17:04 | New York City, United States | | Report spam→
That’s because the JPEG file format contains no provisions for recording your Duotone settings. If you want to save your duotoned image, go back to Mode and choose RGB. Then you’ll be able to save as JPEG. Easy.

by Martin Mraz | 27 Apr 2006 18:04 | Prague, Czech Republic | | Report spam→
When optimizing images I stumbled upon a description of a process for giving images a visual boost – especially is they are going to be used on the internet.

I suspect I found the link from somewhere on SportsShooters website but I forget exactly.

If you know how to make yourself a Photoshop action as follows – I like to call it ‘SuperSharp’

On the fullsize image

|||SuperSharp|||


||| 1.) Unsharp Mask 20% 50 Pixels Threshold 0


2.) Unsharp Mask 300% 0.3 Pixels Threshold between 0 – 3 //depending on amount of sharpness required.//
3.) Fade Opacity 100% on Mode Luminosity.|||
4.) Resize to final Dimension
5.) Add Unsharp Mask 110% .1 Pixels

This sequence of events will put a whole ‘bunch’ of ‘punch’ into images.
The action starts at ||| and finishes at |||
Feel free to tweak the settings but it worked for me in the days I was using Photoshop to prepare images for the web.

To clarify, to the best of my knowledge this will work on CS1 CS2 and what ever it was called in the version before!

You can then do all the things that people have suggested, the changing bit depth to 8 bit and the sRGB.

by Andrew Beckett | 16 Feb 2007 15:02 (ed. Feb 19 2007) | Manchester, United Kingdom | | Report spam→
Thanks, Andrew. I’m developing my Web site now and am looking for tips.

by Bill Putnam | 16 Feb 2007 17:02 | Washington, D.C., United States | | Report spam→
ARe on PS CS or CS2?

by Bill Putnam | 16 Feb 2007 17:02 | Washington, D.C., United States | | Report spam→
i use a very simple method.i have created an action for it.can anybody refine it?
steps are here>

resdown (640 on the longer side) using bicubic sharpener
changing the colorspace to sRGB
boost overall saturation a bit
then increase the yellow/red a bit cause it gets the most of the slashing.

bordering is another story…

by shafqat asif | 16 Feb 2007 18:02 | dhaka, Bangladesh | | Report spam→
Mustafah, after you have done the geyscale and duotone, change MODE back to RGB and then you can save as JPEG with quality that you want.
Or you can use the Gradient map, keeping the image at RGB mode. Set the background and foreground colours in palette on tool menu and do it from there.
Not sure if that’s the correct usage of the gradient map but it works. Under Image, Adjustment, Gradient Map (set colours first before).

If you throw the image in a browser (your screen has to be calibrated for this to be any use) you will see what you will get on the web, and can fine-tune, then make a curve or action for final web adjustments
which you can use everytime you save an image for the web, saves a lot of time.

by Angela Cumberbirch | 16 Feb 2007 22:02 | Manhattan, New York, United States | | Report spam→

Get notified when someone replies to this thread:
Feed-icon-10x10 via RSS
Recommended
Icon_email via email
You can unsubscribe later.

More about sponsorship→

Participants

Jethro Soudant, Photographer Jethro Soudant
Photographer
Buffalo, Ny , United States
Corey Sosebee, architect, photographer Corey Sosebee
architect, photographer
Guiyang , China ( KWE )
P.S., Photographer / Designer P.S.
Photographer / Designer
Vienna , Austria
Jon Anderson, Photographer & Writer Jon Anderson
Photographer & Writer
Ocala Florida , United States
Andreas Kornfeld, Photographer Andreas Kornfeld
Photographer
(Photographer)
[undisclosed location].
Paul  Treacy, Photographer Paul Treacy
Photographer
(Photohumourist)
London , United Kingdom ( LGW )
Jerome Pennington, photographer, sushi snob Jerome Pennington
photographer, sushi snob
(pointing & shooting since 1987)
Santa Clarita, Ca , United States
Gayle Hegland, Editorial Artist Gayle Hegland
Editorial Artist
(IPA)
Montana , United States
Ana Pimsler, Photojournalist Ana Pimsler
Photojournalist
Manassas, Va , United States
Kristjan Logason, Photographer Kristjan Logason
Photographer
(editorial and advertising)
Leikanger , Norway
Simon Larbalestier, Photographer Simon Larbalestier
Photographer
(Bangkok)
Bangkok , Thailand ( BKK )
Peter Marshall, Writer-Photographer Peter Marshall
Writer-Photographer
London , United Kingdom
Martin Mraz, Photographer & Translator Martin Mraz
Photographer & Translator
Prague , Czech Republic ( PRG )
Davin Ellicson, Photographer Davin Ellicson
Photographer
New York , United States
Andrew Beckett, Andrew Beckett
Manchester , United Kingdom
Bill Putnam, Producer. Bill Putnam
Producer.
(Video-Photo)
Washington, D.C. , United States
shafqat asif, Web Site/Applications Dev shafqat asif
Web Site/Applications Dev
Dhaka , Bangladesh ( ZIA )
Angela Cumberbirch, Photographer Angela Cumberbirch
Photographer
New York , United States


Keywords

Top↑ | RSS/XML | Privacy Statement | Terms of Use | support@lightstalkers.org / ©2004-2014 November Eleven