用 HTML5 video 取代動態 GIF 的 Hosting 服務...

拿「F6F — 井口裕香 @ たまゆらじお~もあぐれっしぶ~特別編 (2013-12-21) ↙:かわいい...」這篇的第一張圖來當範例。

這是原始的 GIF 版本:

這是 gfycat 的版本:

GIF 的原始大小是 1487KB (1522894 bytes),而 WebM 的大小是 151KB (154735 bytes),MP4 的大小是 147KB (151274 bytes),大約是十倍的差距?

about 頁有說明想法,可以看到檔案大小的差距。不過 GIF 已經是上個世紀發明的東西了,而且當初也不是預期現在這種用法 :p

使用 PNG 對圖片失真壓縮...

PNG 是無失真影像壓縮格式,但我們仍然可以修改 pixel (失真) 讓 PNG 壓縮率更好。今天在「PNG can be a lossy format」看到的 Mac OS X 應用程式就是這個用途。

雖然是應用程式,但作者還是有說明 algorithm 是哪些,分別是從哪裡來。其中兩個是:

文章最後,作者對 GIF 很感冒... XD

GIF has antiquated compression and it's a complete waste of bandwidth. Even lossy GIF is worse than lossless optimized PNG.

另外,JPEG/WebP 還是比較小,不過 JPEG 有很多格式,瀏覽器與作業系統的支援度還是很大的阻礙:

Whether lossy PNG gives better results than JPEG depends on the image. JPEG often gives smaller files, except when image has sharp edges (e.g. text) or any transparency (which JPEG does not support at all).

Optimized lossy PNG is still a bit larger than lossy JPEG-XR/WebP/JPEG-2K, but unlike these formats it's supported by all browsers and operating systems without any fuss or hacks.

最後發現 lossypng 是 Go 寫的,程式碼也不長,看起來頗好玩的... (也許包成 ports?)

網站上 PNG 的使用率超越 GIF...

在「The PNG image file format is now more popular than GIF」這邊看到,針對 Top 1000 網站統計發現 PNG 的使用率 62.4% 比 GIF 的 62.3% 高了:

查了一些資料發現,雖然 GIF 的專利都已經過期很久了 (Unisys and LZW patent enforcement),但 PNG 還是有很多功能與支援度的問題,最主要的兩個:(Web browser support for PNG)

  • 不支援動畫。
  • IE 在 IE8 以及之前的版本對於 PNG 的進階功能 (大多圍繞在 Gamma 上) 有一卡車的問題。

第一點實在很傷啊,大家都愛動態 GIF... XDDD

PNG 現況整理...

Does PNG work everywhere?」這篇文章把 PNG 的現況整理成表格,並且附上不少圖片範例可以看。表格包括在處理圖片常用的 Photoshop 軟體,以及常見的問題瀏覽器 IE 各版本。

如果不牽扯到 Gamma correctionICC profileMozilla FirefoxSafari (包括行動版本) 以及 Opera 對於不同格式的 PNG 都沒有什麼問題... 就這部份的結論是,IE6 只能用最基本的 PNG 格式,但如果同意讓 IE6 看到比較差的效果 (不是看不到),不少格式可以用。

另外作者也不斷地再推廣使用 PNG 最佳化程式處理 PNG 檔,以節省空間。文章後面的 Troubleshooting 以及 Summary 章節很值得仔細看過一次,在腦袋裡面留下印象...