【问题标题】:How to make photos on my website load faster?如何使我网站上的照片加载更快?
【发布时间】:2021-02-06 19:50:20
【问题描述】:

在我的上一个项目中,我的网站上的照片有问题。他们正在加载很长时间。用户必须等待才能看到全貌。我重新缩放了照片,但它使它们在桌面上像素化,并且它们在智能手机上加载时间很长。(基本上问题出在智能手机上)。有没有其他方法可以在 html(比“img src="";”)或 css(比“backgoround-image:url();”)中上传 pohotos? 什么决定了加载照片的速度?

【问题讨论】:

  • 取决于我们正在谈论多少图像以及您想要做多少努力。首先,以 MB 为单位的图像大小和 abndwidth 决定了图像加载的速度。这也是您的服务器提供多少带宽以及同时访问它的数量的问题。您可以做的一件复杂的事情是,通过 CSS 添加图像作为背景图像。这样,您就可以使用媒体查询来根据屏幕尺寸加载高分辨率或低分辨率图像。

标签: html css image loading photo


【解决方案1】:

在使用之前尝试调整图像大小。

【讨论】:

    【解决方案2】:

    图像加载性能最重要的因素是您正在加载的图像文件的大小(以字节为单位)。在无处不在的高分辨率数码相机的世界中,很容易获得数兆字节的高分辨率图像。它们适合打印。

    世界上有很多工具可以对图像进行下采样(将它们的宽度/高度从 4096 / 3072 减少到 512 / 384。如果您使用的是 JPEG 图像,您的相机可能会以非常高的 JPEG 格式捕获它们质量,假设为 3。大多数工具在对图像进行下采样时,还可以将 JPEG 质量从 3 降低到 35 左右。当输入图像需要 5 MB 时,生成的图像需要 60 KB 的情况并不少见。

    降采样和 JPEG 质量降低的图像在大多数网站上看起来都很好,并且其中的字节数会减少一个数量级或更多。这是你的速度。

    您没有说明如何提供图片,因此很难就如何提供具体建议。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-08
      • 1970-01-01
      • 2019-02-15
      • 2016-07-24
      相关资源
      最近更新 更多