WebP~大圖片小空間

因緣巧合發現了WebP格式
大小比png小了大概1/3(保守估計),
圖片失真也還在可接受範圍(反正平庸的我可以接受!)

小小閒聊遇到的問題~

1. 轉檔
搜尋一下網路上蠻多提供線上轉檔
但缺點是不是限張數就是限流量,
於是尋找了一下離線轉檔:
------
離線轉檔:(png->WebP)
載點: http://www.romeolight.com/products/webpconv/
------

2. 支援問題
部分瀏覽器(像IE)與手機系統(iOS)不支援WebP格式
------
相關支援網站: https://caniuse.com/#feat=webp
------
很想直接心一橫放棄不支援的,
但想當然這是不被允許的~XDD
只好做個判斷,支援的我們再使用WebP格式:

function IsWebPSupport():boolean
{
    var d = document;
    var supportWebP;

    try {
        var ele = d.createElement('object');
        ele.type = 'image/webp';
        ele.innerHTML = '!';
        d.body.appendChild(ele);
        supportWebP = !ele.offsetWidth;
        d.body.removeChild(ele);
    }catch (err) {
        supportWebP = false;
    }

    return supportWebP;
}