了解最常见图像格式之间的差异,并了解如何在 Photoshop 中减轻它们的重量。把你的图像节食!无论您拥有网站还是个人博客,您的网站肯定都有大量图片来吸引用户的注意力。如果您也遵循当前的设计趋势,您的图像每次都会更大。但是,如果我们生活在宽带时代,为什么还要担心图像的大小?出于三个简单的原因:

手机浏览。手机浏览量占总浏览量的55.6%,而且这个数字还在不断增加。
不要失去用户。  巴拿马电话号码表     个缓慢而繁重的网站是非常高的跳出率的代名词,当然你不希望那样。不要让您的用户等待,优化您网站的权重。
搜索引擎优化定位。 Google 抓取您网站的时间有限,因此重量越轻,它可以抓取的页面越多,您就有更多机会获得更好的排名,因为我们现在也知道 Google 在其定位中非常重视加载速度因素。 .
从哪儿开始?分析您必须优化哪些图像
在开始优化图像之前,最好先进行速度测试,看看图像对您的网站有何影响。您可能认为您应该优化它们,并且您可能首先有其他优先事项。
这些工具将推荐不同的步骤,不仅可以优化图像,还可以优化您网站的总体加载速度。

已经相信优化网络图像的重要性了吗?让我们看看怎么做:

首先是要知道如何选择适合您需要的图像格式。您肯定想知道 jpg、png 或 gif 之间的区别是什么。我们不会让您厌烦技术细节,我们只会告诉您何时最好使用一种或另一种格式:

.GIF
一种过时的格式,它实际上仅用于动画图像。

.PNG
Gif 的替代品,因为它也允许透明。它非常适合用于平面图像或具有较大空白的图像,例如屏幕截图、徽标等。 PNG 是一种无损图像格式,因此虽然它不会像 JPG 那样缩小尺寸,但质量总是会更高。

非常适合具有细节和多种颜色的照片。它是一种有损压缩格式,即降低质量以缩小尺寸,从而失去清晰度,因此某些区域可能会出现色差。

通常,我们将 PNG 用于构成我们网站的所有图像(徽标、图标、按钮…),而 JPG 仅用于照片,尤其是大型照片。

除此之外,越来越普遍地使用矢量格式(.EPS 或 .SVG)作为徽标和图标,因为它们完全可扩展到所有分辨率。在 NoJpeg 中,它们为我们提供了许多选择此选项的理由。

如何优化图像
如果您使用 Photoshop,请记住您必须使用选项 «File> Save for web … « 保存您的图像,但下一步该怎么做?

照相馆
首先在右上角选择要导出的格式(gif、png 或 jpg)。如果您使用上面的选项卡,您最多可以看到四个副本来比较不同的格式或压缩,并查看它们的质量/重量比。

如果您以 JPG 格式导出,请记住:

质量条,从 0 到 100,是 0 最大压缩和 100 零压缩,即高质量。
“渐进式”选项。如果你按下它,jpg 会以不同的质量保存不同的图层,这样当它上传到服务器时,图像将以低质量被看到,并且它的清晰度会随着加载而提高。否则,图像将出现在高处,绊倒。
如果您以 PNG 格式导出,请记住:

PNG-8 还是 PNG-24?主要区别在于 PNG-8 最多可压缩 256 种颜色,就像 GIF 一样,而 PNG-24 可压缩到 1600 万种颜色。您通常会使用后者。
透明度。很明显    比利时商业名录    但是如果你在图像的背景上打开它会是透明的(只要 Photoshop 背景中没有纯色层)。
“interlaced”选项与JPG中的“progressive”非常相似,它指的是加载的类型。这将取决于我们的首选项和加载图像的浏览器的功能。
正常负载
进步
Photoshop 的“Save for web …”面板中有更多选项,但我们不想太技术化,所以我们只向您展示最常见的选项。在 90% 的情况下,您不需要更多。

除了 Photoshop 之外,还有其他程序可以帮助您减轻图像的重量、压缩和消除元数据以及其他选项。我们推荐两种:Image Optim (MAC) 和 RIOT (PC)。

WordPress 中的自动压缩和优化
如果您使用 WordPress 并希望自动压缩和优化您的图像,而无需通过 Photoshop 或其他程序,我们推荐 Smush,一个可以完成所有脏工作的插件

Leave a Reply

Your email address will not be published.