2015年4月7日

Blogger 圖片語法轉換器﹍改變行動版圖片尺寸

A+
online-converter-tool從這篇「加快 Blogger 行動版圖片載入速度」我們瞭解到,Blogger 有辦法讓行動版的圖片改用小尺寸,進而讓網頁載入速度非常有感地提升,只要符合這兩個要件:

1. 使用 PICASA 圖床
2. 為每張圖片設定寬度


手動設定圖片寬度的方法,請參考該篇文章的操作說明,但這個流程是不方便的,無法批次處理。WFU 製作這個「Blogger 圖片尺寸轉換器」後,可縮短處理的時間,將文章中所有圖片語法一次轉換。

使用說明及介紹請見後述內容,下面這個按鈕可前往轉換器頁面,也建議將這個連結拖曳到書籤列(或加入書籤):




一、使用說明


如果一切使用預設值的話,那麼這個轉換器的操作非常簡單且直覺。首先進入 Blogger 後台 → 編輯文章 → 切換到「HTML」模式 → 複製全部內容


blogger-image-html-converter

接著將全部內容貼入左邊「貼上 html 碼」這個區塊,如上圖,右邊的「轉換結果」區塊會自動出現轉換結果,並自動全部選取。此時只要按下 Ctrl + C 複製,再貼回文章中存檔即可。

從上圖紅線的部分可看到,使用預設選項時,會自動產生:
  • 「另開視窗」的語法 target="_blank"
  • 改變圖片實際寬度為 640px
  • 設定圖片 CSS 為寬度 640px

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

這個轉換工具的優點是,你設定過的選項、填入的資料都會自動記憶,因此將來只要使用同一個瀏覽器,都不必再重複設定

如果需要調整選項設定的話,請參考下圖,並繼續往下看。

blogger-image-converter-option



二、圖片寬度(px)


每個人的文章區塊寬度設定都不一樣,請根據自己的版面來選擇適當的寬度。預設的三個尺寸是根據 Blogger 文章編輯器中的選項,如果你勾選了 400,代表所有轉換後的圖片,都會以 400px 寬來呈現。

一般兩欄式的部落格,使用預設值 640px 就差不多了;三欄式的部落格,文章區塊比較小,或許可選擇 400px。但如果你的部落格版面設定非常寬,例如使用全版面、沒有側邊欄的話,那麼就需要改用自訂寬度,例如填入 1000 或更大的數字了。



三、A 標籤(超連結)



1. A 標籤

第一個選項「有 A 標籤的圖片才處理」,適用於你有某些圖片不想設定寬度時,就能派上用場了。

例如有的網站會使用表情圖案、或是某些文章需要小 logo 點綴,在這種情況下,如果把這些小圖示設定了 640px 寬度,那會成為一場大災難!

我們從 Blogger 後台上傳的圖片,外面會自動包覆 A 標籤。而前面提到的小圖示,通常使用於顯示,不會有 A 標籤(不能點擊)。因此勾選了這個選項「有 A 標籤的圖片才處理」,就不會去動到這些小圖示了。


2. 另開視窗

Blogger 後台上傳的圖片,A 標籤預設不會另開視窗,這是很糟糕的設計,對於訪客來說是很不友善的閱讀體驗,按下圖片看完整大小時,就跳離了原本頁面。為了節省篇幅,這部分的說明請參考「超連結 A 標籤你不知道的操作技巧」→「一、另開視窗的重要性」。

有勾選這個選項後,轉換後的圖片語法就能另開視窗了。



四、其他項目


1. 刪除官方無用參數

Blogger 後台上傳圖片後,產生的語法我一直都很有意見,裡面包含的一些參數其實沒什麼作用,等於網頁載入時得傳輸無用的字串,例如這些:

  • imageanchor="1"
  • border="0"

勾選這個選項後,以上這兩個字串都會被清除掉。


2. 自訂 Class

可參考這篇「將文章的圖片全部套用立體陰影效果」,這個選項的作用在於,如果你想為文章中的圖片使用一些 CSS 特效,例如加邊框、陰影等等,可將這些 CSS 參數設定放在某個 Class,那麼勾選這個選項、並填入 Class 名稱後,所有圖片 img 標籤就會自動加上這個 Class 名稱,來套用這個 CSS 效果。



