共计 1526 个字符，预计需要花费 4 分钟才能阅读完成。
存储为 web 所用格式
互联网几乎是当今最大的艺术、图形和相片分享平台之一，因此掌握一些保存为网页格式的基础知识就非常重要了。实际上，保存为网页格式是一项平衡艺术——你必须在图片品质和介质的文件尺寸之间做好平衡，以便满足你的个人需求。
在速度相对重要的地方（如迅速地加载网站），你可能需要牺牲一些图片品质。而在品质重要的地方，则需要牺牲一点速度。这堂课程的目的就是向你介绍一些方法，在这两个因素之间寻求平衡，与此同时保留非常好的图像品质。
无损 vs 损耗数据
虽然存在有非常多的图片格式（仅举几例，如 jpeg，gif 和 png），但是依据压缩方法不同，所有的图片都能进一步归类为两大类别：无损和有损。无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现，而有损数据压缩的结果就是可能造成品质和信息的丢失。在平面设计领域最主流的无损媒介格式包括 gif，png，以及 tiff，而 jpeg 是最主流的有损压缩的图形格式。
如何用 photoshop 保存网页格式
ps 拥有非常好的方法来为网页优化图片。在 ps 中，选择文件 > 存储为 或者使用快捷键 ctrl alt shift s。一个新的对话框将会弹出，这里有所有为网页保存和优化图片的设置。
我会通过以下一些生活中的案例来演示如何使用对话框中的设置。
为网页存储图像
由于图片巨大的文件体积，它们更多是以有损压缩格式来保存的。甚至在拍照时，相对于数倍大小的 raw 格式，相机也倾向于用有损格式（如 jpeg）来保存图片。
jpeg 是日常中首选的图片格式，它是以它的创造者“联合图像专家小组”来命名的。jpeg 之所以能够成为标准，是因为它在压缩图像数据的同时可以保留高品质，并且在相关信息上能够接近无损图像的效果。
当你在保存图片的时候，有几种网页格式预设可供选择。对于一张图片，你应该考虑是使用 jpeg 低、jpeg 中，还是 jpeg 高。观察下面的对比图，（可以）发现案例中的图片经过压缩后并没有多大的品质损耗。相比起超过 250kb 的源文件，我们选择中等质量或者高等质量的压缩预设就能够得到一个大小不超过 30kb，并有合适品质的图片。
gif 图像
有些时候，你会被要求用无损格式来保存，以便最好地优化你正在创作的任何作品。这在网页设计中时常遇到，在布局上使用比普通图片更少的颜色。
gif，全称为“图像互换格式”，是一种只用到 256 个颜色调色板的图片格式，这让它成为不需要使用太广泛色域的网页图片的理想选择。gif 也能将单个像素设置成透明，不过这并不在这个教程的讨论范围之内。下面展示了一张(使用着 256 个颜色的)gif 图像和 jpeg 图像的对比照，它们拥有同样的大小. 正如你所见到的，无损 gif 图片能更好的接近源文件。
因为 gif 图像受到 256 色的限制，它本应该极少被用到图片中，但是他们恰好适合那些使用纯色或是有限色彩的图像。对于图片来说，通常来说不是使用 jpeg 有损压缩，就是 gif 无损格式。
高品质图像和无损 png
png，全称为“可移植网络图形”，是一种类似于 gif 的无损格式，只是它支持更为丰富的色彩（有时候也让它的体积变大），而且可以支持带透明图层的 alpha 通道，而非单一透明像素。
png 图像正在日渐取代 gif，主要是因为在支持更丰富的色彩方面，png 通常比 gif 的压缩效果要更好。虽然它还不想 gif 有广泛的支持，但是无疑它正朝着那个方向前进。
当图片必须保留完整品质在网络上进行传输的时候，png 是最佳的选择。比起用 jpeg 传输图片，（png）会令你得出更大的图片大小，但是有时候这是一个非常有必要的牺牲。当一个图片包含锐利的线条、以及必须保留清晰的文字时，png 通常是一个更好的选择，当然了，最终还是要由设计师来决定使用哪一种格式。