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