不同尺寸图像的命名约定答案

【问题标题】：Naming conventions for different sizes of an image不同尺寸图像的命名约定
【发布时间】：2016-09-28 04:47:02
【问题描述】：

我们使用thumbor 图像服务器来自动生成用户上传的不同分辨率的图像。

图像用于不同的位置：中等大小的个人资料图片、列表中的小图像、详细信息页面中的较大图像，甚至画廊中的较大图像。一些变体具有其原始纵横比，其他变体必须适合 4:3 帧并具有灰色背景。

像“小”、“中”和“大”这样的图像尺寸标识符没有任何含义，但可以表示任何含义。不幸的是，我没有找到任何记录在案的这种情况的命名约定。

哪些图像大小命名约定是已知的，哪些在 Web 应用程序环境中效果最好？

【问题讨论】：

为什么不使用像素大小来命名？它是可扩展的，因为您不受“size1”、“size2”、“size3”之类的一致命名（因为，如果您需要在“size1”和“size2”之间的新尺寸怎么办？）或“小”、“中” '，'大'（出于同样的原因）。 imgx48、imgx96、imgx250 对我来说似乎很简单......
我喜欢 Bootstrap 风格的命名约定：xs、sm、md、lg、xl。例如org-md-pp 标记为original frame, midium sized, profile picture。和4.3-sm-gp 为4:3 frame, small sized, galery picture。
@EmreBolat Bootstrap 的命名约定确保只有 3 个断点。如果您想添加更多尺寸，您需要在命名约定方面变得非常有创意。固定大小的命名是有意义的，它们易于阅读且可扩展。
我认为@Narxx 方式对我来说更有意义，但我会选择-400w 风格。这样您就不必担心必须在 UI 中包含的新维度；你当然需要调整大小。无论如何，请确保在文件名中使用描述性名称（例如横向、细节、正方形等）不会影响 SEO。

【解决方案1】：

我们已经解决了以下解决方案：

最后我们得到了一个包含以下名称的列表：

【讨论】：

【解决方案2】：

我的建议是这样的：

考虑系统中所有不同的比率，例如：

给每个人一个名字，比如：

然后使用名称作为每个图像不同尺寸的前缀：

landscape_300 将生成一个 3x4 比例的图像，300 像素宽。

Square_96 将产生一个 96px x 96px 的图像，依此类推...

【讨论】：