HTML：更快地加载缩略图和完整图像

Question

我有一个博客网站，可以慢慢加载图片，我想知道如何让它们加载得更快，并且：

• 我使用相同的图像缩略图和故事。缩略图很小，是否仍然加载完整图像？如果是这样如何使用图像的缩略图？
• 我应该在哪里存储图像？为您的网站和博客存储图像的最佳位置是什么？可以将它们保存在一个驱动器中并使用源吗？
• 如何优化图片？什么是占位符？我看过许多网站如facebook使用了一种在图像和内容之前显示的占位符？怎么做？ - 如何预加载图像？或者有更好的方法吗？

Answer 1

以下是一些指示。

• 缩略图图像必须与原始（大）图像分开。当用户上传图像时，您必须使用一些脚本来调整图像大小。如果您使用的是像Drupal或Wordpress这样的标准CMS，那么应该有一个选项来调整大小（无需编写代码）。
• 假设您的博客是公开的，那么图片也应该是公开的（通常）。您可以创建名为 files 的目录，并将图像存储在该目录中。如果您使用的是标准CMS，则这些选项应以某种形式存在。
  • 要避免长时间在一个目录中包含所有文件，请使用文件夹命名方案，例如 files / [YEAR] / [MONTH] 或您认为可用于您目的的任何其他内容。
  • 确保使用和.htaccess（或等效的）保护上传目录和上传机制。否则，有人可能会上传恶意脚本并在您的服务器上执行它们。
• 占位符是在原始内容不存在（或正在加载）时保留某些内容的任何内容。因此，占位符图像将是具有通用设计的标准图像 - 它与加载一样好。您可以使用JavaScript或CSS（背景图像）来实现这样的占位符。
  • 就我从你的问题中看到的那样，不需要预加载。如果您共享指向您网站的链接，则可以给出更好的意见/答案。

下次，请尽量提出详细问题 - 如果可能，每个问题一个问题。此外，不要害怕谷歌的解决方案。我只是通过谷歌搜索学习编程（PHP，JS，Drupal，CodeIgniter等）！希望这可以帮助！

Answer 2

Jigar在回答这个问题方面做得相当不错，但我想如果你想优化图像我会添加，有很多网站可以免费为你做这件事。

我最喜欢的是https://tinyjpg.com/但是还有很多其他人。快速谷歌搜索将为您提供大量不同的网站，所有这些网站基本上都做同样的事情。

这篇文章也可能有助于Load a low-res background image first, then a high-res one