自適應 RWD 圖片語法產生器﹍Picasa 圖床專用

自適應 RWD 圖片語法產生器﹍Picasa 圖床專用

A+
rwd-image-generator-picasa.jpg-自適應 RWD 圖片語法產生器﹍Picasa 圖床專用之前「Picasa 圖床的獨家應用:製作 RWD 自適應圖片」詳細介紹了 IMG 標籤如何設定 srcset 屬性,讓網頁可根據各種螢幕寬度載入不同尺寸的圖片,手機、行動裝置就能縮短網頁載入時間。

同時全世界的圖床,只有 Picasa 可以做到,上傳一張圖片後,修改網址參數,就能成為任意尺寸的圖片。他的好處是,可利用程式自動產生指定尺寸的圖片網址,搭配 srcset 就能產生自適應 RWD 圖片語法。

那麼只要你是 Blogger 站長,從後台上傳、存放在 Picasa 的圖片,就能使用這個 WFU 製作的「自適應 RWD 圖片語法產生器」。

本篇會介紹如何操作這個簡單方便的工具,可點以下連結前往:





一、使用說明


rwd-image-generator-picasa-1.jpg-自適應 RWD 圖片語法產生器﹍Picasa 圖床專用

操作順序依上圖 A~E:

A. 紅框處可填入多個不同螢幕寬度的 px 數值,如果對 srcset 熟悉的話可自行修改。若不熟悉的話,用預設值就可以了。

最多可填入 5 組,不需要的也可取消勾選。


B. 這一區可自動產生 IMG 標籤的 ALT 描述內容,產生的規則從畫面中的選項很容易就能瞭解。

需要詳細說明的話請參考「圖片 ALT 描述自動產生器」。


C. 這一區可對 A、IMG 標籤的其他屬性進行加工,詳細說明可參考「Blogger 圖片語法轉換器


D. 以上參數都設定好了之後,將來這個轉換器的操作非常簡單且直覺。首先進入 Blogger 後台 → 編輯文章 → 切換到「HTML」模式 → 複製全部內容


rwd-image-generator-picasa-2.jpg-自適應 RWD 圖片語法產生器﹍Picasa 圖床專用

接著將全部內容貼入上圖左邊「貼上 html 碼」這個區塊


E. 如上圖,右邊的「轉換結果」區塊會自動出現轉換結果,並自動全部選取。此時只要按下 Ctrl + C 複製,再貼回文章中存檔即可。

文章中無論有多少張圖片,都會一次處理完畢。




二、注意事項


1. 請注意 Picasa 圖片產生的時間點

大約是今年年初「Blogger 推出全新自適應 RWD 官方範本」的那個時間點,Blogger 後台上傳的圖片,IMG 格式多了一個屬性 data-original-width,用來紀錄原始圖片的寬度。而以往上傳的圖片(例如今年 2017 以前),我們無法得知圖片的原始寬度。

這個工具需要利用原始圖片寬度,才能運算出最佳解的 RWD 圖片語法

所以請站長特別注意:

  • 使用本工具前,務必先檢查你的圖片有沒有 data-original-width 屬性
  • 若是沒有的話,使用本工具將無法產生正確的 RWD 圖片語法。
  • 要處理舊的文章圖片,建議改用「Blogger 圖片語法轉換器


2. 轉換固定寬度圖片

舊版的圖片轉換器,可以將所有圖片轉換為同樣寬度,這其實也是滿實用的功能,也許不少站長滿需要的。

但是同樣寬度的圖片,就不一定適合 RWD 了,因此兩種轉換器是互斥的。

那麼不需要 RWD,比較需要相同寬度圖片的站長,有兩種建議:

  • 使用 XnView 這套軟體,可以批次轉換所有的圖片尺寸,然後再上傳到 Blogger。
  • 使用舊版「Blogger 圖片語法轉換器


3. 自動記憶

這個工具使用了「自動記憶表單狀態外掛」,因此只需要第一次設定完所有參數,將來再進入網頁都不必再重新設定,非常方便可安心使用。


更多網站工具推薦:

2 則留言:

  1. 您好,

    自動記憶表單狀態外掛
    http://www.wfublog.com/2017/09/form-remember-status-jquery-sisyphus.html

    這個連結沒辦法連耶?出現了404?
    站內搜尋也找不到這篇文章

    回覆刪除
    回覆
    1. 這是過一陣子後,排程中的文章,不好意思~ ^^"

      有時相關文章互相引用相關連結時,就會發生這樣的麻煩..XD

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP