文字編輯器如何處理 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-1024×768.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-1024×768.jpg” sizes=”(max-width: 525px) 100vw, 525px” srcset=” https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-1024×768.jpg 1024w, https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-300×225.jpg 300w, https://blog.lupopi.com/wp-content/uploads/2017/10/IMG_2063-768×576.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 哩

早點支援吧~

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *