文字編輯器如何處理 Responsive images

剛寫了幾篇文章的時候 順便瞄了一下 wordpress 怎麼處理 responsive images 基本上如果你在 wordpress 的編輯器上上傳一張圖   他會給你一個很簡單的 img tag <img class="alignnone wp-image-2801 size-large" src="https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-1024x768.jpg" alt="" width="525" height="394" /> 這是很標準的 img 但如果文章發表出去 你會發現他有做 responsive images 他有幫你縮圖 並且縮了大中小三個版本 你會看到 code 變得很複雜 <img class="alignnone wp-image-2801 size-large" src="https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-1024x768.jpg" sizes="(max-width: 525px) 100vw, 525px" srcset=" https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-1024x768.jpg 1024w, https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-300x225.jpg 300w, https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-768x576.jpg 768w" alt="" width="525" height="394" /> 加了超多 code 上去 本來以為是存檔的時候 他會去改 img 的 tag 但你如果回去看原稿 只會有上面那段比較簡單的 所以我想他應該是 render 的時候才去塞那些東西 這也難怪 wordpress 如果不用快取的話會很慢 因為這些複雜的東西都要靠即時產生   有興趣的話可以看一下這篇文章 https://perishablepress.com/disable-wordpress-responsive-images/ 雖然他是說怎麼取消 wordpress 的 responsive images 但也是有提到詳細的 responsive images 處理流程 可以看出來 wordpress 有些函數是拿來做 responsive images

應用時機

  會想去研究這個 是因為每個案子幾乎都會有編輯器 有編輯器就會有上圖的情況 然後客人又很喜歡上很大張的圖(就算了) 還喜歡在圖片上壓字 當然壓字這種事情用縮圖是沒救的 但如果客人上大圖 卻沒有 responsive images 系統沒幫忙做小尺寸的圖 那主機頻寬真的會被吃的很慘 而且用戶體驗也會很糟糕   現在行動裝置的瀏覽量早就超過60%了 還是很多網站沒有支援 responsive images 哩 早點支援吧~