为什么前端切图大多用长方形图？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1890 天前的主题，其中的信息可能已经有所发展或是发生改变。

我见过的网站或者项目，前端切图的时候基本都是用长方形的图片，有没有人能解释一下为什么要拼成长方形的图片？

从图片压缩的角度来说，越接近正方形的图片压缩效果越理想（这个我自己实验过的，16 张图排成 4*4 和 1*16 差别很大）。

长方形

图片

压缩

方形

14 条回复 • 2019-10-18 09:05:26 +08:00

siys

2019-10-17 17:46:25 +08:00

因为只要长和宽差了一点点他就不是正方形

MonoLogueChi

2019-10-17 17:52:45 +08:00 via Android

@siys 不是差一点的那种，是整个一长条

Leez088

2019-10-17 17:56:02 +08:00

可能图标坐标容易取吧

ShangAliyun

2019-10-17 17:57:35 +08:00

前端的更在乎黄金比例，不太在乎图片大小

b821025551b

2019-10-17 17:57:47 +08:00

因为左右两张图，百分比长度可能会导致撕裂

MonoLogueChi

2019-10-17 19:29:11 +08:00 via Android

@Leez088 这个有可能，但是排列规整的话正方形坐标应该也不难取吧

CallMeReznov

2019-10-17 19:35:30 +08:00

切长方形一行一行的只需要上下对齐
切正方形太小就得一行拼，载入不完全时会错误，体验不好，而且麻烦
所以，都是长条一行一行拼

我原来最早学 Dreamweaver 和 Fireworks 的时候就要切长条的，也没说为什么。

lamada

2019-10-17 19:57:58 +08:00 via iPhone

问的太宽泛了，另外也不差这点流量，内存占用也是一样的

rykka

2019-10-17 20:45:52 +08:00 via Android

切图考虑的是图片本身，跟图像压缩无关
需要优化图片下载有 Sprite 工具可用

MonoLogueChi

2019-10-17 22:01:52 +08:00 via Android

@rykka @lamada 我是做游戏的，对图片处理稍微有点强迫症，这种图片不是接近正方形，或者不是 4 的倍数都有点不能接受

rykka

2019-10-17 22:05:03 +08:00

@MonoLogueChi 那做 sprite 动画的时候，也是需要 sprite 工具的吧，不可能切出来的每幅动画都是正方形

ragnaroks

2019-10-17 22:12:19 +08:00

前端应该是走的路多了吧,
我以前用 unity 做游戏,很多工具也确实默认导出就是正方形,即使有很多留白.

MonoLogueChi

2019-10-17 22:34:24 +08:00 via Android

@rykka 对，是拿工具拼的

lamada

2019-10-18 09:05:26 +08:00 via iPhone

@MonoLogueChi 那确实可以理解，但除开 webgl(影响也不大)，强行切成正方形确实容易留白，这留白多的部分也是内存的浪费，pc 还好，移动端可能就比较在乎