快速解決GIF圖的鋸齒問題

2023-12-16 17:23:39 來源/作者: / 己有:1人學(xué)習(xí)過

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

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

快速解決GIF圖的鋸齒問題

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

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

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

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

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

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

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

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

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

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

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

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

快速解決GIF圖的鋸齒問題

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