快速解決GIF圖的鋸齒問題

2024-01-02 17:15:42 來源/作者: / 己有:0人學(xué)習(xí)過

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

設(shè)計師:怎么我設(shè)計的動態(tài)表情,上線以后周圍多了這么多白色的噪點!

快速解決GIF圖的鋸齒問題

全部動態(tài)表情地址:https://img.lvups.com/d/file/bigpic/2022/12/26/h0kj2rvtlb4

前端:GIF本來就會有鋸齒,跟我沒關(guān)系呀。

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

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

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

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

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

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

設(shè)計師:那就趕緊用起呀!

這時產(chǎn)品出現(xiàn)了…

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

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

快速解決GIF圖的鋸齒問題

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