Naming Convention

You want to provide single or all resized versions of an image or multiple images, e.g. to show a cropped version on some devices.

Though we will stick to one example, the described behavior holds for different source folders, file names and extensions.

Let's assume you have an image at images/girl-in-crowd.jpg which shows a girl in a crowd of people. Though you'd like to show the crowd and communicate emotions, your focus resides on the girl which is wearing one of your products. Thus, the image should zoom in on smaller devices to still show the girl in sufficient size. However, the automatic image resizing process would not generate such an image version.

Consider you have configured an appropriate breakpoint package with a single breakpoint at 767px. This means that a resized image version will be used for devices with a viewport width of 767px and lower. If you place a file girl-in-crowd_767.jpg in the same source folder as the original image, the responsive image plugin will automatically process this version on the respective devices, instead of the original image.

The following table gives an overview of this behavior.

Device width	Image dimension	Used file
0px - 767px	767px* x ?	images/girl-in-crowd_767.jpg
768px+	original dimension	images/girl-in-crowd.jpg

• Note that the resized image dimension is a maximum value, the image will never be enlarged beyond its original dimension.