当一张图片需要以网页的格式存储时，为了保证图片看起来清晰不卡顿，总是要考虑它的质量和大小。本教程将教你什么是你需要知道的“网页存储格式”。
以web使用的格式存储。
互联网几乎是分享艺术、图形和照片的最大平台之一，所以掌握一些保存为网页格式的基础知识非常重要。事实上，保存为网页格式是一种平衡的艺术——你必须平衡图片的质量和介质的文件大小，以满足你的个人需求。
在速度相对重要的地方(比如快速加载一个网站)，你可能需要牺牲一些画质。在质量很重要的地方，你需要牺牲一点速度。本课程的目的是向您介绍一些在这两个因素之间找到平衡的方法，同时保留非常好的图像质量。
无损与有损数据
虽然图像格式有很多种(比如jpeg、gif、png等等)，但是所有的图像都可以根据压缩方式的不同进一步分为两类:无损和有损。无损数据压缩确保图像可以在没有任何质量和信息损失的情况下被再现，而有损数据压缩的结果可能导致质量和信息的损失。在平面设计领域，最主流的无损媒体格式有GIF、PNG、TIFF，JPEG是最主流的无损压缩图形格式。
如何用PHOTOSHOP保存网页格式
PS有一个非常好的方法可以为网页优化图片。在ps中选择文件>另存为web格式或者使用快捷键ctrl+alt+shift+s，会弹出一个新的对话框，里面有保存和优化网页图片的所有设置。
我将通过以下生活中的案例演示如何使用对话框中的设置。
为网页存储图像
由于图片文件巨大，大多以有损压缩格式保存。即使在拍照时，相机也倾向于使用有损格式(如JPEG)来保存图片，而不是几倍大小的RAW格式。
JPEG是日常生活中首选的图像格式，因其创建者“联合图像专家组”而得名。Jpeg之所以能成为标准，是因为它能在压缩图像数据的同时保留高质量，在相关信息上能接近无损图像的效果。
保存图片时，有几种网页格式预设可供选择。对于一张图片，你要考虑是用JPEG低，JPEG中还是JPEG高。看下面的对比图可以发现，案例中的画面在压缩后并没有损失太多的质量。相对于250KB以上的源文件，选择中等质量或高质量的压缩预设，我们可以得到一张大小在30KB以内、质量合适的图片。
GIF图像
有时，您会被要求以无损格式保存它，以便最佳地优化您正在创建的任何作品。这是网页设计中经常遇到的情况，网页设计在布局上使用的颜色比普通图片要少。
GIF，全称“图像交换格式”，是一种仅使用256色调色板的图片格式，对于不需要使用太宽色域的网页图片来说，是一种理想的选择。GIF也可以使单个像素透明，但这超出了本教程的范围。下面显示了GIF图像(256色)和JPEG图像之间的比较，这两种图像具有相同的大小。如您所见，无损GIF图像更接近源文件。
因为GIF图片受限于256色，所以应该很少在图片中使用，只是适合那些使用纯色或者有限色的图片。一般来说，对于图片，要么用JPEG有损压缩，要么用GIF无损格式。
高质量图像和无损PNG
PNG被称为“便携式网络图形”，是一种类似于GIF的无损格式，只是它支持更丰富的颜色(有时会使其更大)，并且它可以支持具有透明层而不是单个透明像素的Alpha通道。
Png图像正逐渐取代gif，主要是因为在支持更丰富的颜色方面，PNG通常比GIF有更好的压缩效果。虽然它不希望GIF得到广泛的支持，但它无疑正在朝着那个方向前进。
当图像必须以完整的质量在网络上传输时，PNG是最佳选择。相比JPEG，(PNG)会让你获得更大的图片尺寸，但有时候这是必要的牺牲。当图片包含清晰的线条并且必须保留清晰的文本时，PNG通常是更好的选择。当然，最终还是要由设计师来决定使用哪种格式。
