As photographers, there is a lot that goes into making an image look good in post-processing and The Internet is a great way to showcase these images. Unfortunately, many photographers end up posting their stunning images on the web only for them to look like garbage. Here are some helpful tips on how you can keep the “wow” factor of your images alive so the world can see what you are seeing.
1.) CHANGE YOUR COLORSPACE: Many forums tell you that you should set your camera up to shoot in AdobeRGB so your camera can capture a wider gamut of color which is 110% true. I tend to shoot in AdobeRGB myself and send my images over from Lightroom into Photoshop as 16bit ProPhoto RGB files for even more colors. However, when I save my image to the web, I always make sure that I drop my file down to 8 bits (in Photoshop: Image > Mode > 8 bits/channel) and convert my colorspace to sRGB (in Photoshop: Edit > Convert to Profile… > sRGB). The reason for dropping down to 8 bits is that you don’t need that extra overhead in your files when showing them online. Remember, the internet is a fast paced world so no one wants to take forever and a day to sit and wait for an image to load your website. The reason for converting over to sRGB is a much more essential thing to do. See, just like anything, the internet has standards. However, that doesn’t mean that every web browser follows them exactly. For example, Mozilla Firefox looks at each image file and checks the colorspace and it can read either AdobeRGB or sRGB. Internet Explorer is special in the fact that it just assumes that all files are in sRGB and if they are not, then IE displays them as such…
This means that when you look at your AdobeRGB image in IE then you will see the colors are off kilter and the image looks yucky. Saving in sRGB just ensures that everyone can play nicely no matter what web browser a viewer is using.
2.) RESIZE THE IMAGE: A lot of people who know HTML tend to upload the full sized image to their website or blog and then use their HTML programming skills to shrink the image to fit. An example of how this may be done is:
< .img src="fileLocation.jpg" width="33.33%" height="33.33%" .>
However, the browser still has to load that large file and then it has to resize the file in the web site to 33.33% of the original. Not all browsers may handle this properly so you may end up with a real long and thin image or a short and stumpy one that is skewed. By actually saving a new file that is re-sized to fit your content window, you will notice smaller file sizes and will not have to worry about how the browser may mess with your image.
3.) SHARPEN FOR THE WEB: This is a real biggie to get your files to pop. Sharpening is something that can easily be overdone but it is something that must be done at various image sizes. Therefore, when you shrink your huge 12 or 21mp image down to 700px or so, you will need to then re-sharpen. Remember, a little goes a long way. What you are looking for is a point where you start to see a black rim around your subject and then back it off a pinch to where the edge is not as pronounced.
4.) SAVE FOR THE WEB: In Photoshop, select File > Save For Web & Devices. A new pop up window shows up and gives you the ability to optimize and tweak your image for a proper balance between image quality and file size. This can be done by moving the Quality Slider until you see a file size that is manageable. In this age of high speed internet, a 150-200kb are nothing to load.
