HTML：负载缩略图和完整的图像更快

Question

我有一个博客网站，慢慢地加载图像，我想知道如何使它们更快地加载和：

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

Answer 1

这里有一些指针。

• 缩略图必须与原始（大）图像分开。当用户上传图像时，您必须使用一些脚本来调整图像大小。如果您使用的是像Drupal或Wordpress这样的标准CMS，应该有一个选项可以进行大小调整（无需编写代码）。
• 假设你的博客是公开的，图片也应该公开（通常）。您可以创建一个名为的文件夹，并且您可以将图像存储在该目录中。如果您使用标准CMS，这些选项应以某种形式存在。
  • 为了避免在长期运行在一个目录下的所有文件，使用文件夹的命名方案，如：文件/ [年份]/[月]或其他任何你认为将成为你的目的。
  • 确保使用和.htaccess（或等效）的上传目录和上传机制得到很好的保护。否则，有人可能会上传恶意脚本并在服务器上执行它们。
• 一个占位符是什么，保持的地方，而原来的东西是缺席（或正在加载）。所以，一个占位符图像将成为一个具有一般设计的标准图像 - 这就好比说loading。您可以使用JavaScript或CSS（background-image）来实现这样的占位符。
  • 就我的问题而言，预加载不应该是必需的。如果你分享到你的网站的链接，可以给出更好的意见/答案。

下一次，请尽量让细节的问题 - 每一个问题的问题，如果可能的话。另外，不要害怕Google提供解决方案。我通过Googling学习了编程（PHP，JS，Drupal，CodeIgniter等）！希望这可以帮助！

Answer 2

虽然我认为如果您想优化图像，那么Jigar已经做了相当不错的回答这个问题，但有很多网站可以为您免费提供。我的最爱是https://tinyjpg.com/但是还有很多其他人。快速的谷歌搜索将为您提供大量不同的网站，所有这些网站都基本上都是一样的。

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