图片宽高比与尺寸的基础｜不被裁切·不模糊的图片做法

图片被切掉，是因为比例不合

大多数社交平台和博客，会把发布的图片套进固定的框里显示。这时如果图片的宽高比和框的宽高比不同，就会为了配合框而切掉多出的部分。这就是裁切。

关键在于，被切掉的位置大多是“上下”或“左右”的边缘。也就是说，把竖长的图片放进横长的框，上下会消失；把横长的图片放进正方形的框，左右会消失。放在边缘的文字和标志会最先遭殃。

常用的宽高比与用途

实际工作中用到的比例并不多。掌握下面5种，大多数场合都能应付。

表中的1.91:1，是分享URL时出现的预览图常用的比例。个人名片制作之所以导出1200×630px的PNG，也是因为这个尺寸可以直接用于这一用途。无论贴到社交平台，还是做博客的题图，这个比例都很合适。

各服务的推荐尺寸可能会变，准确数值请查看官方帮助。不过比例本身不会有大变化，用上面5种比例制作，之后稍作调整就能应对。

放在哪里都不会被切的“安全区”思路

同一张图片要在多个地方使用时，无法只针对一种显示框来设计。这时有效的思路是，把信息集中在中央，即使被切也不受影响。

1. 1

   ①把最重要的元素放在中央

   脸、标志、标题文字都居中放置。把四角当作“会被切掉的装饰”，放进哪种框都不会出问题。

2. 2

   ②上下左右各留一成余白

   图片外围约10%的区域不放文字。仅此一点，就几乎能杜绝被裁成正方形时的事故。

3. 3

   ③裁成正方形确认一下

   横长的图片，看看把中央裁成正方形后意思是否还能看懂。在这里能成立，大多数框都能应付。

4. 4

   ④文字不要太小

   在列表显示中，图片会被缩小到几分之一。原尺寸能看清、缩小后却糊成一片的字号要避免。参考标准是图片高度的5%以上。

模糊的原因在于“放大”

图片是许多小方格（像素）的集合。缩小时只是丢掉信息，所以不会出问题；放大时却要造出原本没有的信息，所以一定会变软。模糊图片的原因几乎都是这种放大。

此外，多数智能手机和笔记本电脑都有高精细屏幕，在显示为100px的位置实际可以显示2倍即200px的内容。按与显示尺寸相同的像素数制作，在这类屏幕上就会显得模糊。按预定显示尺寸的2倍来做比较保险。

• 博客正文图片：做成横向1600px左右，显示控制在800px左右
• 社交平台头像：准备800×800px以上（显示为几十px到几百px）
• 缩略图：做成1280×720px（16:9）
• 链接卡片用：做成1200×630px（1.91:1）
• 如果可能拿去印刷，做成上述的2〜3倍

从制作到发布的流程

1. 1

   ①先定用途，再选比例

   先决定“在哪里用”。之后再改比例，一定会切掉某处或打乱版面。

2. 2

   ②做得比推荐尺寸大一些

   缩小不会劣化。犹豫时选大的，转作其他用途也方便。

3. 3

   ③把信息集中到中央完成

   外围留出一成，文字保证在图片高度的5%以上。使用像个人名片制作这样事先算好余白的模板也是一个办法。

4. 4

   ④转换成适合用途的格式

   以照片为主用JPEG或WebP，文字、标志或需要透明时用PNG。在图片格式转换工具中可以选择格式进行转换，JPEG和WebP还能调整画质。

5. 5

   ⑤确认转换后的文件大小

   转换工具会显示转换后的大小和减少的量。上传处有大小上限时，看过这个数值后再微调画质。

图片格式转换工具的处理全部在浏览器内完成，图片不会发送到服务器。处理未公开的资料或头像照片时也可以放心使用。

常见问题

宽高比是什么？

就是图片宽和高的比例。1200×630px约为1.91:1，1080×1080px为1:1。即使像素数不同，只要比例相同，就只是放大或缩小，内容不会被切掉。

图片只有上下被切掉，怎么办？

原因是用了比显示框更竖长的图片。按显示处的比例（多为1.91:1或16:9）重做最可靠。如果无法马上修改，仅仅把重要元素移到中央也能减少损失。

小图片放大后还能清晰吗？

基本上不能。放大是靠推测补上不存在的信息，所以轮廓会变软。如果还留着原始数据，重做最快；没有的话，改成按现有尺寸就能放下的版面，最终反而看起来更清晰。

手机拍的照片可以直接用吗？

分辨率足够，但比例多为4:3或3:4，直接用的话无法预料会切掉哪里。先按要用的框的比例裁切，再调整格式和大小后上传比较稳妥。