我们在网站报名考试或者填报一些个人信息时，经常需要上传20k以内的照片。
就像画家需要了解颜料，雕塑家需要了解石材一样，虽然我们大多数并不是设计师，但是笔者认为对图片本质有一定的了解，有助于我们更好的理解所做的操作。
一、图片概述
1. 分类
按照构成元素来分，图片主要分为矢量图和位图。
2. 基本概念
| 描述 | 基本单位 | |
|---|---|---|
| 像素 | 位图最小的不可分割的元素，也是数码感光元件最小的感光单位 | — |
| 分辨率 | 单位面积内的像素数量 | 像素点/英寸 |
| 图片尺寸 | 图片纵横方向上包含的像素个数 | 像素 |
| 图片宽高 | 图片物理意义上的长度 | 英寸或厘米 |
| 图片体积 | 图片文件占用的存储空间大小 | 字节 |
这里的图片体积，也就是俗称的图片大小。
通常情况下，图片分辨率越高，图片越清晰，所包含的总像素数量越多，图片体积越大。
二、Web所用格式
1. 简介
我们在网站上使用的图片都是位图，以像素为单位。不同的位图在记录这些数据时的方式不一样，这就涉及到有损压缩和无损压缩的区别，继而诞生了不同的图片格式。
Photoshop提供了Web所用的图片格式，包括GIF、JPG、PNG、WBMP等，这类文件压缩比高，体积小，上传和下载速度快，适合Web传播。
2. 格式
JPG和PNG是两种常见的图片格式。
JPG采用有损压缩模式，支持交错，不支持透明和动画。与JPEG是一种格式的不同叫法。
PNG采用无损压缩模式，支持交错和透明，不支持动画。所以PNG一般图片体积较大，当对图片清晰度要求不高时，压缩图片一般导出JPG格式。
3. JPG参数设置
导出JPG格式主要的参数设置如下表。
| 参数 | 解释 | 设置建议 |
|---|---|---|
| 品质 | 设置越高，图片越清晰，文件越大 | 查看几种品质设置下的图像，确定品质和文件大小的最佳平衡点 |
| 优化 | 创建文件大小稍小的增强型 JPEG，获得最大文件压缩量 | 建议勾选 |
| 连续 | 创建在Web浏览器中连续显示的图像，显示为一系列的叠加。查看者在整个图像下载完毕之前，能看到图像的低分辨率版本 | 在图片大于10k时勾选会压缩文件大小，某些情况会增大文件大小，建议在保存时根据实际情况决定 |
| 模糊 | 指定应用于图像的模糊量 | 建议使用0.1到0.5之间的设置 |
| 杂边 | 指定原稿图像中透明像素的填充色 | 原稿图像中完全透明的像素由选中的颜色填充，部分透明的像素与选中的颜色相混合 |
4. Web图片格式优点
在维持图片质量的同时尽可能地缩小文件体积。
移除Exif信息，主要包括拍摄日期及其它相机参数，保护隐私。
三、Photoshop压缩图片大小
1. 工具
- Photoshop CS6
链接：https://pan.baidu.com/s/1FN-_5jgaW1gl83nhOWYpvg 提取码：vrhu
2. 步骤
-
打开Photoshop CS6，点击文件下的【打开】，导入需要上传的图片。image-20201123091858649.png
-
点击文件【存储为Web所用格式】。存储为Web所用格式
-
出现新的操作面板，各项设置如图所示。本例中图片大小为67.64K，我们需要设置右侧格式和属性来压缩图片大小。Web格式操作面板
-
按照下图步骤调整图片【品质】，其余参数按需设置，设置方法见2.3。调整图片品质
-
完成上述设置后，点击【存储】，按如下步骤保存图片。保存图片
-
当保存的文件名出现中文时，会出现如下警告。这是因为过去图片在Web使用时，会造成一些老版本浏览器或服务器不支持，现在都可以支持了。如果介意可以修改文件名只含字母或数字，或者在网站使用的时候不要有中文即可。非拉丁字符警告
-
来到存储路径下找到压缩完成的图片。右键【属性】查看图片大小，如图已经压缩为19.8K。需要注意的是，占用空间大小指的是文件占用硬盘空间大小的字节数，这些空间被分为很多小格，会有一个文件占不满一个格子的情况，所以占用空间大小通常比实际文件大一点。我们只需关注实际大小，满足要求即可。压缩完成
写在最后
在这个人人都是自媒体的时代，图片是除了文字和视频以外，传递信息的重要载体。笔者认为掌握Photoshop的一些基本技巧，会像掌握剪辑和编程一样，逐渐成为我们每个人必备的技能。不论对于自身成长还是对社会发展，都将是有益的一部分。
参考资料
1.png、jpg图片格式的区别
2.存储为web格式是什么意思
3.像素、图片尺寸与分辨率
4.非拉丁字符的含义
5.图片大小和占用空间大小
