Table of Contents

Image Optimization & Sizing

When allowed to do so, CE3 Theme for WordPress makes extensive use of WordPress' various image renditions: thumbnail, medium, large and full. For this reason, it is best to upload image files of adequate size and quality for display on Apple's high-resolution Retina displays; within WordPress, these files will be used as the Full-size image rendition. But because we will sometimes be sending our full-size images to browsers, it's important that we properly optimize our images before uploading.

I'm going to say that again, because it's important:

… because we will sometimes be sending our full-size images to browsers, it's important that we properly optimize our images before uploading.

Because these features require extra care, they are disabled by default.

Media Settings: Image Sizes

When images are uploaded to WordPress, WordPress will create various renditions of the image. The image renditions available are:

Full-size (the uploaded file, untouched)

Large-size

Medium-size

Thumbnail

Normally, you would be able to define sizes for the Large, Medium and Thumbnail renditions from within the WordPress dashboard, under Settings > Media. However, CE3 Theme for WordPress will set the Medium and Large dimensions for you, calculating ideal sizes based upon the single-column layout width as setup during the theme creation process in Lightroom.

We set these for you so that you don't have to think about it.

But if you would prefer to set these values manually, open the computed_functions.php file within your theme folder and edit or remove these lines at the top of the file:

In CE3 Theme for WordPress 2.1.0 and beyond, you may set your desired Thumbnail size via slider in the Web module's Appearance control pane.

Preparing Images for Upload

If you've enabled the image replacement logic for Retina and HiDPI displays in Theme Options > Advanced Settings, then you need to ensure that the images you're uploading to WordPress are adequately optimized for online use. We recommend the following export settings:

With these settings, I can generally export “full-size” image files ranging between 300-500KB.

File Settings

Image format should always be JPEG.

When creating images for viewing on-screen, we should always choose the sRGB color space.

We consider a Quality setting of 69 to be ideal for web use. If that should prove to be insufficient for an image, then use the next quality tier setting of 76.

Going from Quality 76 to 77 triggers yet a higher Quality tier, and not a good one. It's at 77 that the ratio of file size to visual fidelity begin to get out-of-control, with image file sizes increasing dramatically and almost no discernable improvement to visual image quality.

In general, we feel that the 62-69 range produces images of adequate quality for Web viewing, while still of reasonable file size for loading into a web-browser. The 70-76 range produces slightly superior images, keeping file size within a range that is usually acceptable, but not optimal. Beyond that, file sizes just get silly.

Image Sizing

For best results on Retina displays, resize images to be 2x the size of your Large image renditions in your WordPress settings. If you'd like to provide better quality images for Retina displays, but still want to boost performance, consider a multiple of 1.5x instead. In the image above, I'm exporting my images at 1500-pixels on the long edge, which is roughly a 1.5x multiplier. These images look pretty good on the Retina display.

Resolution may be any value; this value has no impact on images being viewed online, nor on the print quality of downloaded images. For more information on image Resolution settings, see my article on The Turning Gate's blog, Pixel Density & the Web.

Output Sharpening

Apply whatever amount of screen sharpening you feel is appropriate.

Metadata

We feel it is generally a good idea to publish images with full metadata intact.

Watermarking

You may wish to watermark your images. Watermarking is the best, most reliable method of protecting your images online. And because our full-size images are fairly large and of sufficient quality for small-scale printing, it is probably in your best interest to watermark your images if security is of concern.