圖片加載 SDK

頁面中圖片加載效果

有一種加載先變模糊然後清晰
另一種是很清晰 但逐行加載

爲什麼呢？
因爲他們的區別是壓縮算法不同

模糊到清晰的是小波算法
逐行顯示的是離散餘弦變換

瀏覽器探測到圖片本身的壓縮算法不同 再去顯示壓縮算法不同的圖片
然後用不同的顯示方式去顯示這些圖片

響應式動態圖片加載（SDK）

    <picture>
        <source srcset="smaller.png" media="(max-width:768px)"> <!-- 768像素以內顯示 -->
        <source srcset="big.png" media="(min-width:1000px)"> <!-- 大於1000像素顯示 -->
        <img srcset="default.png" alt="My default image"> <!-- 768 和 1000像素 之間顯示 默認圖片 -->
    </picture>