我需要調整一堆大圖像的大小并使它們變小。原件大約為 2500x3800，我需要將它們縮小到大約 400x650（我保持確切的縱橫比，這些只是一些粗略的示例數字）。我目前正在使用 PHP imagecopyresampled()、imagejpeg()和imagepng(). 當我以這種方式調整它們的大小時，客戶對生成的圖像質量不滿意 - 它們有點模糊。我使用的兩個最高質量的選項imagejpeg()和imagepng()（即100和0分別）。那么我怎樣才能縮小這些圖像的大小并獲得比上面產生的更好的質量呢？PHP 中有更好的選擇嗎？我應該使用不同的工具/語言嗎？一個 SO 問題建議多次調整大?。ɡ?，首先將大小調整為中等大小，然后再將其調整為小版本）。這種方法有什么好處嗎？有趣的是，我在不同的網頁上以更小的尺寸顯示相同的調整大小的圖像。我使用 HTML/CSS 將它們縮小了大約 10-20%。當我這樣做時，客戶對質量感到滿意。因此，如果您使用 HTML/CSS 稍微減小瀏覽器中的圖像尺寸，似乎有一種方法可以提高圖像質量。我應該使用這種方法嗎？這聽起來不是個好主意。
3 回答
長風秋雁
TA貢獻1757條經驗 獲得超7個贊
為了適當的下采樣，以減少混疊的方式，圖像必須通過低通濾波（即模糊?。┻M行頻帶限制。
該函數imagecopyresampled似乎不會執行這種模糊（而是進行插值，僅適用于上采樣）。您可以使用函數 實現模糊效果imageconvolution，所有系數都等于1，并應用兩遍或三遍。只有這樣你才能使用imagecopyresampled.
你會認為我瘋了，因為據說圖像太模糊了，但我敢打賭，你的客戶所說的模糊實際上是別名。
牧羊人nacy
TA貢獻1862條經驗 獲得超7個贊
這主要是由于視網膜顯示器的高分辨率。
CSS 像素是瀏覽器使用的抽象單位。CSS 像素是獨立于設備的像素。它們將自己重新調整為呈現它們的屏幕的像素密度。
如果我們有以下代碼：
<div style=”width:250px; height:400px”></div>
上面的組件在標準顯示器中看起來是 250 像素 x 400 像素，而在 Retina 顯示器中是 500 像素 x 800 像素。
在這種情況下，您有兩種選擇 1. 您始終可以使用 2x 大小的圖像并使用 css 樣式或設置 img 寬度和高度顯示為 50% 2.更好的方法：假設您想顯示 250px x 400px 的圖像，有一個在服務器中大小為 500 像素 x 800 像素的備用圖像，并在網頁提供給 Retina 顯示器時呈現它們。
例如第二個選項的代碼
/* low resolution display */
.image {
background-image: url(/pathTo/lowResImg.png);
background-size: 250px 400px;
}
/* for retina display */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.image {
background: url(/pathTo/highResImage.png) no-repeat;
background-size: 250px 400px;
}
}
希望這可以幫助。
- 3 回答
- 0 關注
- 205 瀏覽
添加回答
舉報
0/150
提交
取消