图像格式
PNG、WebP与JPEG如何选择：从透明边缘到交付体积
透明度、画面类型与兼容环境共同决定交付格式。
格式选择从像素关系开始，不从扩展名排行开始
照片包含连续色调、细小噪声和大量近似颜色，有损压缩可以删除人眼不容易察觉的差异，因此JPEG常能用较小体积保留自然观感。界面截图、图表和文字边缘则由突变线条构成，同样的处理会在边缘周围产生色块或光晕。文件内容不同，压缩误差的可见方式也不同。
MDN的图像格式指南把JPEG定位为静态照片的有损选择，把PNG用于需要精确再现或透明度的场景，并说明WebP兼具有损、无损、透明与动画能力。这个比较没有给出一个永远胜出的格式，因为接收环境、画面结构与后续用途会改变权衡。
所谓最佳体积必须带上视觉条件。一张WebP如果为了追求极小文件而破坏肤色渐变，并不优于稍大的JPEG；一张PNG完整保存相机噪声，却让普通网页首图大到难以加载，也没有发挥无损的实际价值。比较时应固定像素尺寸，在可接受观感下再看大小。
源文件与交付文件承担不同责任。源文件保留编辑空间、透明度和必要色彩信息，交付文件针对网页、邮件或客户工具优化。把交付JPEG重新打开继续设计，会让每次保存累积损失；把巨大源PNG直接当网页图，又把归档需求错误转嫁给访问者。
JPEG用连续色调换取体积，不保留透明
JPEG把图像分成块并转换频率信息，再舍弃部分细节。照片中的天空、皮肤和景深通常能容纳这种近似，锐利文字和一像素线条却会把误差暴露为振铃与脏边。设计者应在最终显示尺寸查看，而不是在高倍放大下寻找任何数学差异，也不能只看缩略图忽略真正可见的损伤。
质量参数不是跨软件统一的百分比。同样写着八十，不同编码器可能使用不同量化和色度处理，文件大小不能直接横比。团队若要稳定结果，应保存具体导出预设与代表样张，而不是在说明里只写一个数字，让每个人用自己的软件猜测。
JPEG没有alpha通道。需要透明的标志若存成JPEG，透明区域只能先与某种底色合成；以后换背景就会留下实色矩形或边缘污染。白底商品照片本来就不需要透明时，JPEG仍可能合适，但这应是明确的版面决定，不是误以为背景能在另一端自动消失。
重复转存会继续量化已经受损的数据。客户从社交平台下载JPEG、改字后再次上传，块状痕迹会逐轮增加。正确流程是回到可编辑源重新输出；若源文件确实遗失，至少避免再经过多个聊天预览和在线转换器，并把这次恢复标为受限版本。
PNG保留像素精度，也保留透明边缘的责任
W3C的PNG规范定义无损压缩，并支持灰度、真彩、索引色以及可选alpha，通道深度可到十六位。无损意味着解码后能恢复编码的样本，不代表任何导出过程都没有改变图像；如果保存前已经缩放、转色或与背景合成，PNG只会忠实保存处理后的结果。
PNG适合截图、线稿、图标和需要透明的合成素材，因为这些内容重视精确边缘。照片也能保存成PNG，但丰富噪声难以压缩，体积往往远大于合理质量的有损格式。将“无损”理解为“网页品质最高”，会忽略加载时间、内存和移动网络对用户的实际成本。
索引PNG可以用调色板降低颜色较少图形的体积，但复杂渐变可能发生色带。真彩PNG保留更多颜色，文件也更大。选择前要看图像实际颜色结构，而不是把所有透明图片一律输出成同一预设。简单图标与半透明摄影合成虽然都有alpha，所需编码条件并不相同。
十六位通道适合某些编辑与高动态范围中间流程，通用网页显示却未必需要把这份精度全部交付。若页面最终以标准动态范围展示，受控转换到合适位深通常更有效。保留高位深源文件，再为发布生成八位版本，比让浏览器替团队临场解释更可控。
透明像素的颜色决定换底后的光圈
alpha只描述像素覆盖程度，不会自动抹去RGB颜色。PNG采用非预乘透明表示，颜色样本与alpha分开保存；规范还要求完全透明像素的颜色信息可以保留。一个看不见的透明像素仍可能携带白色或蓝色，后续缩放与滤镜采样时，这些颜色会进入可见边缘。
白边常源于素材在白底上完成抗锯齿，随后又把白色设为透明。边缘半透明像素已经混入白色，放到深色背景自然发亮。简单扩大选区或加深阴影不能恢复原始前景颜色；更可靠的办法是在透明环境重新生成边缘，或用正确的去底色处理消除原背景贡献。
预乘alpha流程会先把颜色乘以透明度，适合某些合成计算，却要求读写双方对表示方式一致。若一端把非预乘数据当成预乘，边缘可能变暗；反向误读则可能发白。交付给视频、三维或游戏工具时，应确认对方对直通与预乘的要求，而不是只写“透明PNG”。
验证应使用真实背景组合。品牌图标若会出现在浅色、深色和渐变卡片上，就在这些底色查看一倍与高密度尺寸；只在棋盘格上检查无法代表实际合成。边缘异常若只在缩放后出现，还要比较浏览器缩放与源文件重采样，确定问题发生在导出还是显示阶段。
WebP把多种编码装进同一格式，模式仍需明确
WebP既支持有损也支持无损，并能携带透明度。相同扩展名因此可能代表完全不同的压缩行为。设计者只告诉接收者“这是WebP”，不能说明细节是否被近似、透明边缘是否无损，或文件是否包含动画；导出记录应至少保留模式和用途。
Google的无损WebP规范要求解码器精确重建像素值，包括完全透明像素的颜色，并通过空间预测、颜色变换、字典引用和颜色缓存压缩重复关系。这个机制对平面图形和截图有效，但压缩收益取决于图像结构，不会让任意照片都变得极小。
有损WebP适合允许视觉近似的照片，也可保留alpha，这使它能处理传统JPEG无法覆盖的透明摄影素材。然而透明与颜色可能采用不同编码条件，仍需在真实背景和目标尺寸查看。体积减少如果伴随头发边缘闪烁、肤色块状或细字发虚，就已经超出该版位的可接受边界。
现代浏览器广泛支持WebP，不代表所有邮件客户端、文档软件、资产系统和客户后台都能正确读取。网页可用picture元素提供现代格式与后备来源，让浏览器选择可用版本；离线交付则应依据接收工具提供PNG或JPEG副本，而不是让客户临时转换。
像素尺寸通常比压缩率更早决定浪费
四千像素宽的照片若只在三百像素卡片里显示，浏览器仍需下载并解码全部数据，再把它缩小。即使编码效率很好，源像素过多仍会浪费带宽和内存。输出前应从版位的CSS尺寸、可能的高密度屏倍率与裁切比例反推所需像素。
高密度屏不等于无限增加分辨率。两倍资源常能覆盖典型细节，继续扩大要看图像本身与版位重要性。模糊背景没有必要按标志线稿的精度准备，远景照片也未必能从更多像素得到可见收益。尺寸策略应按内容频率和观看距离调整。
响应式页面还会在不同宽度选择不同资源。桌面横幅、平板方图和手机竖图若只共用一张超宽图片，移动端不但下载多余区域，自动中央裁切还可能删除主体。为关键构图准备不同裁切，比用单一巨大文件覆盖所有设备更节省，也更能维持叙事。
尺寸比较必须保持视觉任务相同。把一张大PNG与一张小JPEG直接比体积，只能证明像素数量不同；把PNG截图与JPEG照片比较，也无法说明编码优劣。有效测试使用相同源图、相同显示尺寸和相近可接受观感，再记录各格式在真实页面的结果。
色彩元数据决定数值由谁解释
PNG可以通过iCCP、sRGB、cICP以及色度与伽马信息描述颜色。W3C规范规定这些颜色空间信息存在优先关系，解码器应按更高优先级解释，而不是把互相冲突的标记混在一起。导出工具若写入矛盾元数据，不同查看软件可能选择不同信息，于是同一文件出现偏色。
没有颜色标记的图像属于设备依赖数据，查看软件只能采用默认假设。常见环境可能把它当作sRGB，看起来暂时正常；换到广色域显示器或另一应用后，默认解释变化，问题才暴露。面向通用网页时，转换到明确的sRGB并嵌入一致信息，比删除所有配置更稳妥。
元数据不是越多越好。相机位置、拍摄设备、缩略图和编辑记录可能增加体积或暴露隐私；颜色配置与方向信息却可能直接影响显示。是否移除应按字段作用决定，不能用“一键清理”当作普遍优化。档案和新闻用途还可能需要保留来源信息，发布副本与原始档案应分开。
比较偏色时需要确认两端打开的是原文件，而不是平台转换预览。随后检查色彩空间、查看软件和显示器模式。若转换前后像素与配置都改变，单凭肉眼无法知道是哪一步造成差异。保留源文件，并分别保存格式转换和显示设置的测试结果，能让原因更容易追踪。
网页回退解决能力差异，不等于重复下载所有版本
HTML的picture元素可以按格式与媒体条件提供多个来源，最后的img承担后备。支持现代格式的浏览器选择WebP，不支持时使用PNG或JPEG；正常实现不会把所有候选都下载一遍。它让网站同时照顾效率与兼容，而不必把最保守格式强加给每位访问者。
后备图必须表达相同内容。若WebP版本更新了产品，JPEG后备仍是旧照片，格式选择会意外变成内容版本选择。生成多格式资源时应从同一批准源自动或受控导出，并在页面检查每条候选路径，而不是分别手工维护互不关联的文件。
格式协商也不能弥补错误服务器设置。文件扩展名、MIME类型与实际编码需要一致，否则浏览器或中间缓存可能拒绝、误判或下载。第三方平台若会重新编码，还要验证上传后实际返回的格式与颜色，而不是只检查本地文件。
离线客户交付没有浏览器选择机制。设计者应提供对方工具能直接使用的版本，并说明哪份用于网页、哪份保留透明、哪份可供旧文档系统读取。多给几个文件只有在角色清楚时才增加兼容；一堆同名不同扩展名会把判断成本推给接收者。
项目规则应由可复现样张建立
团队可以为照片主图、透明图标、界面截图和归档源稿建立默认格式，但规则应来自实际页面样张。选择一张含肤色与渐变的照片、一张有细字的截图和一张半透明边缘素材，在目标设备比较后保存预设，比引用抽象压缩排行榜更可靠。
默认值还需要例外条件。照片通常可用有损格式，带关键文字的摄影合成可能需要更高质量；图标通常适合无损，复杂半透明纹理的体积却可能需要重新设计。规则写出触发例外的画面特征，设计者才能在新项目中作判断，而不是机械套用扩展名。
验收结果要覆盖加载与观看。页面在移动网络是否及时显示、透明边缘在深浅背景是否干净、颜色在受控查看软件是否一致、客户工具是否能打开，分别检验不同机制。只通过其中一项不能外推其余项，文件小也不代表兼容，能打开也不代表视觉正确。
Nerwo多设备交付强调源文件与发布副本分离。格式不是作品身份，而是为某个渠道准备的编码选择。只要保留可重新导出的主文件、明确版位和接收环境，团队便能在技术变化后生成新格式，而不必让今天的压缩决定永久品质。
客户交付要把格式角色说清，而不是只多给文件
客户收到logo.png、logo.webp和logo.jpg时，未必知道哪一份保留透明、哪一份适合文档。若随手挑选JPEG放到深色背景，出现白底不是品牌文件失效，而是交付没有说明合成条件。文件数量增加只有在每份用途明确时才提高兼容。
透明标志可提供PNG作为通用编辑与文档版本，网页由网站流程生成WebP，确实需要固定白底时再输出JPEG。这里的安排来自角色，不是格式地位。客户若使用不支持WebP的旧工具，直接取得PNG比临时在线转换更能保护边缘和色彩。
交付说明还要注明像素尺寸与放大边界。位图标志在原尺寸清晰，超出范围仍会模糊；需要任意缩放时，应另行提供经过确认的矢量源。把PNG称为高清不能消除像素限制，也不能让截图成为印刷母版。
长期归档保留制作源、批准样张与导出规则，发布目录只放当前渠道使用的文件。这样格式更新时从源重新生成，不会从旧JPEG推导新WebP；客户也不会把内部高位深素材误当作可直接上传的网页资产。