How do I determine the dimensions to optimize my image sizes?

Use a screen measuring tool to determine the size needed for your layout and account for retina image scaling

  1. Measure the image size needed for the section or module using a screen measuring tool
  2. Then multiply the dimensions by 1.5 to account for retina image scaling to determine the final image size you should load

For example, a square team member image is 240px x 240px and would need to be loaded at 360px x 360px.

The theme will automatically serve the larger size (360x360) for retina screens while using the standard size (240x240) for non-retina and further reduce the image size responsively by device size.