基本參數(shù)選擇

上一期我在《新媒體（公眾號(hào)）端GIF動(dòng)態(tài)圖壓縮對(duì)抗與優(yōu)化的核心方法》中，已經(jīng)提及了騰訊對(duì)微信公眾號(hào)生態(tài)內(nèi)圖床圖片壓縮的舉措，毫無(wú)疑問(wèn)靜態(tài)圖也存在對(duì)應(yīng)的壓縮機(jī)制。而關(guān)于當(dāng)下最主流的圖像「無(wú)損」上傳并展示的策略，千言萬(wàn)語(yǔ)歸納為一個(gè)核心原則：

這一參數(shù)的選擇，是基于網(wǎng)友 Denis 安的實(shí)驗(yàn)《公眾號(hào)圖片模糊？「無(wú)損」上傳秘訣在此?！?，其中詳細(xì)介紹了直接上傳 / 通過(guò) 135 編輯器 / 通過(guò) E2 編輯器上傳的實(shí)驗(yàn)結(jié)果，從一定程度上總結(jié)了公眾號(hào)圖床黑箱壓縮的機(jī)制：

而在 1080 條件下，導(dǎo)出各種格式。JPG 格式“得圖率”顯著改善，而 PNG 格式的表現(xiàn)更是震驚到我，幾乎無(wú)損。

具體條件下的圖片設(shè)計(jì)思路

當(dāng)然，1080 寬 PNG-24 是圖片在公眾號(hào)內(nèi)高清應(yīng)用的一個(gè)相對(duì)普適參數(shù)，并不代表說(shuō) 750 或 640 寬的圖一定不清楚——當(dāng)設(shè)計(jì)師能力足夠優(yōu)異時(shí)，更小的尺寸同樣可以勝任（例如喜茶公眾號(hào)的圖片寬度往往不大，但清晰感十足）。而這也就意味著，有些更進(jìn)一步的細(xì)節(jié)參數(shù)需要設(shè)計(jì)師合理控制，由此更好提升圖像的公眾號(hào)端顯示品質(zhì)。畢竟所謂「清晰度」本身是一個(gè)主觀概念，它和「分辨率」這類參數(shù)是完全不同的。

不要使用 sRGB 色值

sRGB 是由惠普和微軟共同開(kāi)發(fā)的色域制式，而我們?cè)诖蠖鄶?shù)制圖軟件中，更多可以選擇 Adobe RGB（色域范圍更廣）進(jìn)行圖片輸出。尤其是公眾號(hào)長(zhǎng)圖往往一切片一圖流形式設(shè)計(jì)，切片采用 Web 形式導(dǎo)出時(shí)，PS / AI 容易默認(rèn)勾選轉(zhuǎn)換為 sRGB 格式，所以需要取消該復(fù)選框。由此你的圖像色彩會(huì)更接近設(shè)計(jì)圖稿色彩，自然在感官上會(huì)讓你覺(jué)得「更清晰」了。否則一些顏色本身就過(guò)于相近的內(nèi)容像素，就容易產(chǎn)生色彩不準(zhǔn)確而帶來(lái)的模糊感。

不僅要切圖更要結(jié)合畫(huà)板功能

注意到有的新手設(shè)計(jì)師，無(wú)論是 PS / AI 都習(xí)慣于在一個(gè)畫(huà)板從上做到下，這相比使用 Figma 和 Sketch 的設(shè)計(jì)師就有了天然劣勢(shì)——因?yàn)?PS / AI 對(duì)超長(zhǎng)尺寸切圖會(huì)強(qiáng)制縮放，可能導(dǎo)致切片自身就無(wú)法按照你預(yù)想的寬度進(jìn)行輸出。所以平面設(shè)計(jì)師要有前端設(shè)計(jì)師的意識(shí)，通過(guò)畫(huà)板的合理分配，再結(jié)合切片來(lái)生產(chǎn)物料。

不要使用無(wú)法質(zhì)因數(shù)合理分解的寬度

這一點(diǎn)在《JZCreative：計(jì)育韜：新媒體圖像設(shè)計(jì)參數(shù)質(zhì)因數(shù)分解與屏幕物理像素的適配意義》中我已經(jīng)做了詳細(xì)的技術(shù)講解，于此不再贅述。

設(shè)計(jì)分層

有時(shí)候你會(huì)發(fā)現(xiàn)，很多畫(huà)面中如果帶有淺色的文案或其他占用像素寬度很少的紋理，在被公眾號(hào)平臺(tái)壓縮后會(huì)顯得異常模糊。這個(gè)時(shí)候其實(shí)我們完全可以通過(guò)「文案+背景」的分離形態(tài)導(dǎo)出設(shè)計(jì)文件，并通過(guò)正確的排版思路進(jìn)行疊加。疊加的方法就很多了，這里借用 @E2平臺(tái) 的一組教程：

銳化處理

如果上述方法還是不能實(shí)現(xiàn)較好的清晰度呈現(xiàn)？那么這時(shí)候也可以采用逆向思維，享著壓縮（畫(huà)質(zhì)降低）的反方向進(jìn)行畫(huà)質(zhì)增強(qiáng)。首先使用「濾鏡」-「銳化」-「銳化」進(jìn)行第一步增強(qiáng)：

隨后復(fù)制當(dāng)前圖層，再使用「濾鏡」-「其他」-「高保真反差」，數(shù)值設(shè)置 1-5 px，這一步主要是為了進(jìn)一步突出色彩邊界：

最后將這個(gè)圖層的混合模式設(shè)置為「疊加」即可。這種逆向畫(huà)質(zhì)增強(qiáng)操作，尤其時(shí)候封面圖被壓縮的情況。?

要善于總結(jié)經(jīng)驗(yàn)

不同行業(yè)的圖像設(shè)計(jì)方法各不相同，對(duì)圖像品質(zhì)的感官要求亦是天差地別，我所提到的所有知識(shí)點(diǎn)也是經(jīng)驗(yàn)的總結(jié)和積累，所以也一樣建議你多總結(jié)自己實(shí)操過(guò)程中的感悟。

只要形成了標(biāo)準(zhǔn)化的操作習(xí)慣，對(duì)像我們這一類行業(yè)資深玩家來(lái)說(shuō)，圖像模糊是完全不會(huì)存在的問(wèn)題。也衷心希望你通過(guò)本文能了解到全新的新媒體圖像處理知識(shí)，預(yù)祝你在此后的運(yùn)營(yíng)工作中一切順利！

計(jì)育韜

微信官方 SVG AttributeName 白名單開(kāi)發(fā)者
上海市信息化青年人才協(xié)會(huì)會(huì)員
上海市知識(shí)分子聯(lián)誼會(huì)會(huì)員
復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心導(dǎo)師

著有：
設(shè)計(jì)學(xué)圖書(shū)《Prezi 完全解讀：從入門到精通》
傳播學(xué)圖書(shū)《硬核運(yùn)營(yíng)：技術(shù)流新媒體養(yǎng)成》