把動畫GIF直接轉為HTML5影片的免費轉檔及圖片寄存服務《gfycat.com》,大幅加快載入的速度!

0
16,745 人次

image

GIF是一種已經使用超過23年的影像格式,儘管它只能顯示256色,不過還是有不少人在網頁中使用GIF動畫。不過GIF動畫有一個嚴重的缺點就是檔案太大,相當浪費網路的頻寬。今天阿正老師要介紹的這個網站「gfycat.com」就是一個能直接將GIF動畫轉為HTML5格式的網路服務,不但能大大將檔案容量縮小到原來的五分之一以內,還提供了圖片寄存的服務(類似免費圖片空間),能讓網頁載入的速度加快,甚至能控制動畫的播放(快慢轉/倒帶),另外還提供了Firefox跟Chrome的套件方便直接轉檔,是個相當有趣而且方便的服務,大家快來玩玩看吧!

GIF是一種相當古老的影像格式,早在1989年制定的GIF 89a版本就加入了透明色及動畫的功能,一直沿用到今已經超過23年了,不過還是有不少人在網頁中使用GIF動畫,一來是製作方便(可透過軟體直接將影片轉為GIF,例如格式工廠),二來是瀏覽器不需安裝任何外掛即可看到GIF動畫效果。不過GIF動畫的容量實在太大了,如果放在網頁中會相當佔網路頻寬。

隨著HTML5的盛行,新一代的瀏覽器已經不需安裝外掛套件即可直接播放HTML5的動畫,而阿正老師今天要介紹的這個gfycat.com就是一個將GIF動畫圖片直接轉檔為HTML5影片的服務,優點在於能大大縮小影片的容量,大幅縮短網頁載入的時間,而且還提供了圖片寄存的服務(類似免費圖片空間),並使用了Amazon的CloudFront CDN服務,載入速度更是超快,是個非常好用的免費網路服務。

我們先來看看GIF動畫圖片跟使用gfycat轉為HTML5的比較,可看到HTML5的檔案明顯變小許多,而且播放速度也更加流暢。

GIF原圖(5MB):

Gfy影片(約1MB):

 

使用方式

 

gfycat

 

1.先用瀏覽器開啟http://gfycat.com/網站,可看到畫面中央有個計數器,表示目前已經節省的網路頻寬。如果你想直接轉換網路上的圖片,就按下〔Fetch a URL〕並貼上圖片的網址來轉檔,也可以按下〔Upload your .gif〕直接上傳電腦中的GIF動畫圖片。

image

2.接著可看到目前轉檔的進度,等藍色的進度列跑到最右邊就表示轉檔完成。

image

3.轉成HTML5後的結果如下圖,左下角會顯示轉檔前後的檔案大小,右邊則提供切換回GIF動畫檢視(Switch to Gif)及產生動畫連結(LINKS)兩個按鈕,影片的右下角還有個播放控制選單。

image

4.在播放控制選單中提供暫停、倒帶、慢轉及快轉…等四個功能,這都是原本GIF動畫做不到的。

image

5.按下「LINKS」後,可產生gfy及gif連結,也能用iframe或embed等方式將HTML5動畫嵌入到你的網頁之中。

image

 

瀏覽器套件

目前gfycat提供了Firefox及Chrome兩種瀏覽器的擴充套件,可讓你直接將網路上的GIF圖片轉為HTML5動畫。

1.Firefox

 

Firefox套件下載:[Mozilla套件庫]

image

2.Chrome

 

Chrome套件下載:[Chrome線上應用程式商店]

image

安裝完套件之後,只要在網頁上看到GIF動畫圖片,在圖片上面按下滑鼠右鍵並點選【Fetch Gfycat of Image】就能直接進行轉檔了,非常好用喔!

image

你的網頁上還有龐大的GIF動畫嗎?快來試試看gfycat.com這個新奇好玩又實用的免費服務吧!

###

發表迴響