How to Get the Best Color & Sharpest Images on WordPress
3 Easy Ways to Make Your Images Look Awesome in WordPress
Kick @ss camera. Check. Bad @ss prime lenes. Check. Calibrated monitor. Check. Adobe Lightroom 4. Check. WordPress blog. Check. Even if you have all the variables tweaked perfectly: Awesome capture, killer color, super sharp images …. why don’t my images display on WordPress and the web like they do on my monitor? Well there’s a few reasons. In this post I’ll share 3 Easy Ways to Make Your Images Look Awesome in WordPress.
“Both the internet and WordPress squash color and kill sharpness.”
Its because both the internet and WordPress squash color and kill sharpness. Over the years I’ve tried many ways to display digital images on WordPress, only to be disappointed with the results. Either the color looks washed out or they look soft. All that time we put in making sure the color is just perfect has gone to waste. So why do the images look washed out and soft focused, a like they did in Adobe Photoshop or Photo Mechanic before uploading them to your WordPress site? Read on for the solutions.
There is a handy free WordPress plugin that I use called Sharpen Resized Images, which does a fairly good job at sharpening after the images are uploaded. But it doesn’t solve the color and sharpness issue (fully). After a bit of research and experimentation I’ve stumbled on what I believe is the best way to process, sharpen and resize images for the web and WordPress.
“3 Easy Ways to Make Your Images Look Awesome in WordPress.”
Color Space, Sharpening and File Size
3 Easy Ways to Make Your Images Look Awesome in WordPress are: Color Space, Sharpening and File Size. These 3 factors will make the biggest difference in making your images look awesome on the web. My old go-to was an Adobe Photoshop Action for Sharpening and Changing the Color Space and then under for resizing ….. File –> Saving for Web and Devices to resize the image. Could it be more convoluted? No. But it still didn’t really work that well. I just wasn’t happy with the results.
Since monitors, the web and WordPress use the sRGB color space to display images thats the color space that needs to be used for output and to uploaded to the web and WordPress. In Lightroom under the File menu scroll down and click on Export. In the Export dialog scroll down to File Settings, under Image Format choose JPEG, under Color Space choose sRGB. That is IF you want your color looking like it did in Photoshop or on your desktop. There may still be slight shifts in color, but this is the closest you’ll get.
The other variable that needs to be addressed is how soft the images look once uploaded. The fix for the softness is to use Adobe Lightroom when Exporting (see screen capture below). Under the File menu scroll down and click on Export. In the Export dialog scroll down to Output Sharpening, click in the box to the left of Sharpen For, choose Screen, and set Amount to Hi. This will fail miserably if you’ve over sharpened your images previously.
I output my images for the web at 100 dpi instead of 72 dpi. I know I can hear the crowds roaring already. There will always be some haters. Thing is the web and the WordPress engine squash everything you’ve worked so hard to bring out in your images. So that extra edge of 28 dpi more IMHO does make a difference. With today’s fast connections I don’t feel that’s an issue and really hasn’t been one for me.
Marc Weisberg is an award winning photographer and Sony Artist of Imagery based in Irvine, California. Specializing in Luxury Architecture & Real Estate Photography, Food + Wine Photography, and Weddings & Family Photography, he’s easy to work with and produces clean, crisp, and technically flawless images. Marc’s photography is published internationally in over a dozen books and magazines. You can contact Marc by phone at 800.943.0414…. or email.