假设我显示一个带有我的图片缩略图的网页（所有图片每张大约 2M）。
为了显示缩略图，我可以使用带有max-height/max-width 属性的img 标签。但是我担心浏览器会下载原始图片并在客户端缩小它们。看起来很浪费资源。
在服务器中创建缩略图并加载它们而不是原始图片是否有意义？
另一方面，如果用户点击缩略图，我应该显示原始图片怎么办？也许我应该在后台加载原始图片并在用户点击之前隐藏......
在网页中显示图像的最佳做法是什么？
【问题讨论】：
标签： html image web client-side
假设我显示一个带有我的图片缩略图的网页（所有 图片每张约2M）。
为了显示缩略图，我可以使用 img 标签 最大高度/最大宽度属性。但是我担心浏览器会 下载原始图片并在客户端缩小它们。它 看起来很浪费资源。
...是的。您通常会为每张图像准备一个大小合适、质量合适的缩略图，有时甚至不止一个缩略图。然后你使用一些手段（例如ShadowBox）让客户放大图像。
由于图像大小为 2M，而缩略图通常为 10-15 Kb，因此网站变得更快且响应更快。此外，您获得的数据流量更少，这有助于提高整体速度（即您的客户不会因下载速度变慢，也不会因其他客户占用带宽而变慢）。
在服务器中创建缩略图并加载它们而不是原始图片是否有意义？
当然。带宽和站点速度比一些磁盘空间更有价值。有几种工具可以在上传时调整大小，具体取决于您的平台。对于 PHP，它们通常基于 ImageMagick（更重，质量更好）或 GD 库（更快，质量仍然很好——对于缩略图来说绰绰有余）。
您甚至可能想要对全尺寸图像执行调整大小/质量优化。
对于非常大图像，有“金字塔”脚本（例如 Zoomify、AjaxZoom）允许分段加载大图像，允许放大/缩小、平移和滚动。
【讨论】：
你没有提到你的工具。 在 php 中有 gd 库，它可以帮助您处理图像等。
据我了解，您的最佳做法是创建缩略图（通过库），并在您的网页中加载缩略图..一旦有人点击您的缩略图，将他链接到弹出/下一页/任何-jquery-photo-viewer 查看完整照片。
我希望它能解释你想要什么。
【讨论】：
2 MB 对于网络上的图像来说是巨大，无论是否显示视网膜！
理想情况下，您应该将图像缩小为缩略图，因为浏览器往往在缩放自身方面做得很差。
除非您的图像需要高水平的分辨率（我在想像医学图像或工程文档之类的东西），否则您还应该看起来像 .PNG 或 .JPG 这样的压缩图像格式。
但是，您在单击缩略图时显示全尺寸版本的想法不错。我还建议您通过 AJAX 引入大版本，这将减少您的页面所需的带宽量。如果您需要拉入大图像，您绝对应该使用 AJAX “按需”拉入它们以减少页面的负载。
【讨论】：
Michael，如果你有 2M 的图像文件，我认为将原始图像加载为缩略图不是一个好主意，在我的经验中，最好的做法是使用带有 imagemagic 或 GD 库的缩略图
1) 动态创建具有请求宽度和高度的缩略图
2) 然后将该缩略图保存到数据库中
3) 从数据库中获取图片并发送给用户
如果用户要求相同尺寸的图像，请参阅 pt。 3) 在其他情况下，请参阅 pt。 1)
【讨论】：