响应式图片，在移动设备上提供小型服务，可下载为原始

Question

我希望标题不会太混乱。

我正在使用自适应图像来检测访问者的屏幕大小，并自动创建，缓存和提供网页嵌入式HTML图像的适当重新缩放版本的设备/断点。

现在......有些人想在他们的手机/智能手机上保存图像，但使用自适应图像提供较小尺寸的图像（以节省带宽/下载时间）可以获得更小的缩放图像 - 而不是大小合适或原始图像。

有没有人对以下内容有任何想法？

1. 提供缩放图像
2. 如果人们想要保存原件，可以使用原件

Answer 1

来自Adaptive Images网站：

  

它使用您现有的＆＃34;现有图像作为来源创建和管理自己的已调整大小的图像，＆＃34;它将适应您的网站使用响应式设计中使用的CSS3 @media查询所使用的相同分辨率括号。

您的图片仍然是＆＃34;来源＆＃34;，它只是让它们适合观看。尝试下载图像并查看属性。它将保留原始尺寸I've linked a jsFiddle demonstrating how @media queries work。如果缩小屏幕并尝试下载图像，您将看到＆＃34;原始＆＃34;适当缩放时的属性。

@media query：

@media screen and (max-width: 480px) {
  #lincoln img {
    height: 100px;
    width: 150px;
  }
}