日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > 快速解決GIF圖的鋸齒問題

快速解決GIF圖的鋸齒問題

時間:2024-03-07 10:31作者:下載吧人氣:24

騰訊某位同學設計的動態表情上線后,發現鋸齒問題特別嚴重,向工程師請教,前端小哥拿出自家研究的神器,立刻解決了問題,而且還可以批量搞定喲,已經有大量好評了,現在知道還來得及!

設計師:怎么我設計的動態表情,上線以后周圍多了這么多白色的噪點!

快速解決GIF圖的鋸齒問題

全部動態表情地址:http://isparta.github.io/compare/#15

前端:GIF本來就會有鋸齒,跟我沒關系呀。

設計師:太丑了,你不是萬能的前端么?這個問題我用ps解決都是分分鐘的事情呀!

前端: ……(you can you up) 其實,在很久很久以前…

2004年,mozilla社區也意識到這個問題,所以當時他們提出了一種新的圖片格式——APNG。

APNG又叫動態PNG(Animated PNG),第1幀為標準PNG圖像,剩余的動畫和幀速等數據放在PNG擴展數據塊里,因此只支持原版PNG的軟件會正確顯示第1幀。更多資料請查看:wikipedia.org

由于APNG是PNG的擴展,所以它支持半透明,自然就不會有鋸齒的問題。設計師:能說人話么?

前端:- -!?APNG比GIF牛逼多了,媽媽再也不用擔心鋸齒的問題了。

設計師:那就趕緊用起呀!

這時產品出現了…

產品: 不會有鋸齒,那是不是APNG會比GIF的體積大呀!

前端:just try it…拿一組圖片進行測試,會發現有些APNG比GIF要大,如下圖:

快速解決GIF圖的鋸齒問題

再通過大批量的圖片對比可以發現,APNG平均會比GIF的體積大一點點(3%左右)。更多請查看:http://isparta.github

產品:只是大一點點而已,那也很不錯了呀!

前端:卻多嘛得,如果APNG可以比GIF還要小,這樣用戶體驗不就更好了。先看看APNG的原理:

前方燒腦,做好準備。

APNG對于動態圖片的處理算法類似GIF,可以將一組大小相同的PNG圖片合并為一張APNG圖片,原來的每一張PNG圖片變成APNG圖片的每一幀,并且每一幀會按照約定的規則來記錄與前一幀變化區域的數據到相應數據塊,并保存變化區域在圖片中的坐標與大小(如圖一所示)。解析的時候,應用程序會根據每一幀變化區域的坐標和大小,將變化區域替換前一幀的相應區域來還原當前幀,從而生成動態圖片,并達到壓縮效果。說起來有點繞口,直接看下面的圖會更清晰些:

快速解決GIF圖的鋸齒問題

由于鄰近幀間共用了相同的像素信息,所以可以有效節省動態圖片的體積。

而由于我們生成APNG的圖片是PNG24(為了保證Alpha通道),而PNG24與GIF相比,體積上本來就沒有優勢,所以生成的APNG自然也沒有優勢。

不就是PNG24比較大嘛,那就將PNG24先有損壓縮(pngquant),再轉換為APNG不就可以了,喜大普奔呀!^_^最后按這種方式折騰出來了,卻發現APNG比之前更大了(如下圖)!- -,知道真相的我眼淚掉下來呀!請查看:isparta.github?的對比。

快速解決GIF圖的鋸齒問題

仔細想了一下,因為我們對PNG24進行了有損壓縮,造成圖片信息的重新排布,本來跟臨近幀相同的區域不同了,自然輸出的圖片大小也會比較大。

所以我們只能對跟臨近幀不同的區域進行壓縮,具體過程見下圖:

快速解決GIF圖的鋸齒問題

按照這種方式優化以后,生成的APNG的大小平均會比GIF小30%左右,而且也能解決鋸齒問題(如下圖):

快速解決GIF圖的鋸齒問題

點擊?isparta.github.io?并在chrome下打開可以有更直觀的感受。

設計:雖然不知道你在說什么,但是感覺很厲害的樣子!

前端:其實簡單來說,就是APNG比GIF小30%左右,而且沒有鋸齒。

設計:那現在我們可以使用么?會有什么限制么?

前端:額,APNG的平臺兼容性不是特別好,不過也是有辦法解決的。APNG的經歷還是蠻忐忑的,而且最后還是沒有形成標準,所以很少應用程序(對于瀏覽器,目前有firefox與opera支持,還有IOS8下的Safari)支持這種格式,但是不支持的應用程序會顯示APNG的第一幀。

對于原生應用,我們可以根據?官方說明文檔?(https://developer.mozilla.org)編寫解碼邏輯,目前PC QQ客戶端已經支持APNG。

對于HTML5應用,已經有比較成熟的開源框架?apng-canvas(https://github.com)可供使用,我們在近期的『禮物』項目中就使用了APNG,做到了精細的動畫體驗(如下圖):

快速解決GIF圖的鋸齒問題

產品:那怎么生成APNG呢?如果有大批量的圖片需要轉換怎么辦?

前端:這個不用擔心,由于業內暫時沒有APNG批量有損壓縮的工具,所以我們就自研了iSparta圖片轉換工具,它有以下特性——

1,批量處理

根據規則對文件和文件夾進行批量轉換。具體操作請查看(isparta.github.io)。

2,APNG有損壓縮

直接集成PNG的有損壓縮,可以將文件體積降低到最小(一般輸出的文件比GIF小30%左右)。

3,跨平臺

支持windows和Mac系統。

快速解決GIF圖的鋸齒問題

可以點擊 http://isparta.github?下載體驗, 目前該工具也在github(https://github.com)上開源了,關于工具的建議與bug可以在issues(https://github.com)上反饋,也歡迎大家的加入。

任何事情都不是一成不變的,有時候只要跳出常規,再認真一點點,這個世界其實可以更美好!

再回眸,麗影如初…

標簽ps基礎教程,理論教程,ps理論,ps知識,ps技巧

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 免费观看成人久久网免费观看 | 日韩美女大全视频在线 | 精品国产三级a∨在线观看 精品国产三级a在线观看 | 国产三级观看 | 亚洲欧美一区二区久久香蕉 | 欧美性另类69xxxx极品 | 成人高清视频免费观看 | 欧美黄成人免费网站大全 | 亚洲毛片在线 | 视频二区 中文字幕 欧美 | 国产一级毛片网站 | a级一片| 免费一级大片 | 免费国产午夜高清在线视频 | 九九99精品 | 一区二区三区在线 | 欧 | 午夜性色福利视频在线视频 | 中文字幕精品在线观看 | 亚洲男人天堂2018 | 亚洲男人第一天堂 | 亚洲国产欧美日韩 | 亚洲午夜网站 | 99热成人精品热久久66 | 国产精品精品国产 | 成人爽a毛片在线视频 | 国产成人一区二区三区高清 | 91久久国产精品视频 | 日本美女黄网站 | 免费视频成人国产精品网站 | 99视频免费在线观看 | 性午夜 | 亚洲精品天堂一区在线观看 | 日本视频播放免费线上观看 | 怡红院免费的全部视频 | 亚洲视频中文字幕在线 | 在线亚州 | 黄色毛片免费 | 成人禁在线观看午夜亚洲 | 亚洲国产爱久久全部精品 | 免费一区二区三区四区五区 | 久久99国产亚洲高清观看首页 |