案例长图在手机和桌面上可以表达同一个作品，但不一定要使用完全相同的文件。先决定读者要看整体还是细节，再区分缩放、分辨率、裁切和分段。只把桌面长图缩小，可能既让手机下载多余资源，又把作品里的文字缩到无法阅读。
先确定长图承担哪一种任务
有的长图用于展示网站整体视觉，有的用于解释页面结构，还有的承载需要读懂的界面细节。三种任务对手机的要求不同。整体预览可以缩略，具体判断需要足够清晰，文字信息则不宜只存在缩小的截图里。
假设一家企业用官网案例说明设计能力，访客最初只需知道风格和页面类型，详情阶段才需要看细节。可以将概览与细节展示分开安排。若把完整细节一开始全部发送，未必符合实际浏览顺序。
JVDS 的业务资料确认了官网设计与开发方向，现有案例素材也能用于讨论可见展示方式。但这些图片不自动证明某个客户项目的委托背景或效果。本篇的手机展示方法是设计与开发建议，不把展示长图改写成未经核验的客户成果。
先写出图像任务和不可损失的信息：主体构图、整体节奏、关键模块或具体操作说明。成功标志是设计、内容与开发对“必须看清什么”有同一份约定，而不是只说原图高清就够了。
缩小显示，与选择小文件是两件事
页面把图片显示得更窄，不意味着手机取得的文件也更小。MDN 的图片元素说明介绍了候选资源与显示尺寸提示的作用，浏览器可据相应信息选择资源。开发应核对实际选取，而不是只看手机截图里图片是否缩放。
如果桌面与手机构图相同，可以生成适合不同展示宽度的候选版本。候选不是越多越好，应结合网站模块的真实尺寸和维护能力制定。对于很窄的小卡片与宽屏详情，可能需要不同用途文件，而不仅是同一套版本。
手机屏幕像素密度也会影响清晰需求，因此不能简单规定“手机只用最小文件”。合理目标是足以支持当前显示，同时避免明显超出用途的资源。测试时看实际下载结果与细节表现，不猜测浏览器一定选择哪一个候选。
如果后台没有生成多尺寸能力，就把它列入开发需求，或制定可维护的人工导出方式。不要写成网站已经自动完成。素材文件与页面引用要一起核对，否则生成了手机图却仍然引用桌面图，结果没有改变。
哪些内容适合裁切，哪些不能随便裁
摄影和主视觉通常可以重新构图，但网页截图中的布局关系可能是作品说明的一部分。若裁掉导航、页头或关键模块，访客对设计的理解就可能改变。裁切之前先标注不可删除区域。
桌面横幅直接放在手机里，主体可能变得过小。可以提供手机构图，但应明确这是同一内容的适配展示，不是声称原项目就有这个页面。若要展示真实项目响应式设计，应使用经过核对的真实移动端素材。相关操作可参阅《网页图片怎么做响应式？别再让手机加载一张3000px大图》。
长截图还可能适合按信息段落拆分。例如概览后分别展示页头、内容模块和交互区域，但每段应保留足以理解的上下文。切割不能只按固定高度，否则容易把一个模块截成两半，破坏作品的节奏与说明。
分段也会增加维护成本。更新时需要确认所有片段来自同一版本，避免概览图已换，局部仍是旧稿。若素材经常更新且缺少维护人，过度细分可能不如清楚的整体预览加少量重点图可靠。
小字看不清，优先补足信息而不是无限放大
网站案例截图里常有密集的小字号，手机等比例缩小后，文件再高清也可能难以正常阅读。先判断这些文字是否是本篇要传达的必要信息，如果是，就在正文中解释相关结构或判断，而不是让访客靠放大才能理解。
确实需要查看细节时，可以考虑明确的查看入口与合适的细节图。入口应告知用户会看到什么，并保持返回路径清楚。不要把可点击大图做得毫无提示，要求访客自己发现。
如果只希望表现整体视觉，不需要每个占位字都读清，则可根据整体效果控制资源质量。验收重点是层次、图片和关键部位没有明显失真，不必用原始设计稿的每一个像素作为网页缩略图标准。
重要的是把验收目标说清。内容负责人确认信息可理解，设计确认视觉与裁切，开发确认资源选择和操作，三项分别完成。任何一项只写“看起来还行”，都会把未解决的问题留到上线以后。
若采用图片查看层，应检查触屏手势和页面滚动能否区分。用户想滑动长图时，不能意外关闭窗口；退出查看时，也不能丢失正文阅读位置。这些是操作验收的例子，需要按实际实现测试，不是所有官网必须增加的功能。
有些作品长图同时用于文章、列表与详情页，这时最好维护一份用途对应关系。列表重在识别，正文重在解释，详情重在完整展示。三处都引用原图方便录入，却可能让每种场景都承担不合适的成本。
内容更新时，保留原始素材的受控存档与公开展示版本。前者用于以后重新导出，后者用于当前页面。不要为了减小网站文件，把唯一原稿覆盖掉；也不要把设计工程文件误当成公开图片上传。交接中应明确存放位置与负责人。
如果案例说明引用了某个具体模块，替换图片后还要检查文字是否继续对应。图片换成新的构图，而正文仍解释被裁掉的部分，会让信息断裂。更新验收需要一起看图、说明和查看入口，不能只核对文件是否上传成功。相关操作可参阅《官网图片怎么优化？不是压得越小越好：清晰度、加载速度、SEO 和无障碍要一起解决》。
确定规则后，先拿一篇含细字的长案例和一篇以视觉为主的案例试用。两者需求不同，有助于发现导出规则是否过于统一。实际通过的规则再推广到同类素材，避免为了便利把全部案例变成一种展示方式。
按浏览顺序安排加载与占位
手机长页的后续图像可以按使用位置安排加载，但首屏重要图不能为了统一规则而被延迟。页面出现时应先让读者理解案例内容，再按阅读过程展示后续细节。具体行为需通过实际页面检查。
长图或分段图都应提前保留合适空间，避免图片出现后把正在阅读的内容推开。多段图的间距与说明也要核对，确保顺序能够看懂。资源减少不能以阅读被打断为代价。
检查至少覆盖首次进入、向下滚动、查看细节和返回原位置。只在桌面拉到页尾看一眼，无法确认手机上是否需要反复等待或迷失位置。假设有一个大图查看层，还要核对关闭后能否继续原来的阅读。
保持可比较条件，记录实际使用的文件及展示状态。若改成多个版本，应确认手机没有同时下载全部版本；若分段，应检查每段均可加载。这里关注的是实际行为，不能只以目录里多了几份文件作为完成标志。
把手机图规则写进素材交接
每个使用位置可以登记：任务、桌面展示比例、手机展示比例、允许裁切的范围、不可删除信息、候选文件和更新责任。这样新案例录入时不用每次重新猜测。
对于同构图多尺寸，写明版本来自同一原稿；对于不同构图，写明焦点和适用位置；对于真实移动截图，写明对应作品与版本，避免与概念适配混淆。后台录入者应能根据位置选择，不依赖文件名里含糊的“最终版”。
验收时先看原稿与各版本是否一致，再看页面实际引用与手机表现。确认可读性后，检查是否仍有多余下载或等待。新图替换也要沿用规则，并复查相关位置，不能只在上传对话框内预览。
成功的交付不是所有设备都取得同一个大文件，而是同一个作品的信息在不同场景下仍然完整、清楚且可维护。文件只是实现方式，读者能否理解与继续浏览才是判断的终点。
常见问题
手机一定要单独做一套案例图吗？
不一定。构图相同且信息可读时，多尺寸版本可能足够。主体需要重排或必须展示真实手机设计时，才需要对应的不同素材。
能把桌面截图裁成长条手机图吗？
可以作为适配展示方案讨论，但要检查信息是否被删除，也不能把它当作真实项目移动端界面证据。需要真实效果时使用核对过的素材。
把长图切开就一定更快吗？
不能保证。还要看请求顺序、资源体积和显示安排。如果一开始全部下载，切开未必解决原来的问题，应在实际页面复测。
需要给所有细节加放大功能吗？
需看阅读任务。必要信息优先通过正文和重点图说明，只有细节查看确有价值时才增加操作，并核对提示、关闭和返回行为。
怎样确认手机取得了合适的版本？
由维护者检查实际请求文件，并在代表手机条件下看清晰度。仅看CSS缩放或导出文件夹，无法证明页面使用了预期资源。
链接复制成功
