为什么要在网站上调整上传图片的大小答案

【问题标题】：Why resize uploaded images on website为什么要在网站上调整上传图片的大小
【发布时间】：2017-11-03 05:11:21
【问题描述】：

我有一个人们可以上传图片的网站。我已经看到很多网站将图像缩小到缩略图大小并在搜索页面上显示，直到用户实际点击一个以查看完整尺寸。

为什么生成上传图片的缩略图版本是个好习惯？为什么不直接使用设置高度和宽度的img 标签？

[编辑]：在阅读了几个答案后，我意识到我的问题可能措辞不佳。所以，我的意思是，即使它们在 CSS 中指定了尺寸，是否以全尺寸下载图像？页面加载完成后，它们是否在渲染时缩小？

谢谢！

【问题讨论】：

Stack Overflow 不适用于这类问题。无论如何，它们是为了降低页面加载速度。当图像不是延迟加载时，这一点尤其重要。更改 img 的宽度和高度不会减小发送到客户端的图像的大小。
100 张图片 * 7 mb = 700 mb 下载... 100 *.03 mb = 3 mb

【解决方案1】：

较小的图像尺寸较小 = 加载速度更快。

当用户真正想看图片时，你打开实际图片，它可能会等待加载。

如果您在搜索中有多个帖子并且每个帖子都有图片，则缩略图的加载速度将比原始图片快得多。

如果您使用 css 缩小原始图像（设置宽度和高度），仍然需要先加载原始图像。

【讨论】：

【解决方案2】：

较大的图像具有较大的文件大小。如果您有 1MB 的图片，但只需要显示大小可能为 10KB 的缩略图，则只需在需要时显示完整的图片即可节省 99% 的带宽。

除了带宽之外，客户端的内存通常也有限……想想移动设备。另外，在滚动期间处理它们所需的 CPU 等等。

【讨论】：

【解决方案3】：

即使图片在 CSS 中指定了尺寸，是否以全尺寸下载？

是的，图片将以原始尺寸（全尺寸）下载。 CSS 只改变图像的视图而不是主图像文件。

页面加载完成后，它们是否在渲染时缩小？

没有，除非有脚本可以做这样的工作。

【讨论】：

【解决方案4】：

如果你使用带宽高的img标签，那张图片还是原图，数据大小没有变化（只是在你的浏览器中看起来更小了）。

如果您有缩略图，则这些缩略图的数据量较小，但通常在您页面的某个位置，您会将它们链接到具有较大数据量的原始文件。

如果用户下载缩略图，他会得到小尺寸的图片，如果他下载原版，他会得到大尺寸的。注意：缩略图是与原始图片不同的图片。

【讨论】：