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

Question

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

Answer 1

您对托管在别处的图像几乎没有控制权。一些替代想法：将它们缓存在另一台服务器上并从那里加载预加载以获得更快的结果（如果图像“在首屏上”可能不起作用）link rel="preload" 究竟是如何工作的？使用<picture>标签根据屏幕尺寸指定不同的图像：使用图片标签加载图像首先加载占位符图像：如何在加载实际内容之前加载一个小的占位符图像

Answer 2

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