图片是网页设计中不可缺少的元素，它于文字和色彩并称为网页三大语言。在网页设计中，选择适合的图片格式不但可以让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。网页上的图片例用主要与图片的格式和风格有关。
以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：
网页设计所需要的图片是需要上传到网站的，所以要弄清楚什么样的图片更适合Web页面非常必要。
另外 GIF 同时还支持透明背景、以及动画图档格式，并且几乎不用担心支持性的问题：几乎 100％ 的浏览器都支持它。
由于 JPEG 与 GIF 有着如此不同的特性，因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档。
当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条时，选择 JPEG 可以得到最好的输出结果，像是照片就是最好的例子：
虽然 PNG 不支持动画，但是 PNG-24 支持了Alpha 透明效果，这可以说是 PNG-24 最令人眼睛一亮的地方了。也就是说使用 PNG 输出图档时，可以有效的支持不同的透明度效果了。这对网页设计师来说无疑是一个好消息，像这张图片其实是使用了三张 PNG-24 的图片在网页中排版出来的效果：
以设计师最常用的 Photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：
网页设计所需要的图片是需要上传到网站的，所以要弄清楚什么样的图片更适合Web页面非常必要。
JPEG格式图片
JPEG格式，也就是我们最为常见的JPG格式。JPEG是一种很典型的使用破坏性压缩图像的的图片格式，意思就是每进行一次JPEG格式的存档动作，图片的内容都会遭到破坏，优点是在我们的肉眼是看不出来的情况下有效的降低图片文件。这样的特性使和JPEG格式的图片适合存像素色彩丰富的图片，而不适合用来储存线条图、图标或文字等等有清晰边缘的图片。
GIF格式图片
Gif 在许多特性与表现上都与 JPEG 有着相对的特性。GIF 使用无损压缩格式（Lossless Compression），但却限制了色彩表现能力、能够有效地节省档案尺寸。GIF 只拥有 8 位的颜色深度信息，所谓的 8 位是指 2 的 8 次方也就是 256 色，当你的图片中出现的色彩在 256 色以内时，使用 GIF 可以得到相当好的输出质量、同时兼顾了档案大小。因此 GIF 非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出。另外 GIF 同时还支持透明背景、以及动画图档格式，并且几乎不用担心支持性的问题：几乎 100％ 的浏览器都支持它。
由于 JPEG 与 GIF 有着如此不同的特性，因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档。
当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条时，选择 JPEG 可以得到最好的输出结果，像是照片就是最好的例子：
当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时，GIF 是很完美的选择，档案小、画质又精美。
PNG格式图片
PNG格式图片是一种体积小，无损压缩的图片存储格式。PNG格式与GIF图像类似，采用8位调色板将RGB彩色图像转换为索引彩色图像。PNG格式图像在浏览器上采用流式浏览，允许连续读出和写入图像数据。PNG格式图像可以使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘，这是PNG格式图像特有的功能。虽然 PNG 不支持动画，但是 PNG-24 支持了Alpha 透明效果，这可以说是 PNG-24 最令人眼睛一亮的地方了。也就是说使用 PNG 输出图档时，可以有效的支持不同的透明度效果了。这对网页设计师来说无疑是一个好消息，像这张图片其实是使用了三张 PNG-24 的图片在网页中排版出来的效果：
小结
大部分的情况下，设计师不仅要根据网页和图片的需求来选择最适合的格式，还需要根据用户浏览器的支持度情况来选择图片格式。这需要具体情况具体分析，一般层次丰富且颜色较多的图像我们会采用JPG存储。颜色简单对比强烈的图像则采用PNG格式存储。当然，并不是所有的图片都适用这个原则，实际运用中还有一些特殊情况，如有些图像虽然色彩层次丰富，但图片尺寸很小，如果图像上包含的颜色数量是有限时，我们也可以尝试采用PNG格式进行存储。有些使用矢量工具绘制的图像，由于绘制时采用了较多的滤镜特效，所以形成了丰富的色彩层次，这种情况就需要采用JPG格式进行存储了。另外，用于页面结构的基本视觉元素，如网页中背景、按钮、导航的背景等尽量用PNG格式进行存储，这样可以更好的保证设计品质。