preventing loss of sharpness, color and contrast when uploading to Photo.net

<p>Since we all view the website through different monitors, this may be a difficult question to answer. I work off a calibrated monitor and Use Lightroom for basic processing and CS3 for final work. I'm very happy with how my images look in my editing software in regards to color, contrast and sharpness. I often am disappointed though when I upload my photos to Photo.net. They seem to dull a bit. The sharpness softens, the color dulls and the contrast seems to fade a bit. I know that images take a bit of a step back when uploading to the web, so I was just curious if anyone has any advice when uploading to the site. Do you step up the color a bit, or go a couple extra steps over with the contrast, etc. I'm curious to know your routine for web prep. Thanks for any responses and advice!</p>

<p>What happens when you take the very same 500x500 pixel jpg that you're happy looking at in your editing software, and then use your web browsing software (the same one you use to visit photo.net) to display if from your local drive?</p>

<p>Not quite sure how to do that. Do you mean to right click the jpg and view it with my browser?</p>

<p>Yea, Tim right click and choose you browser as the viewer... When you down size in CS3 are you choosing Bicubic Sharper from the options menu.<br>

I have found that batching, Jpegs from Bridge or lightroom does not make the best jpeg results and have gone back to doin' by hand for web use.<br>

When I finish an image I save the PSD in 1 folder below the raw images, then flatten image, do final sharpening and save as full size JPEG or TIF (depending on use) then make the web JPEG from the Flattened Sharpened Image(sometimes a light curves adjustment.)</p>

<p>Well, you're not mentioning which computing platform you're on, so the details are a little hard to guess.<br /><br />Just open up a web browser, and in the address bar, type in the full local path to that jpg. You may also be able to drag-and-drop the image from file system window over to the web browser. Again, it depends on whether you're a Mac or a Windows person.<br /><br />The reason for this test? To see if your web browser is handling color space the same way as your editing software. Are you creating web-ready JPGs using the sRGB color space? If, for example, you were using the Adobe RGP space, then the browser - if it's not color-profile-aware - would indeed default to sRGB, and make your images look dull.</p>

<p>It looks the same when I do it that way, I wonder if I'm just losing something in the jpeg conversion because I'm viewing them as tiffs in lightroom.</p>

<p>Well I use Adobe CS3's save for web feature. Maybe my settings aren't right. It's not a huge difference, but enough for me to notice.</p>

<p>BTW, I'm using Windows XP and Google chrome browser......</p>

<p>I just had a thread about a related concern. </p>

