Question

我需要通过缩略图实现图片预览。现在我不确定如何实现它。

一种选择是直接使用CSS，所以像这样：

.thumbnail {
  background-image: url(path/to/image);
  background-size: 300px, 400px;
}

这有用吗？有任何性能问题吗？

Answer 1

如果您将CSS中的图像缩放到实际尺寸，浏览器仍然需要下载相同数量的数据。您应该使用缩略图创建单独的文件。

Answer 2

对于图像，您需要关注三件事：大小，格式和src属性。

图片尺寸

超大图像需要更长时间才能加载，因此保持图像尽可能小是很重要的。使用图像编辑工具：

将图像裁剪为正确的尺寸。例如，如果页面宽度为570px，请将图像调整为该宽度。不要只上传2000px宽的图像并设置宽度参数（宽度=“570”）。这会减慢页面加载时间并导致糟糕的用户体验。将颜色深度降低到可接受的最低水平。删除图片评论。

图片格式

JPEG是您的最佳选择。 PNG也很好，但旧版浏览器可能不完全支持它。 GIF应仅用于小型或简单图形（小于10×10像素，或3种或更少颜色的调色板）和动画图像。不要使用BMP或TIFF。

Src属性

如果您的尺寸和格式正确，请确保代码也正确。特别是，请避免使用空图像src代码。

在HTML中，图像代码包括：

当引号中没有源时，浏览器会向页面目录或实际页面本身发出请求。这可能会给您的服务器增加不必要的流量，甚至会损坏用户数据。

专业提示：在上传图像之前，请花时间重新调整图像大小。并始终包含带有效URL的src属性。

为确保您的图片快速加载，请考虑将WP Smush.it插件添加到您的网站。