User Tools

Site Tools


ce4_tfwp_uploading_images

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
ce4_tfwp_uploading_images [2014/07/09 08:08]
matthew [Media Settings: Image Sizes]
ce4_tfwp_uploading_images [2014/07/09 08:09] (current)
matthew [Media Settings: Image Sizes]
Line 34: Line 34:
  update_option('​large_size_h',​ 1092);  update_option('​large_size_h',​ 1092);
 </​code>​ </​code>​
 +
 +----
 +
 +===== 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:
 +
 +{{:​other:​file-export-settings.png|}}
 +
 +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.
 +
 +Jeffrey Friedl has published [[http://​regex.info/​blog/​lightroom-goodies/​jpeg-quality|an excellent analysis of Lightroom'​s image quality control]].
 +
 +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, [[http://​theturninggate.net/​2012/​02/​pixel-density-in-with-truth/​|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.
 +
ce4_tfwp_uploading_images.txt ยท Last modified: 2014/07/09 08:09 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.