# 如何把多张图片排列成一张图

照片索引、前后对比，或一串截图，都可以合成一个文件。先确定顺序，再选每张图的框形，最后决定能不能为了填满框而裁掉边缘。

[打开Image Layout](https://httcup.github.io/tools/image-layout/): Put your pictures together. Keep them on your machine.

最后更新 2026年10月13日

## 先排好顺序

打开[图片布局工具](https://httcup.github.io/tools/image-layout/)，选择图片，把缩略图排成需要的顺序。可以拖动，也可以用箭头按钮操作，方便键盘使用。在分配空间前，先删除不需要的图片。

**网格**适合照片索引，也适合需要在一屏内展示的图片集合。列数决定每行放多少张图。**横向长条**适合并排对比。**纵向长条**适合按从上到下的顺序阅读截图。

预设提供方形格子、照片索引、横向或纵向长条、竖形格子，以及没有间距的网格。先选一个，再调整宽度和留白。切换预设会保留文件名和每张图片的取景。如果已经缩放或移动过图片，可以用 **Reset all frames** 恢复初始适配。成品形状还取决于图片数量。方形格子不代表最后一定得到方形图片。

![四张图片用竖向拼贴预设排列。一个图片框已选中，可以看到缩放和位置控件。](https://httcup.github.io/screens/arrange-images/layout.webp)

预览和导出使用相同的位置与裁切。调整列数或间距，就能看到图片会放在哪里。选中的图片框可以单独移动和缩放。

## 筛选照片、比较前后，或展示步骤

**筛选一组照片。**从照片索引预设开始，用 100% 缩放保留完整图片。选择合适的列数，让整组照片看得清，又不至于把每张脸缩得太小。照片集合可以导出为 JPEG，再按正常大小打开检查。另记一份原始文件名。这个工具只合并图片，不会在格子里添加说明或文件名。

**前后对比。**选择横向长条和 Keep original shapes，把较早的图片放在前面。如果需要比较大小，两侧不要用不同的缩放比例。客服工单或组装说明适合用纵向长条，让截图按阅读顺序排列。文字多的图片保存为 PNG，并检查成品中的小字是否清楚。长序列达到画布限制时，分成几张图。

## 格子形状也决定怎么裁切

方形网格能让整组图片看起来整齐，但竖向照片和横向截图都想填满方格，就不能都保留完整。有两种处理方式，都不会把图片拉变形。

在 100% 缩放时，**Fit whole image** 会缩放图片，直到所有边缘都放进格子。剩余空间显示背景。截图、图表和边缘内容重要的照片适合这个选项。

**Fill box (crop edges)** 会缩放到填满格子，初始裁切以中心为基准，去掉溢出的部分。如果整齐的网格比保留每条边更重要，可以选它。检查有没有裁掉人脸或说明文字。

长条布局中的 **Keep original shapes (strips)** 按每张图的原始比例设置格子。横向长条统一高度，纵向长条统一宽度。在 100% 缩放下，这样可以组合不同比例的图片，不裁切，也不在格子内部增加留白。

## 在框内移动图片

填满格子可能会裁掉你想展示的内容。在预览中选中图片，或从 **Frame** 中选择。拖动调整取景，也可以用 **Horizontal position** 和 **Vertical position** 调整位置，再调 **Zoom**。这些控件也支持键盘操作。

图片与框在某个方向上的尺寸不同时，才会出现该方向的位置控件。图片较小时，可以在空余空间内移动，同时保持完整。图片较大时，可以移动来决定显示哪一部分。缩小图片后，也能调整位置，不必固定在中心。

每张图片都有独立的取景。移动缩略图顺序，不会改变它或邻图的取景。**Reset this frame** 把选中图片恢复到初始位置和 100% 缩放。**Reset all frames** 恢复所有图片。之后再检查整体布局。

所选适配方式以 100% 缩放为起点。缩放范围是 25% 到 400%。低于 100% 时，图片在格子内缩小，背景露得更多。放大会扩大图片，也可能裁掉边缘。放大不能增加原本没有的细节，小图放得太大可能变模糊。预览和下载采用相同的取景，但清晰度要检查成品。

## 选择成品尺寸

宽度控件设置整张成品的宽度，包含外边距和图片间距。网格列数越多，同样的总宽度就会分成越小的格子。如果八张照片需要仔细查看，输出宽度太小会让每张照片都太小，无论原图有多大。

导出读取原图，不会放大预览用的小副本。这样可以利用原图细节，但小原图放大后仍不能凭空增加细节。下载后按正常大小查看，再判断是否足够清晰。

画布限制是**任一边不超过 8192 像素**，且**总像素不超过 3200 万**。二十张竖长截图排成纵向长条时，宽度还不大，高度就可能超限。页面提示成品太大时，降低宽度、增加网格列数，或分成几个布局。

## 间距、外边距和背景各有作用

**Gap** 是相邻图片之间的空隙。**Outer margin** 是图片与成品外边缘之间的空间。小间距能让独立截图更容易辨认，外边距则让第一张和最后一张图片不贴边。

背景色填充这些空隙，以及完整图片周围的留白。如果成品需要放在其他背景上，用 PNG 或 WebP 并开启透明。JPEG 没有透明通道，背景始终是纯色。

## 检查裁切后再选格式

**PNG** 适合文字、图表、截图，以及需要清晰边缘或透明背景的布局。它保留最终画布的像素，但照片拼贴的文件可能很大。

**JPEG** 适合照片，也适合要求 JPG 的表单。质量设置用细节换取较小文件。布局含截图时，检查小字和细边缘。透明区域会填上所选背景色。

**WebP** 可以在保留透明的同时得到较小文件。质量设置同样用细节换体积。页面会检查浏览器能否写出 WebP，不能时会禁用这个选项。

生成图片，再下载成品。如果导出时间太长，Cancel 会在两张图片之间停止。浏览器可能需要先完成当前正在解码的图片。

## 保留了什么，改变了什么

成品是一张静态图片。动画 GIF、WebP 或 AVIF 只提供浏览器解码出的第一帧。如果想把 GIF 各帧排成照片索引，先用 [GIF 拆帧工具](https://httcup.github.io/tools/split-gif/)，再排列得到的静态图片。

浏览器画布生成的是 8 位 SDR 图像。调整尺寸会改变像素，半透明颜色可能偏移，广色域颜色或 HDR 也可能改变。原文件中的 EXIF、GPS、相机和日期标签不会复制到成品。如果还需要相机或其他应用导出的原始文件，请同时保留原件。

布局在你的设备上完成，不会覆盖原文件。工具不上传图片，也不从远程地址导入图片。页面加载后断网，文件选择、预览和导出仍能工作。你可以用自己的图片验证。