Can you give me tips on work flow in post processing? I am fresh on the web and am trying to put my best work out there but when it appears on my website, it looks like crap. How do I export the files in order for them to remain the same quality they are on my camera and in Lightroom? Teach me your ways!!

I am converting Canon EOS 6D RAW images to JPEG.

  • 5
    Samples of your work would help to give more specific feedback. It could be color profiles, scaling, compression settings, layout or any number of other factors. Without seeing what you are working with, it's really hard to give reliable advice. – AJ Henderson May 1 '13 at 4:20
  • 2
    An example image would allow a much more definitive answer. Otherwise we are guessing on the myriad of possible issues. – dpollitt May 1 '13 at 13:40

If it looks good in Photoshop and Lightroom, but looks bad on the web, the most likely problem is probably either improper resizing resulting in artifacts or compression artifacts resulting from too low of a jpeg quality. To maintain the highest possible quality, try reducing using multiples of the pixel count for the original image so that new pixels don't have to be created. If you can't do this, play around with the different scalers. Bicubic is usually decent.

Another possible problem may be that you are using too low of a jpeg quality. Depending on the image, you can still see artifacts in to fairly high quality level jpegs. I normally use at least a quality setting of 90 when doing portfolio stuff. Max quality may be preferable for some images.

There could also be a color space mismatch potentially since Lightroom and Photoshop can work with color profiles where as most browsers won't, but if you are specifically using non-standard color profiles, you'd probably know about that already, so it's less likely.

| improve this answer | |

When you save for web, the first thing you want to do is make sure the image is tagged with the sRGB color space. Despite making some fairly large strides in recent years, web browsers still do not have ubiquitous and proper support for color management. A lot of digital cameras will use the Adobe RGB color space (either by default, or maybe you selected it). Adobe RGB is a broader gamut, and can potentially preserve more precise color detail, but it is not yet fully compatible with the web (or, for that matter, the average quality computer screen.)

If you upload a photo to the web that is tagged with a color space other than sRGB, it will often be rendered incorrectly by some browsers. Adobe RGB and Pro Photo RGB spaces will usually render washed out and dull in color (Pro Photo RGB images might even look practically grayscale.) If this is what you are seeing, you simply need to tag your images with sRGB.

If your photos do show up with the correct color, but otherwise look incorrect, then you are probably saving them with too much compression. JPEG (the most ubiquitous photo format, and what I assume you are using) has a configurable compression (or quality) level. What level of compression you use really depends on what is in the photo. For photos with a lot of random detail and no gradients, you can get away with quite a lot of compression before artifacts show up. However, if your photos have smooth detail, or more importantly gradients, then you will want to compress as little as possible. Gradients, which may be as benign as a simple blue sky, compress TERRIBLY with JPEG. If you have photos with a lot of sky in them, it is best to use compression settings over 90 quality. If you wish to eliminate artifacts from such photos entirely, then you should just go with 100 quality, unless you plain and simply cannot afford your image files being that large.

You should experiment with different JPEG compression levels for each of your photos. There is absolutely NOT a "one size fits all" compression level when it comes to JPEG. Eventually, you will get a feel for what compression/quality settings work for what kinds of photos, and you won't have to experiment anymore.

| improve this answer | |

Your photos looking bad, presumably color is off, may be a color profile issue. Try exporting your photos to .jpeg in Photoshop or Lightroom with sRGB color profile. When you export in Lightroom, there are options if you scroll lower about the color profile.

You see, the photos are represented in a certain color space (dictated in the color profile). The default is the Adobe 1998 color space, which contains the most colors. Web browsers do not make use of the color space. They do make use of the sRGB color space though, which is why you should convert to sRGB in order for your photos to display as you intended.

Hope this helps.

| improve this answer | |
  • Nick, thank you so much! You were spot on. As soon I updated the color profile my photos started looking great. – Kristy May 2 '13 at 2:14
  • @Kristy : Could you mark this as the correct answer if this solved your problem ? Thanks. – Max May 27 '13 at 20:33
  • @Kristy Great! Glad I could help. Would you please mark this as the correct answer if it solved your problem? Thanks! – Jack May 27 '13 at 23:13
  1. Make the image the size it's going to be viewed: If a pic goes into a 600px Wordpress layout, but it's 3000px wide, some untrustworthy process will resize it and you lose sharpness. While we are on the subject of resizing, do it in Photoshop. Image > Image Size. Set the correct pixel size (don't bother with DPI), and use the Bicubic Sharper Setting (Best for Reduction)

  2. In Photoshop: File > Save for web. Set to JPG with minimum quality 60. Make sure it is being converted to sRGB (there's a little tick-box somewhere). This will accurately convert your color to closely match the original.

| improve this answer | |

Give you a easy image optimizing tool--Lossless Photo Squeezer, it is easy to use and can batch shrink your photos.Maybe it can help you. https://itunes.apple.com/app/id704083918

If you are a Mac user,maybe you can try IMAGEmini. I have used it for optimizing my images,and it is powerful .I like the custom resize function. More information,you can visit https://itunes.apple.com/app/id771501095

| improve this answer | |
  • Are you in any way affiliated with these apps? If so, please disclose the affiliation. Thanks! – jrista Dec 20 '13 at 17:23

In Lightroom, you may want to try using the Print module to "print to JPEG file". Set the DPI to 100 (since it won't matter when viewed in browser) and use the "page dimensions" as the PIXEL resolution you need (divided by 100). So for example, if you need a 1000x800 pixel image for your website, set the page size to 10-inch x 8-inch at 100 DPI. This creates high quality sRGB images that should display properly on your website.

How does this differ from the EXPORT function? Well it differs in the sense that you don't have to proportionally crop your image (maybe via a virtual copy) before exporting. For example, if you want to "export an image to use as a Facebook cover" you can just "print" to a the specific dimensions needed, and use the print module to reposition the image before printing it to an automatic sRGB (web-ready) image. You can still use export to do the same thing but it would mean you have to either crop it after the export or crop it before the export or have the target site resize/crop it for you using their methods which you have no control over.

| improve this answer | |
  • how is this different from export to jpeg, 100% quality, resize to xxxx? if there is a difference post examples. – Michael Nielsen Dec 20 '13 at 19:51
  • Im tempted to downvote until you do. but I like how my rep looks atm. – Michael Nielsen Dec 20 '13 at 19:52
  • I've amended the answer to explain the difference between exporting to hard drive compared to printing to file. – J. Chin Dec 20 '13 at 23:57
  • 1
    but isnt your "change" in the print module lost forever , while if you do a virtual copy for FB cover, you set the crop ratio, reposition and print that. you might also need to do some color\contrast\brightness changes on that version to look good with the layout. and you can also go back and tweak it after you upload it and find you need to move it 2px to the left. It still feels like a workaround, around a problem that doesnt exist and they have designed a method for this and your workaround is inferior to the way it is intended. – Michael Nielsen Dec 23 '13 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.