響應式圖片，在手機上提供，可下載原版

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; 
    } 
}