<p>Take a look at the thread titled, "Difference between the image I uploaded and what is displayed" in the photonet help forum (http://www.photo.net/site-help-forum/00V0jr). I was surprised to see very annoying JPG artifacts on images having a high degree of local contrast, even though the artifacts clearly weren't present on the files that I had uploaded. For the record, I wasn't having any significant problems with loss of saturation or loss of global contrast, just that the artifacts from photo.net's jpg compressor were making images I submitted with lots of detail at high spatial frequencies come out looking sort of like they had been severely oversharpened.</p>

<p>The bottom line of that discussion is that even if the photo you upload is within the posting guidelines (eg, 700 px wide and 300 kB for the NoWords forum), photo.net applies another round of compression to your image before it stores a version of your image for display (and retrieval by others). This secondary round of compression is quite severe. In the case of the image being discussed in that thread, it squished my 300k jpg down to ~50k. This is on top of the resizing and compression that I applied to initially bring my image down to 300kB from 5.5 Mb (ie, the size of the in-camera JPG). The overall factor of ~100x is clearly visible. </p>

<p>HTH,</p>

<p>Tom M</p>

<p>I can understand the reduction for the "no words" forum since the images are posted in the actual forum itself and I understand the storage for hosting a photo site must be quite a feat due to the massive amounts of photographs that are uploaded daily, so I have no ill feelings towards whether or not it's done, I'm just wondering how to upload the best possible looking images that will fall within photo.net size limitations.</p>

<p>Each image will have different final compression sizes depending on the amount of detail in the image. A dark-ish sunset showing a simple sky and land is going to show a smaller KB size than a detailed shot of a brightly lit Yosemite landscape containing trees, grass and rocks.</p>

<p>Some of my 3000x2000 pixel dimension images I try to get down to 150KB as read from PS's Save As Jpeg process dialog set at 6-7 Medium Quality (not done in Save For Web), down from 17MB as read in Image Size... dialog box. When I drag and drop the uploaded PN image from Safari browser to my desktop and do a "Get Info" in Mac OS X the size has dropped to 120KB. The size of PN compression changes from image to image for the reasons described above.</p>

<p>My uploaded PN images go slightly soft with no problems with color after first converting to sRGB. I never use Bicubic Sharpener because it's just too harsh and gives an artificial patina to the overall look. What I do is zoom to around 25% view with my 6MP size images and apply either USM of 30-40 Amount/2-8 Radius but never a 1 Radius which will give an overly crispy/noisy texture at this zoom view level. You're basically applying more of a micro contrast sharpening to compensate for the LCD's antialiasing effect after downsizing.</p>

<p>What helps me in pre-visualizing for the web is to do the sharpening on a layer and after downsizing using Bicubic Smoother turn the layer on/off to see if it gives the same results as full size at a reduced zoom view. It's usually pretty accurate most of the time.</p>

<p> </p>

<p>seems to me there is no one way, but just a matter of preference and what works for each person/image. I'll try the things you all have suggested and see what works for me. I appreciate the feedback.</p>

<p>I've noticed when I publish a photo to flickr and the same exact photo .jpg to photo net, the pnet photo loses some sharpness and contrast. I think there is something about photo.net that dumps image information that other sites do not. </p>

<p>I had that problem, but changing my images to sRGB before uploading them helped a lot.</p>

<p>I'm new to photo.net. Uploaded a couple photos and wondered what went wrong. Not sharp at all. So THANKS all for steering me in the right direction too. Aloha.</p>

<p>To reduce file size, do strip out embedded thumbnail image & EXIF data before trying more severe compression levels. Gimp presents the options, under "Advanced Options" dialog, to not save a thumbnail image or EXIF data in a JPEG file when saving a file as one.

 

<p>

Stripping post creation via <a href="http://www.sno.phy.queensu.ca/~phil/exiftool/">exiftool</a> ...

 

<p>

<tt>

exiftool -P \<br>

  -all= -ThumbnailImage= -PreviewImage= \<br>

  -overwrite_original_in_place \<br>

  file.jpeg

</tt>

<p>parv, roughly how much might stripping out that info save you on, say, a 300k, 700pixel wide file?</p>

<p>Tom M</p>

 

<p>I have seen a few versions of this question here on PN, but nobody has provided a solution to the problem. I have struggled a lot with exactly the same issue. I have not found the optimal solution yet but I have corrected the problem significantly. I also use Adobe Lightroom and export the images as jpg in the sRGB color space to post them on facebook with the dimension of 604 pixels in the long edge. Then I batch-process all the images in PS CS3 using a simple action that I generate using a representative image. This action includes applying some local contrast, increasing saturation to 20-25%, decreasing the brightness of the images slightly using curve, and then exporting using "Save for the web". In detail:<br /> 1. Open the image in CS3. Go to View on the menu bar, --> Proof Setup --> If you use Windows, select Windows RGB. <br /> 2. Copy the background layer and apply an USM: amount = 50%; radio = 20 pixels; Threshold = 0 levels. Then decrease the opacity of this layer to what you think is appropriate; in my case I usually decrease it to 20-25%.<br /> 3. Increase the saturation of the image by 20-25%. View the optimized version of the image in "Save for the Web". You might want to go back to the saturation layer and fine tune the saturation slightly. Some color balance might also help. At this point, my images look a little too bright when I view the optimized version of "Save for the Web", so I use a curve layer to adjust (decrease) the midtones. I you are happy with how the image looks, export it by Saving it for the Web". You don't need to flatten the layers since this procedure automatically does it and outputs the file in the sRGB color space.<br /> 4. Post the image on the web and see if further adjustments are necessary.<br /> 5. If everything looks great, create an action of these adjustments and batch process all your images.</p>

<p>I hope this helps.</p>

<p>Nicolas</p>

Here are some tests (JPEG files unless stated otherwise are generated by GIMP at about "90" compression level, "Optimize", "Save EXIF data", "Save thumbnail" options checked) ...

 

- 800x800 px, 176 KB file was reduced to 162 KB;

 

- 800x533 px, 172 KB was reduced to 158 KB;

 

- 466x700 px, 290 KB (saved at "100"/no compression level) was reduced to 280K KB;

 

 

... so for above files it is 10-14 KB, perhaps just enough to avoid the wrath of Das Kompressor. (The difference was the same within GIMP when "Save EXIF data" & "Save thumbnail" options were not selected for the 290 KB file.) Then again, (a) one could increase compression level just a bit, (b) above files are easily under 300KB.

 

For humor, a Sony A700 generated 12 Mpx, 4 MB JPEG file of "Fine" setting was reduced to 3.3 MB (must be due to removal of metadata as the extracted thumbnail image was of only 8.6 KB).

<p>parv, thanks for doing the test. You're right, the saving isn't huge, but every bit helps.</p>

<p>Tom M</p>

<p>PS - I learned something today: Until your post, I always thought Das Kompressor was part of the standard equipment on Die Unterseeboote. :-)</p>

