樱花图片使用教程-下载命名裁剪与格式转换步骤

操作顺序总览

先确定用途，再下载，最后按目标尺寸和格式处理。顺序反过来做，往往要重新裁一次图。下面三条线分别对应下载命名、裁剪尺寸与格式转换，可以按需跳转。

下载前先在推荐资源里核对条目的文件格式与许可状态，避免下完才发现尺寸或用途不匹配。命名规则统一后，后续替换和回查会省很多时间。

第一步：核对条目字段

在条目卡上确认文件格式、画面内容与许可状态三项。用途偏商用或对外投放时，先到许可说明确认范围，再决定是否下载。

结果检查：条目字段与你的用途一致，无待确认项。
第二步：按用途选择尺寸版本

页面配图选长边约 1600px 的版本即可；印刷或大幅物料再取更高分辨率。同一张图不要同时下载多个尺寸版本，容易在后期混淆。

结果检查：下载文件的长边像素与投放位置的倍数关系合理。
第三步：统一命名规则

推荐用「分类-主体-尺寸-版本」的写法，例如 bloom-branch-1600-v1.jpg 。分类名与站内分类保持一致，回查时能直接对应到分类页。

结果检查：文件名能看出分类、主体与尺寸，不依赖打开文件辨认。
第四步：归档到分类目录

按花期、场景、构图、色调、用途建子目录存放，与资源分类的层级保持一致。同一批物料用的图放在同一目录下，交付时整包给出。

结果检查：目录结构与站内分类一一对应，能找到任意一张图的来源分类。

樱花图片的主体通常是花枝或花簇，裁剪时最容易切掉的就是枝条走向和留白。先定比例再定主体位置，比反复微调更快。

第一步：确定目标比例

横幅配图用 16:9 或 3:1，方图用 1:1，竖版海报用 3:4。比例确定后再裁，避免裁完发现与版位不符。

结果检查：裁剪框比例与版位容器比例一致。
第二步：锁定主体位置

把花枝或花簇放在三分线交点附近，保留一侧留白给文字。枝条走向朝内时，留白放在走向的反方向，画面更稳。

结果检查：主体完整，枝条两端没有被切在半途。
第三步：导出并核对尺寸

按目标尺寸的整数倍导出，例如 2 倍图按 3200px 长边导出，适配高分屏。导出后打开检查边缘是否有压缩产生的锯齿。

结果检查：导出尺寸为版位尺寸的 1 倍或 2 倍，边缘干净。

网页用图优先转成 webp，体积通常比 jpg 小，画面细节保留得也不错。需要兼容旧环境时再保留一份 jpg 作为回退，不要只留一种格式。

第一步：按投放环境选格式

网页与移动端配图用 webp；需要给外部渠道或印刷使用时另存 jpg 或 png。带透明背景的图形元素用 png，照片类画面不要用 png。

结果检查：每种投放环境都有对应格式的文件，命名后缀与格式一致。
第二步：压缩到合理体积

webp 质量参数从 80 起调，观察花瓣渐变处是否出现色块。首屏大图控制在 200KB 以内，正文配图控制在 120KB 以内，是比较好落地的参考线。

结果检查：压缩后体积达标，放大到 100% 观察无可见色带。
第三步：回填页面并核对显示

替换页面图片时同步更新宽高属性，写法与站内现有图片保持一致，减少布局抖动。替换后刷新页面确认比例没有变形。

结果检查：页面图片比例正确，宽高属性与实际文件一致。

下面这些情况在取图和用图时出现得比较多，先按结论排查，多数问题不用重新下载。

下载后打开发现图片比例和条目缩略图不一样，是正常的吗？

正常。缩略图为了列表排布统一做了裁切，实际文件保留的是原始构图。判断画面内容请看条目说明，不要只看缩略图比例。

裁剪后花枝被切断了，怎么补救？

先回到原图重新裁，不要在被裁过的图上继续裁。把裁剪框整体向留白一侧平移，让枝条两端都落在框内，再微调比例。

转成 webp 后页面显示不出来，是什么原因？

多数是文件后缀与实际格式不一致，或服务端没有正确返回图片类型。确认文件后缀为 .webp，并检查部署环境是否识别该格式。

同一张图用在多个版位，需要分别处理吗？

需要。不同版位比例不同，分别裁剪并单独命名，避免用同一张图拉伸适配导致主体变形。命名里带上版位标识更好管理。

图片放进页面后加载很慢，先查哪里？

先看单张图的体积和尺寸是否超出实际显示需要。首屏图不要设懒加载，其余图片设置懒加载并写好宽高属性，能明显改善加载表现。

处理步骤解决的是画面能不能用得好，许可说明解决的是能不能这样用。对外投放、商用物料或需要二次修改的场景，建议在下载前先看许可说明，确认使用范围与需要自行核对的事项，避免做完物料再返工。

教程中的尺寸与体积参考线是按常见投放场景给出的经验值，实际以你的版位要求为准。分类判断依据可回到资源分类查阅。