2

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?

cweiske
  • 30,033
  • 14
  • 133
  • 194
  • 1
    Why not using the pixel sized for the naming? It's scalable as you are not constrained to consensual naming like 'size1', 'size2', 'size3' (because, what if you need a new size between 'size1' and 'size2'?), or 'small', 'medium', 'large' (for the same reason). imgx48, imgx96, imgx250 seems straightforward to me... – Narxx May 30 '16 at 11:17
  • I like the Bootstrap style naming convention: xs, sm, md, lg, xl. For example `org-md-pp` tag for `original frame, midium sized, profile picture`. And `4.3-sm-gp` for `4:3 frame, small sized, galery picture`. – Emre Bolat May 30 '16 at 11:22
  • @EmreBolat Bootstrap's naming conventions made sure there are only 3 break points. If you wanted to add more sizes, you'd need to get very creative with your naming conventions. fixed sizes naming make sense, they are easily read, and scalable. – Narxx May 30 '16 at 11:32
  • I think @Narxx way makes more sense to me, but I will choose `-400w` style. This way you don't need to worry about new dimensions you must include in your UI; you need to resize of course. Anyway make sure using descriptive names (such as landscape, details, square, etc) in your file names doesn't affect SEO. – mrmowji Feb 04 '19 at 07:10

2 Answers2

2

My recommendation would be something like this:

Consider all the different ratios you have on the system, for example:

  • 2x3
  • 1x1
  • 1x2
  • 3x4

Give each a name, like:

  • 2x3 - Landscape
  • 1x1 - Square
  • 1x2 - Spread
  • 3x4 - Portrait

Then use the names as prefixes for the different sizes for each image:

landscape_300 will result a 3x4 ratio image, 300px wide.

Square_96 will result a 96px x 96px image, and so on...

Narxx
  • 7,929
  • 5
  • 26
  • 34
1

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)
cweiske
  • 30,033
  • 14
  • 133
  • 194