[Web] Responsive Images - HOWTO

2014 新年快樂！身為一個工程宅，新年第一天，當然是要來一個看起來很厲害的技術文。其實是前債還不完，欠債欠過年會衰的，所以趕快還卡實在。

對了，Caline 我愛你！

前言

Responsive Images 有很多工具可用，我 去年寫的文章 可以找到一些工具來用。當然，自幹或是自己寫輪子這件事情好像蠻蠢的，但是，這種事情做起來蠻爽的！

我們需要做的事情，

1. 產生需要的圖片
2. 前端依照需求取用

疑？我們要做的事情超少的，這樣一下就做完了耶（喂

伺服器端

我們需要準備需要的圖片尺寸，如果考量到 Retina ready 的話，還得考量 1.5x, 2x 等尺寸的圖片。如果不需要動態產出的話，我們還是可以透過 Grunt 來幫我們做這些事情（而且還是自動的呢！

Grunt Responsive Images

另外，我們除了這件事情之外，還需要的是將圖片最佳化，以減少檔案的大小，所以，還是搬出 Grunt 來做這些事情。之前在 Facebook 上面看到一個關於 Grunt 的笑話，想想 NodeJS 還真是衰（看過的就知道我在講啥。

重新壓縮圖片有這些工具可以使用，

• OptiPNG/jpegtran/gifsicle: grunt-contrib-imagemin
• ImageOptim-CLI companion: grunt-imageoptim
• WebP: grunt-webp

當然，你的主機上要使用這些工具，還是得安裝一些東西才能動，

• otpipng
• pngquant
• jpegtran
• jpegoptim
• Gifsicle
• SVGO, Grunt grunt-svgmin

另外推薦一個 JPEG 的小小工具，他是用 Perl 寫的，利用 jpegtran 來幫你壓縮 JPEG 效果比 jpegoptim 要來的好，有興趣的人可以參考一下。

• jpgcrush

瀏覽器端

除了 CSS 我們可以依照 Media Query 來設定我們所需要使用的圖片外，前端的部分該怎麼辦呢？我們有兩種解決方式，一種是直接製作該尺寸版本，不過這樣捨棄了 RWD 的開發方式。其二，是利用 JS 來替換圖片，變成我們想要的尺寸。

替換的方式其實不難，但是礙于有些事情只有 IE9+ 以上才支援，所以顯得有點惱人，

• matchMedia IE10+, iOS Safari 5.0+, Android Browser 3.0+
• getComputedStyle IE9+, iOS Safari 5.0+, Android Browser 4.0+

如果有支援 matchMedia 事情會好辦些，

(function() {
    if (window.matchMedia && window.matchMedia("(min-width: 40em)").matches) {
        /**
         * 當符合 min-width: 40em 這個條件時執行
         */
    }
})();

如果沒有支援 matchMedia 但是有支援 getComputedStyle 可以利用 CSS 作弊，

body::after {
    display: table;
    font-family: "mobile";
}

@media (min-width: 40em) {
    body::after {
        display: table;
        font-family: "desktop";
    }
}

然後使用 getComputedStyle 把我們的 CSS 給拿出來，

(function() {
    if (window.getComputedStyle) { 
        var mq = window.getComputedStyle(document.querySelector('body'), ':after');

        mq = mq.fontFamily;

        /**
         * mq 在各種尺寸會顯示出不同的結果
         * 你可以自己決定要做什麼事情
         */
    }
})();

如果需要動態改變圖片呢？嗯，這個我們留到下次再談（笑

小結

祝大家新年快樂（喂