<p>Wow! great information here guys, thanks. </p>

<p>Tim,<br>

can you post an example?</p>

<p>Just look at my "new stuff" folder. In fact, let me know how they look to you, It might just be how I'm seeing them through my browser.</p>

<p>All-your timing is impeccable. I have just encountered this same problem too! All your information has been helpful. Here is another link I found for "novices" like myself. thanks!<br>

http://www.petapixel.com/2009/09/17/why-you-should-probably-use-srgb/</p>

<p>Tim, I just did a drag-and-drop on one of the images in your "New Stuff" folder, opened in CS3 and got a prompt that indicates the sRGB profile is stripped from the image.</p>

<p>Here's what makes it so difficult to troubleshoot an issue like this when the profile is stripped.</p>

<p>First it requires a lot more information now that we have LCD's on the market that are of varying<br>

color gamuts.</p>

<p>Laptops are known to have a very small gamut sometimes smaller than sRGB, off the shelf LCD's could have something close to sRGB or something around AdobeRGB or NTSC. None of the displays are going to be exactly like sRGB or any working space profile so each sRGB image is going to look slightly different when viewed in a <strong>non-color managed browser</strong> on other displays with different color gamuts <strong>even if you retained the sRGB profile.</strong></p>

<p>Firefox is a color managed browser but it needs to be turned. Google how to do this. I haven't kept up with all the different versions because I use Safari on a Mac in OS X which has color management turned on automatically.</p>

<p><strong>If you view an sRGB image without a profile in color managed Safari, the monitor space will be assigned to your sRGB image unless using Snow Leopard which now assigns sRGB instead.</strong> Again this is going to look different between different displays because each has a different color gamut which the display profile will reflect and if using a different Mac OS.</p>

<p><strong>So, what kind of display are you using and is it calibrated and profiled?</strong></p>

<p>Secondly someone mentioned in this thread that they use <strong>"Save For Web"</strong>. This application is very superior and efficient at compressing the image to a much smaller size while reducing compression artifacts compared to regular "Save As..." to jpeg using its Maximum, High and Medium quality settings which can slightly desaturate some images that have a lot of brightly colored tiny detail like clumps of bright orange and yellow autumn leaves. SFW's settings need to be known <strong>BUT</strong> their settings are placed in different areas of the interface <strong>depending on whether you're on a Mac or Windows system.</strong></p>

<p>Get to know where these settings are. Once found the settings that are important to set are...</p>

<p><strong>1. </strong>Make sure <strong>"Convert To sRGB"</strong>-(<em>automatically converts image to sRGB</em>) and <strong>"ICC Profile"</strong>-(<em>embeds sRGB profile</em>) check box is checked. <strong>On a Mac </strong>"Convert To sRGB" is in a dropdown menu accessed by clicking the upper farthest right triangle button, <strong>the one not next to the image window.</strong></p>

<p><strong>2.</strong> Make sure you're viewing the image in SFW in the <strong>"Optimized"</strong> instead of the <strong>"Original"</strong> window.</p>

<p><strong>3. </strong>Click on the small triangle button in the upper right corner <strong>next to the image window</strong>, a dropdown window will show up and make sure <strong>"Standard Windows Color"</strong> is checked.</p>

<p>The most important thing about solving this color change when viewing in a web browser is to <strong>use a color managed browser. </strong>If not you'll just have to live with the look.</p>

<p>There, I think I covered everything.</p>

<p> </p>