@阿随向前冲 ：当需要把图片存储为网页所用格式时，为了确保图片无卡顿地清晰显现，考虑它的品质和大小总是很必要的。这个教程就会教给你关于“存储为web所用格式”你需要知道的知识。

在这儿阅读相关的文章： 《10个非常重要的图片无损编辑技巧》  《让你的网站提速：图片优化网站推荐》 《网页设计中优化图片的6大技巧》

存储为web所用格式

互联网几乎是当今最大的艺术、图形和相片分享平台之一，因此掌握一些保存为网页格式的基础知识就非常重要了。实际上，保存为网页格式是一项平衡艺术——你必须在图片品质和介质的文件尺寸之间做好平衡，以便满足你的个人需求。

在速度相对重要的地方（如迅速地加载网站），你可能需要牺牲一些图片品质。而在品质重要的地方，则需要牺牲一点速度。这堂课程的目的就是向你介绍一些方法，在这两个因素之间寻求平衡，与此同时保留非常好的图像品质。

无损 vs 损耗数据

虽然存在有非常多的图片格式（仅举几例，如jpeg，gif和png），但是依据压缩方法不同，所有的图片都能进一步归类为两大类别：无损和有损。无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现，而有损数据压缩的结果就是可能造成品质和信息的丢失。在平面设计领域最主流的无损媒介格式包括GIF，PNG，以及TIFF，而JPEG是最主流的有损压缩的图形格式。

如何用PHOTOSHOP保存网页格式

PS拥有非常好的方法来为网页优化图片。在ps中，选择文件>存储为web格式或者使用快捷键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通常是一个更好的选择，当然了，最终还是要由设计师来决定使用哪一种格式。

原文地址：tutorial9 SDC番茄匠：@阿随向前冲 转载请注明优设网译文出处，谢谢各位小编: ）

================关于优设网================ "优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。 【特色推荐】 PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。 设计微博：拥有粉丝量60万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。 设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com ———————————————————– 想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？ 添加 优秀网页设计 微信号：【youshege】优设哥的全拼 您也可以通过扫描下方二维码快速添加：

优设 内容总监

复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。