文字編輯器如何處理 Responsive images
2017 Oct 30 未分類
剛寫了幾篇文章的時候 順便瞄了一下 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
