深推深推

怎么用ps更好的优化图像来加速你的网站

现在信息爆棚的时代,用户对信息的获取已经负载慢慢了,所以网站为了更快的用户体验而尽量缩短加载时间,从提升用户体验。

1、在Photoshop中保存为Web和设备

更好的图像优化的第一个关键是调整选择如何从Photoshop中保存网络图像。如果您习惯了典型的“保存”或“另存为...”功能,现在是学习新技巧的时候了:

“文件>保存为网络和设备... ”是你应该开始使用时保存图像的网络。使用这个工具可以让您对图像控制有更多的控制,预览压缩后图像的外观。甚至还有高级用户的微调控制。

360截图-3751356.jpg

本文将讨论三种格式,这三种格式是您最常用的三种格式:

.jpg- 有损格式,非常适合拍摄照片

.png(8位) - 无损压缩类型,有限的色彩范围

.gif- 像png 8这样的有限的颜色范围无损,但是.png通常是更好的选择。

有些情况下你需要使用24位的.png(也就是说,它是唯一支持网页图像透明的Alpha通道的文件类型),但对于这个artice我们不会讨论它。它几乎总是比任何其他格式都大,因为它是一种支持更宽色彩范围的无损压缩类型。

.jpg压缩

.jpg图像格式最适合用于颜色范围很广的图像,这些图像没有尖锐的过渡或精细的边缘。由于是压缩算法,所以对于照片来说效果非常好。使用JPG可以显着减少照片的文件大小,同时保持图像质量非常高。以下面的图像为例:以最高质量保存的图像(与原始图像紧密表示)和以“高”(或60%)质量保存的.jpg之间几乎没有任何可观的差异。即使如此,图像几乎是原来的四分之一!

360截图-3770122.jpg

在左边是在Adobe Photoshop中使用Save For Web的最大图像质量(74.9 KB)。中间是以高质量保存的相同图像 - 虽然快速浏览几乎没有明显的差异,但是文件大小减少到19.6 KB!在右边是相同的图像保存在低质量,非常明显的工件(6.29 KB)。

使用.jpg压缩,您可以非常自由地调整质量来换取文件大小。用照片,你可能会发现60-70%的质量工作得很好。如果图像中有文字,则可能会注意到边缘较锐利的文物,并且可能不得不提高质量。

.gif和.png压缩

.gif和8位.png图像格式更适合颜色范围有限的图像(最多可显示256种颜色),其中有大面积的均匀颜色。在这些情况下,.png和.gif通常会产生原始图像的接近完美的表示形式,同时保存的速率比.jpg高。这些格式的典型用途包括界面项目,图标和图像,其中文本需要准确表示。

通常情况下,8位.png格式压缩比.gif更好。这两种格式都支持透明像素(不要与24位.png支持的alpha透明混淆)。

360截图-3780637.jpg

.gif和8位.png都使用无损压缩,但受限于有限数量的颜色。这些压缩类型的质量要高得多,只要图像的颜色有限且颜色相同的区域大,文件大小就会小得多。这些格式对于接口和文本通常是很好的,像.jpg这样的有损文件压缩需要以更高的质量保存以实现相同的外观(意味着更大的文件)。

小小的变化,就能提升网站体验

压缩一张图片可能会在整体页面大小上减少一点,但是如果你在网站上优化图片的话,通常会节省一大堆服务于较小文件的带宽。通过提供更小的文件,您可以使页面加载速度更快,并让用户体验更快捷。

未经允许不得转载:深推 » 怎么用ps更好的优化图像来加速你的网站

赞 (100)