【发布时间】：2020-08-02 20:52:21
【问题描述】：
我的网站中有一些图片链接自图片托管网站。所有图片都需要 100% 的宽度。
但是，有些图像的像素非常大，因此加载速度很慢。
如何设置样式以减少图像的像素，同时将图像保持在 100% 宽度以加快加载速度？
比如固定水平像素为1440px，调整垂直像素保持100%宽度？
【问题讨论】：
标签： javascript html css image
【发布时间】：2020-08-02 20:52:21
【问题描述】：
您对托管在其他地方的图像几乎没有控制权。一些替代想法：
- 将它们缓存在另一台服务器上并从那里加载
- 预加载以获得更快的结果（如果图像“首屏”，这可能不起作用）How exactly does link rel="preload" work?
- 使用
<picture>标签根据屏幕尺寸指定不同的图像：load images using the picture tag - 首先加载占位符图像：How to load a small placeholder image before loading the actual content
【讨论】：
您需要为每张图片提供 2 个版本，一个具有原始大小，您可以在用户请求下载照片时使用它，另一个用于显示和 UI，这将使您的页面加载更快、更少数据带宽。
【讨论】：