性能文章>图像内容的加载性能>

图像内容的加载性能转载

6月前
225501

网络用户是视觉群体,我们依靠图像来支持网络内容。 与文本一样,图形内容是在网页或应用程序中传达信息的关键组成部分。 各种图像,从图表和图形到图标和箭头,再到面部照片和地图,都可以提供即时数据并提高读者的理解力和记忆力。 但是,与文本不同,图像需要大量时间和带宽来下载和呈现。 图形内容很容易占到典型网站总带宽的 60%-85%。例如,HTTPArchive 指出图像约占网站平均内容的 50%。

显然,获得性能显著提升的主要方法之一,是减少加载图像所需的时间。 让我们来看看解决这个问题的一些方法。

要问的第一个问题是您是否真的需要图像,而这个问题显然没有被问到足够的问题。 太多的各种网站都将大型且大部分无用的图像“放在首位”。 这会减慢页面加载速度,并使读者在获得有意义的内容之前滚动页面的一半。

考虑是否真的需要每个图像,如果需要,是否立即需要。 在更重要的内容之后可以稍后加载吗? 如果不是,是否可以对其进行优化,使其对页面加载的影响最小? 请记住,下载内容(尤其是图形内容)所需的时间应该花在换取图像提供的信息上。

是的,图像可以真正支持文本内容,或者只是提供视觉兴趣,但如果图像不能增加信息价值或为用户阐明意义,请将其删除。 最快的图像是您不必下载的; 您删除的每张图片都会加快页面加载时间。

根据经验,PNG 用于剪贴画、线条图或任何您需要透明度的地方,JPG 用于照片,以及 GIF 当您需要动画时。 如有疑问,请进行简单但明确的测试:以多种格式保存图像并进行比较!

人们经常认为 PNG(一种无损压缩格式)比 JPG(一种有损压缩格式)对摄影图像具有视觉优势,但事实并非如此。 例如,下面的两张图片看起来都很棒; 它们之间没有明显的视觉差异。 兽目明净,皮毛分明,光影平滑。

dog+cat.png dog+cat.png -- 232k

dog+cat.jpg dog+cat.jpg -- 42k

但是PNG图像是232k,而JPG只有42k! 下载时间缩短了 81%,而质量没有明显损失。 判决:JPG FTW。

元数据(metadata)或“有关数据的数据”存在于大多数图像中,并且可能包括(例如在相机照片上)有关相机/手机型号、日期和时间戳、照片应用程序设置、文件格式、高度和宽度的数据, 地理位置坐标等等。 图像编辑器可能在其保存的文件中包含元数据,例如作者姓名、分辨率、色彩空间、版权和关键字。

对于大多数网站图像,元数据并不重要,因此我们最好将其去掉。 您肯定已经猜到了,有很多方法可以做到这一点。 首先,看看您喜欢的图像编辑器; 它可能已经具备查看和编辑元数据的能力。 (例如,Gimp 可以。)如果没有,只需使用在线可用的工具之一,例如 VerExif:http://www.verexif.com/en/。

例如,这张 JPG 图片(最初为 1280 x 720,已调整大小以在此处展示)是 **** 年在澳大利亚用手机相机拍摄的。

bonniedoon.jpg, original, 363k bonniedoon.jpg, original, 363k

VerExif 的在线工具用于上传图像并识别要删除的元数据。

VerExif's upload dialogVerExif's upload dialog

如下表所示,这张图片有相当多(38k!)的元数据。 (请注意,地理位置数据是空的,可能是因为美国手机在该位置没有服务。)

Metadata 类型 Metadata 值
Camera make SAMSUNG
Camera model SCH-1535
Date/Time ****/10/25 12:07:24
Resolution 1280 x 720
Flash used No
Focal length 3.7mm
Exposure time 0.0024 s (1/420)
Aperture f/2.6
ISO equiv. 80
Whitebalance Auto
Metering Mode average
Exposure aperture priority (semi-auto)
GPS Latitude ? ?o ' "
GPS Longitude ? ?o ' "

删除元数据后,文件大小从 363k 下降到 325k,相差 10.5%; 当然不像物理尺寸缩小或压缩那么戏剧性,但百分之十没什么好打喷嚏的,特别是如果你有多张照片。

元数据删除工具非常丰富,在 MakeUseOf 上有一篇关于 Exif 删除的原因和方法的好文章。

http://www.makeuseof.com/tag/3-ways-to-remove-exif-metadata-from-photos-and-why-you-might-want-to/

大图像比小图像需要更长的时间来下载。 您的所有图像都应根据其预期用途调整大小,并且不应依赖浏览器来调整它们的大小以进行渲染。

通常,从服务器检索大图像,然后在浏览器中使用 CSS 调整大小。 这可能是出于完全合乎逻辑的原因——例如只使用一个图像作为在悬停时展开的缩略图——或者它可能只是粗心的编码。 不管是什么原因,它都会浪费带宽。

例如,您可能有一个 1200 x 600 像素的图像,以 60 x 30(作为 5% 的缩略图)呈现,并在悬停时使用 CSS 过渡将其卷起至全尺寸。 它工作正常并且看起来很棒,但是如果用户实际上从未将鼠标悬停在缩略图上,那么下载图像所花费的 95% 的时间都被浪费了。 您最好花时间制作单独的、适当大小的缩略图,仅在实际请求时才显示完整大小的图像。

一种非常有效的减少各种图像文件大小的技术是简单的裁剪:省略对信息传递不重要的图像部分。

额外的背景和空白、不必要的边框和非预期对象不仅在视觉上而且在物理上使图像混乱,影响图像大小及其下载效率。

坦率地说,上面显示的澳大利亚旅行者的照片在水平和垂直方向上都太大了。 它可以被裁剪以更有效地关注人、栅栏上的标志和房子的主要部分。

bonniedoon.jpg, cropped, 115k bonniedoon.jpg, cropped, 115k

在这里,我们从已经调整大小的版本开始,从 220k 开始,然后裁剪它,将其保存到上面看到的 115k 版本。 这减少了 52%,而且照片现在以文件大小的一半集中在重要部分(是的,狗窝很重要!)。 所有必需的信息都在那里,只是更有效地呈现。

当然,我们希望我们的图像在合理范围内看起来尽可能好,这意味着以 100% 的质量保存 JPG,对吗?不必要。在大多数(也就是说几乎所有)情况下,您可以降低 JPG 质量,从而降低文件大小,而不会出现任何明显的质量差异。

一旦您确定了图像的实际大小,您如何将其设置为该大小,但仍保留所需的质量和特征?您需要的第一件事是一个好的图像处理工具。对于这些修改,我们使用了流行的 Windows 桌面产品 paint.net。

查看以下照片类型的 JPG,其质量逐渐降低,并注意文件大小的减小。快速计算显示,100% 质量图像和 25% 质量图像之间的尺寸差异为 90%!但你真的能看出区别吗?也许更重要的是,即使您可以看到任何差异,是否足以保证更大的文件并因此降低下载速度?

burger100.jpg burger100.jpg -- 原始图像 100% 质量, 227k

paint.net screenshot 通过 paint.net 保存为低质量图像

burger80.jpg burger80.jpg -- 80%, 60k

burger50.jpg burger50.jpg -- 50%, 34k

burger25.jpg burger25.jpg -- 25%, 20k

 

要点很明显:一定要尝试使用质量较低的 JPG,看看在看到差异之前你可以走多低,然后使用保持照片清晰度的最小的。 不那么明显的是,文件大小可以是一个诱人的简单修复,但并非没有缺点。 同样,在将质量降低作为一种包罗万象的解决方案之前,需要进行一些实验。 有关更多详细信息,请参阅这篇出色的文章,How to Compare Images Fairly

其他图像操作工具:

  • XNConvert: 这个免费的跨平台工具可以处理批量图像,并执行调整大小、优化和其他转换。
  • ImageOptim: 这个免费工具可用于 Mac 和在线服务,专门用于优化图像以提高速度,包括元数据删除(如上所述)。
  • ResizeIt: 一款仅适用于 Mac 的桌面产品,可让您同时更改多个图像的大小,并可以同时转换文件格式。
  • PicResize: 几个优秀的基于浏览器的工具之一,它为您提供了许多用于裁剪、旋转、调整大小、添加效果和转换图像的选项。
  • Gimp: 这个广受欢迎的跨平台工具会随着年龄的增长而变得更好。 Gimp 功能强大且灵活,可让您执行各种图像处理任务,当然包括调整大小。

这只是可用工具的一小部分。 尽管 CrazyEgg 在这里有一篇全面的文章,但我们不在这里对图像编辑器进行比较审查:

https://www.crazyegg.com/blog/image-editing-tools/

使用压缩工具可以进一步压缩 PNG 和 JPG 图像,从而减小文件大小而不影响图像尺寸或视觉质量。 例如,这是一个使用免费在线压缩工具 TinyPng 完成的图像压缩。

https://tinypng.com/

您可以在下面的屏幕截图中看到图像 resizeitscreenshot.png 的巨大压缩结果(TinyPng 上传但不显示它正在压缩的图像)。 TinyPng 报告说图像大小从 551k 下降到 133k,提高了 76%。

TinyPngTinyPng

是的,TinyPng 用于 TinyPng 屏幕截图本身,节省了 57%。

不要假设因为 PNG 是无损的,所以它们不能被进一步压缩; 他们能。 TinyPng 当然不是唯一可用的工具。 这是一堆图像压缩产品的简要介绍。

http://enviragallery.com/9-best-free-image-optimization-tools-for-image-compression/

虽然本节中的技术并非包罗万象,但它们代表了一组很好的过程,您可以使用它们来减小图像大小,从而减小它们的传输速度。 图形内容大小是一个很容易解决的主要领域,但它可以让您的网站在您寻求更快加载页面的过程中显着提高速度。

点赞收藏
分类:标签:
风之石
请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

Web优化躬行记(3)——图像和网络

Web优化躬行记(3)——图像和网络

1
0