如何在html中使用較低分辨率的圖像創建縮略圖

我有一堆高分辨率圖像（如6000x4000 jpegs），並且我製作了一個3列的圖庫（看起來像是非飛濺的圖庫）。所以我希望它是一個低分辨率縮略圖的畫廊，當我點擊它們時，我已經在新標籤中打開了完整的res圖像。我用css將包含imgs的div的寬度設置爲400px，但它隻影響頁面佈局中的外觀。我的意思是在那些400像素的div加載的圖像仍然是6000x4000，所以當我滾動時頁面凍結。我想在這些div中加載低分辨率圖像，但是在低分辨率下無需爲每個jpg創建另一個文件夾並加載它們。我的意思是我可以降低使用html，css，js，jquery，php加載到頁面的圖像的分辨率嗎？如何在html中使用較低分辨率的圖像創建縮略圖

來源

2017-05-24 Daniel Filatov

如果您已經將圖像加載到客戶端，降低分辨率沒有實際意義，您應該使用服務器端解決方案來生成小圖像，而加載速度要快得多。

來源

2017-05-24 08:20:56

你的問題的簡短答案是：不，沒有辦法改變HTML，CSS或JavaScript的圖像分辨率。

一個合適的解決方案是在將圖像部署到服務器上之前調整圖像大小：創建一個寬度爲400px的版本並保留源代碼。

然後，您可以使用您的畫廊的小版本（縮略圖），並將其包裝在指向源文件的鏈接中。

這種方式沒有人需要加載這些巨大的圖片時，訪問畫廊，因爲頁面重量大大減少，點擊用戶可以下載原始圖像（我仍然建議在這之前的6000x4000的某種警告聽起來像一個可怕的很多數據，即使是單一的圖像）。

例子：

<figure> 
    <a href="path/to/huge-source.jpg"> 
     <img src="path/to/thumbnail.img" alt="Some alternative text" /> 
    </a> 
    <figcaption>Beware: the link points to a source file with a lot of data to download (resolution: 6000x4000)</figcaption> 
<figure>

希望這有助於。

來源

2017-05-24 08:37:44

我忘了補充一點，我也知道php的基礎知識。有沒有辦法做到這一點使用PHP？ –

檢查PHP文檔：http://php.net/manual/en/ref.image.php有很多可能的解決方案。 –

如何在html中使用較低分辨率的圖像創建縮略圖

回答

相關問題