五、舊文章的處置


以後 Blogger 的新文章,在發佈之前只要使用這個「Blogger 圖片語法轉換器」,就能自動幫圖片加上本文以上這些效果,且讓行動版的圖片能自動以小尺寸載入。

如果你的部落格文章數不多,例如只有數十篇,那麼或許勤勞一點,使用這個轉換器,一篇篇複製貼上,還不會花太多時間處理。

如果舊文章有數百、上千篇,那麼這就是個大工程了!如果你有大量 Blogger 舊文章需要批次修改內容,例如類似這個圖片語法轉換的話,可參考「諮詢服務」→「5. 部落格相關業務」→「C. 批次修改文章內容」。


更多 Blogger 工具:

21 則留言:

  1. 好詳盡用心的文! 好實用!

    回覆刪除
  2. 回覆
    1. 咦~這件事上一篇回覆過了...@@"

      刪除
  3. Wayne大現在致力於開發線上工具^^

    回覆刪除
    回覆
    1. 只是最近要解決的問題,剛好都得用線上工具的模式來處理 ^^
      不過另外弄網站的優點不少,網頁載入速度快,以前弄過的線上工具,找時間也可一起放過去 :D

      刪除
  4. WFU 大大,我發覺行動版的直式圖片會有時侯出現模糊不清,這有方法解決嗎? :)

    回覆刪除
    回覆
    1. 這樣的描述方式我無法知道問題在哪喔~
      請附上你覺得有問題的網址、註明有問題的圖片在哪。

      刪除
    2. 明白,我的圖片經Picasa upload 至Blogger 的,網頁版圖片顯示是正常,但在行動版查看時,某些圖片顯示會變得失真,直式圖片更甚。

      這是其中問題問題的連結:http://www.thetoyszone.com/2015/05/egg-attackaction-ironman-mark1.html?m=1

      感謝解答。

      刪除
    3. 原以為你是用了本文的圖片轉換器,而導致圖片變得模糊,不過看了你的網頁,似乎跟本文無關呢。另外你沒註明哪些圖片會失真,我也看不出哪些圖片變得模糊,唯一能做的,是請你參考這個討論串 : https://plus.google.com/103155247988704364972/posts/Tgoj5dEn9fH 看看有沒有你要的答案了。

      刪除
    4. 其實我也有用圖片轉換器的,目的是想解決"原本"圖片模糊的問題.。

      至於"現在"看不出哪些圖片變得模糊,因已找到解決方法了,我先以PHOTOSHOP 調整寬度後再上傳至BLOGGER ,才能正常地在行動版顯示.清晰圖片... .

      可能有點離題,但我相信也會有人出現"行動版圖片"問題,亦找不到方法,才在此發問,見諒。

      thanks

      刪除
  5. 【回報】以下段落的連結異常

    2. 另開視窗

    Blogger 後台上傳的圖片,A 標籤預設不會另開視窗,這是很糟糕的設計,對於訪客來說是很不友善的閱讀體驗,按下圖片看完整大小時,就跳離了原本頁面。為了節省篇幅,這部分的說明請參考「超連結 A 標籤你不知道的操作技巧」→「一、另開視窗的重要性」。

    【問題1】

    剛剛我嘗試使用工具,步驟為決定好參數-貼上文章HTML-複製右邊HTML-放回部落格

    但是圖片依然沒有變動,不知道問題出在哪裡呢?

    【問題2】

    假設已經先轉換過一次且沒有清除,當我直接修改參數的時候,已經變化的HTML語法會跟著變動嗎?
    還是我要重新來操作?

    【問題3】

    我的文章都沒有選擇過任何標題的形式,丟是在寫文章時手動變化大小與間隔/顏色,
    這樣子在"其他項目-A標籤" 有沒有勾選的話是不是都沒有關係?

    (PS:我有TRY過有勾選、無勾選,文章的相片依然沒有轉變大小)

    【問題4】

    我發現一個問題,就是此工具【只會改寬度】,但是不會【等比例變更高度】!!
    這樣原本正常比例的圖片就會變形,(預設 320*180 --> 640*180)

    同時,圖片語法的部分也看起來怪怪的,會變成這樣

    【a target="_blank" href="https://3.bp.blogspot.com/-kctuF0NwqFI/WAQ1Bsx9aoI/AAAAAAAAKO0/lk-9qKJzGBgvuFgR8nKUYYsErmYxg0jogCPcB/s1600/00.%25E5%25B0%2581%25E9%259D%25A2.jpg" style="margin-left: 1em; margin-right: 1em;"】【img alt="崩壞學園-00.%25E5%25B0%2581%25E9%259D%25A2" height="180" src="https://3.bp.blogspot.com/-kctuF0NwqFI/WAQ1Bsx9aoI/AAAAAAAAKO0/lk-9qKJzGBgvuFgR8nKUYYsErmYxg0jogCPcB/s640/00.%25E5%25B0%2581%25E9%259D%25A2.jpg" width="640" width="320" /】【/a】【/div】

    會有兩個寬度

    謝謝

    回覆刪除
    回覆
    1. 謝謝回報失效連結,幫你加了 50 點,進會員中心即可看到喔~

      【問題1】→ 同問題4

      【問題2】→ 不清楚你的意思,但你可以用簡短的字串,自行測試就能知道答案了

      【問題3】→ 不清楚你要問什麼,如果是要問 "文章的相片依然沒有轉變大小" 的話,那麼同問題4

      【問題4】→ 我測試之後,如果上傳圖片時選擇特定尺寸,的確會出現 width, height 的設定值 → 因為我都是選擇原始大小,不會出現 width, height 設定值,所以沒發現這個問題。

      暫時你可以上傳圖片時,記得選 "原始大小",就不會發生提問的狀況,我另外再找時間更新這個問題了~

      刪除
    2. 謝謝~描述不足的地方在此做個補充:)

      【問題2】替如說我把圖片從GOOGLE相簿插入時,他的長寬就是最小的320*180(假設),所以語法中寬度就會是320。

      此時,我先把參數設定為寬度640、接著把預設語法填入就會變成 width=640,這時候我突然覺得還是自訂寬度700好了,就直接更改參數成"自訂寬度=700"。

      這樣的話,上面框框已經異動後的右邊語法,會不會直接從width=640直接變成700呢?

      【問題4】有關W大回復的『你上傳圖片時選擇原始大小』而沒遇到此狀況。

      不過,我的圖片再上傳到GOOGLE相簿之前就已經後製成 700*533 的比例,上傳照片時是使用拖曳到網頁中、並且另存成一本相簿,沒有看到可以選擇原始大小還是尺寸如何的提問,所以狀況有點不太一樣!?

      而從文章後台插入照片時也沒有變動過尺吋,就直接把HTML碼貼到小工具網頁中了,這樣依舊會有重複的寬度設定之問題,同時長度也無法依照比例做變更。

      以上回報完畢,再麻煩Wayne大了~

      刪除
    3. 你提到 Google 相簿的話,表示一開始就搞錯囉,文章開頭的紅字,註明了處理的圖片要是 PICASA 圖床

      刪除
    4. 我以為兩者合併之後改名為google相簿了,所以這樣blogger的picasa圖床不就要手動插圖?

      這樣也回歸到我最初詢問的blogger寫文章時,插入內建相簿圖案預設值過小的問題,

      這樣的話是不是就沒有辦法變更blogger的設定了呢? 謝謝

      刪除
    5. 如果你是指從文章編輯器上傳圖片時,選擇「google album archive 中的相片」,這些圖片都會轉成 picasa 圖片網址的格式,那就沒問題。按我上面說明的步驟選 "原始大小" 就好了。

      刪除
    6. 恩恩~就是選擇「google album archive 中的相片」! 但是就不知道為什麼會寬度會有兩個語法,然後長度不會跟著變@@

      刪除
  6. 想問一問你這個教學是否只是對BLOGGER行動版的圖片有影響,而桌面版的圖片(圖片都是勾選特大) 都不受影響???

    回覆刪除
    回覆
    1. yes or no 的問題,測試一下就知道答案囉~

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。