响应式图片，在手机上提供，可下载原版

Question

我希望标题不要太混乱。

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

现在...有些人希望将图像保存在他们的手机/智能手机上，但使用自适应图像来提供更小尺寸的图像（以节省带宽/下载时间），使其具有更小的缩放图像 - 而不是一个很好的大小或原始图像。

有没有人有关于以下任何想法？

1. 服务了缩放的图像
2. 具有原始可用的，如果人们想保存它们

Answer 1

从自适应数字图像网站：使用

它创建并管理自己的缩放后的图像您的“现有图片作为来源”，并且它将适用于您的网站用于响应式设计中使用的CSS3 @media查询的相同分辨率括号。

您的图像仍然是“来源”，它只是适应它们的查看。尝试下载图像并查看属性。它将保留原始尺寸，I've linked a jsFiddle demonstrating how @media queries work。如果缩小屏幕并尝试下载图像，则会在适当缩放的同时看到“原始”属性。

@media查询：

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