Image styles best practices

Image size

Image files should be 2x the size they appear on the site in order to make sure retina display retains the sharpness of the images. Over 2x and the file size can become too large, under 2x and the resolution of the image may not look great. It’s best to try to retain original image ratio without stretching. Image stretching should always be avoided.

Image effects

The Scale and Crop effect is preferred if possible, depending on what’s necessary for the solution.

Focal point

When using Focal Point for images, the image style effect Focal Point Crop and Scale is recommended.

Image ratio

The ratio of the image file should be close to the scale and crop ratio as possible to avoid important image content being cropped.

Image resolution

Resolution should be double what is expected to be used.

Responsive image

It’s best practice to use as few breakpoints as possible. Too many breakpoints can lead to too many image styles, which can create confusion. At minimum, breakpoints should include sizes for mobile, tablet, desktop, and large desktop. They sizes for these breakpoints should be the same as defined in the theme.

Image compression

Never go below 85%, to avoid significant degrading of image quality.

Naming conventions

Avoid naming image styles in a way that targets specific elements. Instead, name them in a way so that image styles can be reusable. For example: medium, large, thumbnail, etc. Also, if the image style has an effect like scale and crop that applies width and height dimensions, it’s best practice to include the dimensions in the image style name, such as large_640x640.

Additional resources: