成都SEO - SEO百科 - 如何使图像加载更快

如何使图像加载更快

本文作者:十七 发布时间:2020-06-15 10:16:31 访问人数:190 本文所属:SEO百科
本文标签:
「本文导读」图片会影响网站的加载时间。网站越快,用户体验越好,从而带来转化和利润。业务经理和所有者希望其站点的图像即使在移动设备上也能快速加载。但是他们怎么做呢?在“ 案例的优化图像性能,”上周我的文章,我解释一个网站的成功轻量级图像的重要。

  图片会影响网站的加载时间。网站越快,用户体验越好,从而带来转化和利润。业务经理和所有者希望其站点的图像即使在移动设备上也能快速加载。但是他们怎么做呢?在“ 案例的优化图像性能,”上周我的文章,我解释一个网站的成功轻量级图像的重要。

  在本文中,我将提供优化图像的建议。目标是在不降低性能的情况下创建引人入胜的用户体验

图片加载

  消除不必要的图像

  根据HTTP Archive的报告,在2019年,典型的网页在加载时可能会请求28至32张图像。这些图像可能是必要的。

  例如,人们期望大量图像出现在电子商务网站的产品类别页面上。这些图片通常很关键。

  延迟加载图像

  当典型的网页加载时,它会请求页面标记中列出的每个图像,即使其中许多图像不在屏幕上,也仅在用户向下滑动页面并向下滚动时才会显示。

  图像的延迟加载是仅在需要时才加载图像的过程。首次加载网页时,它仅请求在屏幕上立即可见的那些图像。当用户向下移动时,将加载后续图像。

  HTTP档案库报告说,当延迟加载屏幕外图像时,移动网页传输的图像数据的中位数千字节可能从843.5 KB降至426.7 KB。在某些情况下,这可能会使初始页面加载时间减少25%。

  延迟加载图像的变体最初会注入图像的低分辨率版本,然后在用户看到图像后,再以高质量版本进行更新。这种方法还可以显着减少页面加载所需的时间。

  延迟加载通常需要JavaScript。企业可以让其开发人员编写适合公司需求的延迟加载脚本,也可以使用几种可用脚本中的任何一种。

  压缩影像

  栅格格式(例如.jpg,.png,.webp和.gif)构成了典型网页上的许多图像。在某些情况下,可以压缩这些图像以使它们更快地加载,而没有明显的质量差异。

  加载适当的尺寸

  为用户的屏幕提供适当尺寸的图像。浪费的像素会增加不必要的重量。

  开发人员Ilya Grigorik 在其有关图像优化的出色文章中指出,未压缩的光栅图像由像素组成,并且在初始加载时每个像素占4个字节。

  因此,一个100 x 100像素的未压缩光栅图像为40,000字节(10,000 x 4)。要将字节转换为千字节,请除以1,024。因此,40,000字节的大小约为39 KB。

  想象一下,您有一个图像将以360 x 200像素显示在屏幕上。在此大小下,未压缩的光栅图像将为72,000像素。这些像素中的每个像素需要4个字节,总共288,000个字节或大约281 KB未压缩。

  尺寸为396 x 220像素的超大图像会重很多。具体地说,396 x 220图像将占据87120像素。那就是15,120个额外像素(87,120 – 72,000)。这些浪费的像素仍然需要4个字节,总计60,480字节或59 KB。

  本示例适用于未压缩的光栅图像。并且有许多方法可以压缩图像的大小(以字节为单位)而不影响其像素分辨率。无论如何,请尽可能提供适当尺寸的图像。

  • 项目顾问.png

    扫描添加

    项目经理微信

    享受专业顾问服务

  • 微信公众号.jpg

    关注公众号

    获取更多专业资讯

  • 分享:

    免责声明:本文是由我司原创独立撰写首发本网站中,供使用百度等各大搜索引擎的用户可以第一时间查阅并解决自己所遇到的优化难题。而其中部分转载的文章,我们会在找到作者的情况取得他的同意之后再进行发布!而没有找到文章作者的情况,你可以投稿到我们的邮箱:2838355532@qq.com并附上文章所有权的证明,我们便会在第一时间删除(不超过二十四小时)!

    本文关键词:图像加载

    阿里云
    SEO按天计费
    域名注册
    君企网络启动新征程
    • 公司名称
    • 联系人
    • 电话
    • 邮箱
    • 验证码
      点击更换验证码

    君企网络 Copyright © 2000-2020. 未经许可,不可拷贝或镜像 蜀ICP备12032590号-2 网站地图

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部