1.5 电商平台的主流格式
本节介绍电商中常用的主流格式及其特点，如下表所示。
提示：JPEG（或者说．jpg）是最常用的图片压缩格式，支持最高级别的压缩。对于显示要求比较高的图片来说，JPEG格式展示的图片效果较GIF和PNG有明显的优势。
GIF（.gif）的图片显示质量要比JPEG逊色很多，通常用作非常简单的图片展示，比如素材或者装饰性图案，GIF也可以用来制作动画。但GIF不适用于高清的图片。
PNG图片是比GIF更好的选择，因为PNG图片支持的色彩要比GIF多。此外，和JPEG一样，PNG反复保存也不会影响图片质量，而且对于小图来说，PNG占用的内存极小，PNG完美支持透明背景，所以一般LOGO或一般装饰性图案都会选择PNG格式。注意PNG-24图片比同样情况下的PNG-8版本的内存要大3倍以上，因此，要慎用PNG图片。
1.5.1 JPEG格式的优点与局限
下面介绍JPEG格式的图片的特点。
1 打开“素材\ch01\jpg路径.jpg”文件，因为这个素材是经过处理的，打开【路径】面板可以发现，JPEG格式既可以把路径保存下来，也可以使用路径，如下图所示。
2 按住【Ctrl】键单击【路径】缩览图就可以得到选区，如下图所示。
3 打开【图层】面板，选择【图层】→【新建】→【通过拷贝的图层】选项，就能直接把主体图抠出来，如下图所示。
抠出来的图是否可以直接保存为透明格式？
1 删除背景图层，选择【文件】→【储存为】选项，将抠出来的图保存到桌面上，保存类型选择【JPEG】格式，单击【保存】按钮，如下图所示。
提示：先不管图片的大小，重复操作依次将其保存为PNG和GIF格式，然后查看区别。
2 关闭原始素材文件，打开保存的三种格式的图片，可以看到PNG和GIF格式保存为透明底，JPEG格式没有保存为透明底，但它保存了工作路径，如下图所示。
提示：由此可以得出，JPEG格式是不支持透明底的，而PNG和GIF格式支持。
下面来看看三种格式在压缩方案上的区别。
1 在素材文件中打开该图片的属性，可以看到原图的大小是762KB，如下图所示。
2 打开“素材\ch01\jpg压缩.jpg”文件，选择【文件】→【导出】→【存储为Web所用格式】选项，弹出【存储为Web所用格式】对话框，如下图所示。
3 在优化的文件格式中选择压缩的格式，在左下角可以查看优化后的图片大小，如下图所示。
提示：GIF格式的颜色只有256色，它不支持1677万色。依次在优化的文件格式中选择不同的压缩格式，可以看出只有JPEG格式压缩得比较成功，JPEG格式还可以压缩图片的品质。
4 将压缩后的图片存储到桌面，同时打开原图和压缩后的图片进行对比，如下图所示。
以上讲的是JPEG格式的两个优点：一是JPEG格式保存支持路径，二是JPEG格式的压缩一般支持摄影实拍类的图片。一般位图用JPEG格式压缩，矢量图用PNG格式或GIF格式压缩。
1.5.2 PNG格式的优点与局限
本节介绍PNG格式矢量图的优缺点。
1 将“素材\ch01\矢量图.ai”文件拖曳到PS中，会弹出【导入PDF】对话框，选中【页面】复选框，单击【确定】按钮，如下图所示。
2 下面对图进行优化，选择【文件】→【导出】→【存储为Web所用格式】选项，弹出【存储为Web所用格式】的对话框，如下图所示。
3 在JPEG格式、【品质】为“60”的情况下，图片的大小为324.4KB，将图片品质调至“100”时，可清楚地看到清晰度和大小的区别，如下图所示。
4 将图片格式改为PNG-8，图片的轮廓是有锯齿的，大小也会变小很多，如下图所示。
5 也可以通过减少颜色进行优化，将颜色从“256”降至“64”，可以明显看到图片的颜色和大小都有变化，如下图所示。
6 像这种图片建议使用PNG-24格式，因为它是没有杂色边的，如下图所示。
下面介绍在颜色很少的情况下，比如只有一个单色的LOGO，对其进行优化的最好方式。
1 新建一个透明空白文档，用【自定义形状工具】
任意绘制一个图形，如下图所示。
2 由于是单色的LOGO，可以使用PNG-8格式压缩，将颜色调低即可，如下图所示。
提示：不同的图片类型，其优化方案是不同的。
1.5.3 GIF格式的优点与局限
GIF格式支持动画、透明，最好是矢量图，动画不宜过大。
1 打开“素材\ch01\动图.gif ”文件，选择【窗口】→【时间轴】选项，如下图所示。
提示：在时间轴面板中单击
按钮，选择【面板】选项，在弹出的【动画面板选项】对话框中，可以选择缩览图的大小，如下图所示。
2 选中时间轴中的第1个图，在【图层】面板中显示的是“图层1”的图，第2个图是“图层2”的图，它们是轮流交替的，如下图所示。
3 新建一个空白文档，做一个颜色变化的字，使用【文字工具】
输入“2018”，如下图所示。
4 复制文字图层，把“2018”字体颜色改为红色，如下图所示。
提示：复制图层有两种方法：一是选中图层右击，并选择【复制图层】选项；二是选中图层拖曳至创建新图层按钮
上。
5 在时间轴面板中，选择【创建帧动画】选项，如下图所示。
6 单击一次【创建帧动画】，就完成一个画面的创建，单击【复制所选帧】按钮
，如下图所示。
7 设置动画停留时间的长短、循环的次数，单击【播放动画】按钮，如下图所示。
提示：由于画面的内容是一样的，所以看不出播放的效果。
8 选中时间轴中的第1个图，在图层面板中关闭“2018红色”图层，依次替换一个图，再单击【播放动画】按钮，就可看到效果，如下图所示。
提示：我们也可以做稍微复杂点的效果，选中“2018黑色”图层，选中【编辑】→【自由变化】选项做相应的旋转，按住【Shift+Alt】组合键围绕中心点缩放大小。
9 选择【文件】→【导出】→【存储为Web所用格式】选项，弹出【存储为Web所用格式】对话框，选择GIF格式，单击【预览】按钮，即可在网页中查看效果，如下图所示。
10 单击【存储】按钮保存。
1.5.4 图片压缩的解决方案
本节以“素材\ch01\图像压缩素材．jpg”文件为例介绍怎样压缩图片，具体操作步骤如下。
1 打开素材图片让其1∶1显示，可以看出原图是非常大的。
2 选择【图像】→【图像大小】，在弹出的【图像大小】对话框中，设置【宽度】和【高度】分别为“1000像素”和“1400像素”，勾选【重新采样】，单击【确定】按钮压缩图片，如下图所示。
3 再以JPEG格式进行优化，原图品质降为60%，单击【储存】按钮即可。通过查看图片详细信息对比两幅图片的差别，得知原图大小是3.9MB，尺寸是3662×5125，也就是说，这张图接近于2000万像素，而压缩后的图大小是202KB，尺寸为1000×1400。
提示：2000万像素的图，不适合在网上展示，只适合打印。