Creating Retina Images

BigTree supports creating "retina" ready images for your website when this checkbox is checked and a user uploads an image that is at least twice the desired crop or thumbnail size.

Retina versions of images retain the same name a normal version would. It is important that images be given strict dimensions with width/height attributes provided in either the <img> tag or CSS.

Quality Settings

Changing the quality settings for your images can be found in /templates/config.php for BigTree 4.0 and /custom/settings.php for BigTree 4.1 and later.

  • $bigtree["config"]["image_quality"] — This should be a numeric value from 1 to 100. The higher the number the higher the quality and size of your images will be (defaults to 90)
  • $bigtree["config"]["retina_image_quality"] — This should be a numeric value from 1 to 100. The higher the number the higher the quality and size of your images will be (defaults to 25)

Because "Retina" images are scaled down for normal screens we set the default much lower. In most images this produces an equivalent quality to a non-retina image or normal displays and a higher quality image on retina displays. The exception to this is images that have prominent gradients. Lower quality settings severely hurt gradients and the Retina Images setting should be turned off if your uploads may contain them.

Crops

If an upload field creates crops, the crops will receive retina treatment if the selected area provides at least 2x the pixels needed for the crop. Some examples:

  • Crop calls for a 400x400 crop, user uploads a 1000x750 image and selects a literal 400x400 block. A retina version is not created. A normal 400x400 image at 90% JPEG compression is created (or lossless PNG/GIF).
  • Crop calls for a 400x400 crop, user uploads a 1000x1000 image and selects a literal 900x900 block for the crop. A retina version image is created at 800x800 at 25% JPEG compression (if the user uploaded a PNG or GIF it is converted to JPEG).
  • Crop calls for a 400x400 crop, user uploads a 1000x100 image and selects a literal 700x700 block. A retina version is not created. Although the original image itself was large enough for a retina crop, the user's preference of cropped area supersedes the desire for a retina crop. A normal 400x400 image at 90% JPEG compression is created (or lossless PNG/GIF).

Thumbnails

If an image field calls for only thumbnails, a retina version will be created if the uploaded image's dimensions are double the given thumbnail dimensions. Some examples:

  • A crop calls for a max 400 width image. The user uploads an image that is 700x600. A retina version is not created because the minimum retina width (800) is not met. A normal 400x343 image is created at 90% JPEG compression (or lossless PNG/GIF).
  • A crop calls for a max 400 width image. The user uploads an image that is 1000x800. A retina version of the image is created at 800x640 at 25% JPEG compression (if the user uploaded a PNG/GIF it is converted to JPEG).

If a crop has its own thumbnails, the thumbnails will automatically be retina if the crop meets the requirements for retina status. If a crop does not meet the criteria for retina and its thumbnail does, the thumbnails will still be retina.