如何选择图片素材的格式

图片素材的格式

1. 图片素材格式的选择

在PS中切片后可以将图片素材以多种文件格式进行保存，制作网页常使用的图片格式有 .jpg 、.gif 、.png 等。

而决定图片采用哪种格式的主要因素是图片体积的大小，在保证图片原有效果不失真的情况下，图片的体积应越小越好，这样才能保证你的网页能被最快的打开。

在这些图片格式中，没有哪一种能保证图片是最小最好的，在不同的情况下要相应的选择不同的格式：

1）存储面积较小或色彩不丰富的图片，应采用gif格式

如下面这些图片素材，在相同的品质下，采用gif格式的体积要比jpg要小：

gif格式的设置：在切片保存时，选择要设置图片格式的区域后，在界面的右侧选择格式。

在此处可查看保存后图片的大小

2）存储面积较大或色彩丰富的图片，应采用jpg（也称为jpeg）格式

如下面这些图片素材，在相同的品质下，采用jpg格式的体积要比较小，并且色彩丰富的图片采用gif格式有可能导致图片失真：

jpg格式的设置：同样在切片保存后设置格式，但jpg除了格式设置外，还有图像品质的设置（如下图右侧）

“品质”的数值越大，图像的画质越好，但体积也越大，推荐将“品质”设置在70至80之间。

3）在无法判断使用哪种格式时，可通过保存界面的“双联”或“四联”进行比较

点击保存界面的'“四联”，可为同一张图片设置不同的保存格式进行对比，哪种格式保存的体积小则采用哪种。

在此处设置图像的品质

2. 透明图片样式的使用

在网页图片的使用中，可采用透明或半透明的图片，支持透明效果的有.gif和.png这两种格式，但这两种格式的透明效果并不一样。

1）.gif格式的透明效果

.gif格式的图片可以将图像中指定的颜色设置为透明（即完全不显示），效果如：原本白色的背景被设置为透明放入到网页中，配合不同的背景查看效果

注意：使用gif设置的透明图片，图像边缘过渡比较生硬，在融入背景时效果不是很好。

设置方法：

在图像保存的界面，确保gif的设置中“透明度”被选择

在下方颜色表中选择要设置为透明的颜色，如背景的白色，再点击下图所示的按钮设为透明

选择背景的白色

设置为透明