向网站添加缩略图答案

【问题标题】：Adding thumbnails to websites向网站添加缩略图
【发布时间】：2016-09-29 23:40:55
【问题描述】：

所以我正在学习如何通过构建图片库来制作网站。

我使用的图片很大，所以意识到我可以为缩略图放入调整大小的图片并决定使用 500px 宽度的图片

这些缩略图在移动设备上看起来很清晰，在平板电脑上还可以，但在台式机上却很模糊。
所以我认为手机和平板电脑需要 500 像素，但桌面设备需要 700 像素。

所以这给我留下了在运行时在两者之间进行选择的问题。

据我了解，我可以通过两种方式做到这一点。

或者有其他方法吗？那么这两种方法中哪一种更好或缺点更少呢？

我猜“2”会更好，因为即使禁用 javascript 也能工作
如果有任何帮助，我正在使用 Perl Dancer2

【问题讨论】：

可以选择 CSS 吗？如果是这样，我建议您查看媒体查询，因为您可以定义一个类，如果浏览器宽度小于 800 像素，则图像宽度为 500 像素，如果浏览器宽度 >= 800 像素，则图像宽度为 700 像素（这些宽度只是一个例子）。
这篇文章有一些有用的资源：@987654321@
@Shoeless 我现在实际上正在使用它来调整元素的大小以适应屏幕。但它对决定选择哪个缩略图有何帮助？据我了解，如果我在 css 中给出 500px，它仍然会下载大文件并在屏幕上将其缩放到 500px
啊，我明白了；我以为您正在调整相同图像的大小。如果您想使用 CSS 加载不同的图像，我建议您查看 SRCSET。

【解决方案1】：

我认为最好的选择是使用媒体查询，如here所示

您始终可以在 html 中写入两种尺寸，但使用媒体查询时只会显示一种。

其他方法是使用 javascript 获取窗口的高度和宽度，您将知道正在使用网络的客户端的分辨率，因此您可以附加到图像 _full 或 _low 以区分这种情况。

我不建议您使用 UserAgent，因为有些旧 PC 的分辨率低于实际的移动设备，所以我认为使用窗口的 dpi/分辨率会更好。

你有一些媒体查询的例子here

【讨论】：

【解决方案2】：

既然您说图像不是缩放，而是被替换，我建议您使用 SRCSET，它允许您根据像素密度和宽度定义不同的图像。 SitePoint provides a good overview.

这是他们文章中的一个示例：

<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />

【讨论】：