手机模拟器上的图像不响应

Question

我想为宠物项目制作一个超级优化的网站。需要调整图像，以便在 PC 屏幕上显示高分辨率图像，在手机屏幕上显示小图像。

我制作了一个响应式图像，它根据用户窗口的像素改变大小，在PC上一切正常，但是当我在开发者模式下打开手机模拟时，一切都不能很好地工作：图像不适应，结果，DOM 中加载的不是 300 KB，而是 1.2 MB，这些在几秒钟内都是巨大的数字，尤其是在 3G 网络的情况下。

自从开始学习WEB以来我就遇到了这个问题，我尝试在Firefox和Chrome这2种浏览器上解决它 - 它并没有消失。解决问题的秘诀是什么？

<img 
 srcset="
 assets/images/image-1280.jpg 1280w, 
 assets/images/image-3840.jpg 3840w"
 src="assets/images/image-3840.jpg" 
 width="100%"
 alt="Cyber Prototype" >

响应错误

如果图像大于1280px

如果图片小于1280px

---

附注我知道我可以使用 元素，但是有没有更优雅的解决方案？

我尝试应用 srset

我希望我的图像能够适应手机

结果，我的图片不适应手机，并给用户系统加载了不必要的大图片

Answer 1

尝试指定

sizes

属性，例如

<img 
  srcset="assets/images/image-1280.jpg 1280w, assets/images/image-3840.jpg 3840w"
  sizes="(max-width: 600px) 480px, 800px"
  src="assets/images/image-3840.jpg" 
  width="100%"
  alt="Cyber Prototype">

参考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images