快速解決GIF圖的鋸齒問題
騰訊某位同學設計的動態(tài)表情上線后,發(fā)現鋸齒問題特別嚴重,向工程師請教,前端小哥拿出自家研究的神器,立刻解決了問題,而且還可以批量搞定喲,已經有大量好評了,現在知道還來得及!
設計師:怎么我設計的動態(tài)表情,上線以后周圍多了這么多白色的噪點!
全部動態(tài)表情地址:https://img.lvups.com/d/file/bigpic/2022/12/26/h0kj2rvtlb4
前端:GIF本來就會有鋸齒,跟我沒關系呀。
設計師:太丑了,你不是萬能的前端么?這個問題我用ps解決都是分分鐘的事情呀!
前端: ……(you can you up) 其實,在很久很久以前…
2004年,mozilla社區(qū)也意識到這個問題,所以當時他們提出了一種新的圖片格式——APNG。
APNG又叫動態(tài)PNG(Animated PNG),第1幀為標準PNG圖像,剩余的動畫和幀速等數據放在PNG擴展數據塊里,因此只支持原版PNG的軟件會正確顯示第1幀。更多資料請查看:wikipedia.org
由于APNG是PNG的擴展,所以它支持半透明,自然就不會有鋸齒的問題。設計師:能說人話么?
前端:- -!?APNG比GIF牛逼多了,媽媽再也不用擔心鋸齒的問題了。
設計師:那就趕緊用起呀!
這時產品出現了…
產品: 不會有鋸齒,那是不是APNG會比GIF的體積大呀!
前端:just try it…拿一組圖片進行測試,會發(fā)現有些APNG比GIF要大,如下圖:
再通過大批量的圖片對比可以發(fā)現,APNG平均會比GIF的體積大一點點(3%左右)。更多請查看:http://isparta.github
上一篇:所有PS的快捷鍵