FooGallery and Retina Ready Images

Enabling Retina Image Support

FooGallery supports retina ready images which can be enabled in the FooGallery Settings under the Images tab. 

Selecting Retina sizes and clicking "Apply Defaults to all Galleries" will generate Retina ready images for all existing Galleries.  

Any new Galleries added will have Retina sized images created automatically. 

Ensuring your FooGallery thumbnail images are Retina Ready

Because Retina device screens have higher pixel density images need to be uploaded at a larger resolution in order to display clearly on Retina devices. 

For example:

A 300x300 pixel image will need to be uploaded to a Gallery as a 600x600 pixel image in order to display clearly on both normal and Retina devices. 

Retina images have higher pixel density for the saem size image

Retina Images have a higher pixel density (2x or more)  for the same size (width and height) image. 

FooGallery will automatically apply HTML  resizing so that the image is display as 300x300 pixels on both normal and Retina screens. The higher pixel density Retina screen will display 600x600 pixels in the same height and width as the normal 300x300 image making it appear much more clear & crisp. 

Smaller images displayed on Retina devices can look blurry because they are scaled up to the correct size but don't have the pixel density required to display on the Retina screen -  on a Retina display, each pixel in a bitmap image is stretched into an area of four pixels (2 x 2) as shown in the above image. 

Retina image thumbnails are auto-generated when the gallery is first rendered. So if you enable 2x and 3x retina settings, then the 3 versions of the thumb will be generated. For example, if you set the gallery thumbs to 200x200, then 200x200; 400x400 and 600x600 thumbs will be generated for each thumb (if possible). We say if possible, because if the full-size image is smaller than the retina size (600x600) then it will not be used.


General Advice

If you have enabled Retina image sizes for your Galleries, ensure that any images you will be displaying in FooGallery are large enough to display on the Retina devices. 

For example: 

If you want to display a 600x600 image clearly on 2X Retina devices you will want to upload gallery images at 1200x1200 pixel resolution. 

If you want to display a 600x600 image clearly on 4x Retina devices you will want to upload gallery images at 2400 x 2400 pixel resolution. 

Further Information

For further information on Retina images please read the following articles. 

https://wpcurve.com/wordpress-guide-to-retina-images/