CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.
圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.
今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/
除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:
基本上, iframe 的 RWD 方法有很多種, 不過都需要在外層有個 div 來包裝出比例的尺寸, 才能達成 RWD化, 可以參考:
若只有 iframe tag 本身的話, 不在外層加裝 div 時, 如何達成呢? 可以利用這個 css 屬性: aspect-ratio
以 Youtube 的 embed code 為例:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JtFI8dtPvxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
我們將 iframe 設定以下屬性:
iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
即可順利在不外加 div tag 的條件下, 將 iframe 本身保持指定比例(如 16:9)的 RWD化.
來看看範例吧:
https://codepen.io/timhuang/pen/BaYdMmN
至於這個 CSS 屬性 aspect-ratio 的支援性如何呢? 可以看一下 can i use 網站的資料囉:
https://caniuse.com/mdn-css_properties_aspect-ratio
看起來除了 IE 外, 其他主流瀏覽器都有支援呢.