我需要一个头像图片，在手机上为30x30，在平板电脑/台式机上为40x40。对于非视网膜和视网膜屏幕，它也必须是@ 1x和@ 2x尺寸。
我正在尝试这段代码：
<img
srcset="mobile.jpg 30w,
desktop.jpg 40w,
mobile@2x.jpg 60w,
desktop@2x.jpg 80w
"
sizes="(min-width: 768px) 40px, 30px"
src="desktop.jpg"
>
它在Firefox，Safari和Edge中完美运行。它在Opera中根本不起作用。在MACOSX上的Chrome中，只有在我运行开发人员工具时它才有效。在Windows上的Chrome中，它一直工作，直到我打开开发人员工具。
当我说它不起作用时，我的意思是浏览器总是获得最大的图像。从另一方面来看，它们会改变页面大小的正确性。
首先我想知道的是我的代码是否正确？也许我只是不明白并做错了什么？
感谢。
UPD：我试图创建小提琴或笔，但加载图片时遇到一些麻烦。无论如何这里是一个链接：http://codepen.io/shchukin/pen/yJbaLA
答案 0 :(得分：1)
Chrome和Opera有一个源选择算法，有利于缓存的图像候选。这应该解释为什么你总是看到最大的负载。
关于你的一般目的。对于始终低于100像素的图像，srcset并没有太大意义。 40像素和80像素之间的差异很小。简单地为所有用户提供60或80像素的图像，它应该没问题。