缩小图像尺寸并保持 100% 宽度

Question

我的网站上有一些图片是从图片托管网站链接过来的。所有图像都要求宽度为 100%。但是，某些图像的像素非常大，因此加载速度很慢。我如何设置样式以减少图像的像素，同时将图像保持在 100% 宽度以加快加载速度？比如固定水平像素为1440px，调整垂直像素保持100%宽度？

Answer 1

您对托管在别处的图像几乎没有控制权。一些替代想法：

• 将它们缓存在另一台服务器上并从那里加载

• 预加载以获得更快的结果（如果图像“在首屏上”可能不起作用）link rel="preload" 究竟是如何工作的？

• 使用<picture>标签根据屏幕尺寸指定不同的图像：使用图片标签加载图像

• 首先加载占位符图像：如何在加载实际内容之前加载一个小的占位符图像

Answer 2

您需要为每张图片提供 2 个版本，一个具有原始尺寸，您可以在用户请求下载照片时使用它，另一个用于显示和 UI，这将使您的页面加载速度更快，数据带宽更少。