cweiske cweiske - 3 months ago 12
CSS Question

Naming conventions for different sizes of an image

We're using a thumbor image server to automatically generate different resolutions of images uploaded by our users.

The images are used at different locations: medium-sized profile pictures, small images at listings, larger images at detail pages, even larger images in galleries.
Some variants have their original aspect ratio, others have to be fitted into a 4:3 frame and have a grey background.

Image size identifiers like "small", "medium" and "large" do not carry any meaning and can mean anything. Unfortunately I did not find any documented naming convention for this situation.

What image size naming conventions are known, and which work best in the web application environment?


We've settled with the following solution:

  1. At first, we made a list of all image sizes, their aspect ratio and styles required in the frontend.
  2. We grouped them into buckets of similar sizes, same aspect ratio and styles
  3. They got a name depending on the location of their usage, their style and their size/aspect.

In the end we had a list with the following names:

  • thumbnail (small images, 40px wide)
  • small (fit into 300x225)
  • list43grey (for some list views, 4:3 aspect ratio, grey background)
  • listquad (for some list views, 1:1 aspect ratio, crop-fit)
  • detail (large image on detail pages, 800x400)
  • fullscreen (full-screenable gallery, 1600x1200)