前端PS切片 常用不同格式图片区别

最近博主在学习切片工具的使用，经过浏览几个教学视频和其他大神的切图经验后，也是小有收获，现来总结以便复习。

 

为什么要学习切片

因为博主准备从事前端方向（虽然现在还是一个大菜鸟），而现在前端会使用切片工具基本是必要的啦，因为现在交到我们手上的基本都是psd设计文稿，我们必须把其中的一些图片、logo、文字给切出来才能拿到网页中使用，所以学会切图工具是必要的。

不仅如此正确的切片会给网站带来一些非常正面的影响：

1. 减少网页的加载时间

   在网页上可能需要大的背景图片或banner图片，浏览器下载会花费很长时间，不利于用户体验。而切片正好解决了这个问题，它将大图片分为很多小图片，浏览器分开进行下载，其加载的时间也就大大缩减，节约很多时间

2. 优化图像

   一般来说一个完整的图像只能是一种格式，jpg,gif,png等，一种格式我们只能采取一种优化方式，而切片可以将小图片保存为不同的格式，可以分别对其优化，既能保证图片的高质量，还能减少图片的内存，提高网页的速度

3. 制作动态效果
    
    

切片前的准备

当然，安装一个环境肯定少不了

1. 另存网页psd文件

   这个是基本的常识， 开始切片前一定要另存一下psd设计稿，相当于备份一份，以免切片过程中发生的各种情况导致源文件损坏，虽然还可以再要一份，但这样毕竟不好，所以开始前一定要养成备份的良好习惯

2. 整合ps的图片

   这样方便切片的时候查找需要操作的图片，提升操作的效率（一般发来的psd文件已经分组，可按照自己的习惯再次划分或者直接使用）

 

切片具体操作

关于切片的具体操作,我就不一一操作截图啦，这里推荐几个大神的总结和一个视频教程，都是非常详细而且简单易懂的，还有各种常用快捷键，想学习可以去看看
视频教程
https://www.bilibili.com/video/av24438294/?p=1
大神总结
https://blog.csdn.net/xiaoermingn/article/details/53240266
https://blog.csdn.net/xiaoermingn/article/details/53239914
https://blog.csdn.net/u013778905/article/details/52268304
 

不同格式图片的区别

• BMP格式
   Windows系统下的标准位图格式,未经过压缩，一般图像文件会比较大.

• JPEG(JPG)格式
   应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)，因为JPEG格式的文件尺寸较小，下载速度快,便于在网络上传输，所以网页上大部分图片就是这种格式!

• GIF格式
   最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，实质为GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。，“体型”很小，网上很多小动画都是GIF格式。但是其色域不太广,只支持256种颜色.

• PSD格式
   Photoshop的专用图像格式，可以保存图片的完整信息,土层,通道,文字都可以被保存,图像文件一般较大。

• PNG格式
   其目的是试图替代GIF和TIFF的文件格式，与JPG格式类似,网页中有很多图片都是这种格式，压缩比高于GIF，支持图像透明，可以利用Alpha通道调节图像的透明度,是网页三剑客之一Fireworks的源文件。

• TIFF格式
   它的特点是图像格式复杂、存贮信息多,在Mac中广泛使用的图像格式,正因为它存储的图像细微层次的信息非常多，图像的质量也得以提高，故而非常有利于原稿的复制。很多地方将TIFF格式用于印刷.

• RAW(.dng .cr2 .nef)
   RAW是一个共享的图片格式，包含数码相机捕捉到的未处理的图像数据，不同个制造商通常有自己的原始文件扩展格式。
  Canon: CR2：（Canon RAW）
  Nikon: NEF：（Nikon Electronic Format）
  Universal： DNG （Digital Negative）
  RAW文件作为工作对象优于JPEG文件

如若想深入了解不同格式图片原理和优化方法，推荐一位大神
https://blog.csdn.net/github_38885296/article/details/78978692
 
 
若有新的问题，会在此进行补充，若有问题，欢迎指正，感谢