2019年1月18日

直接修改 Blogger 上傳的圖片網址參數(Picasa 圖床),就能改變尺寸、進行裁切、加強 SEO

直接修改 Blogger 上傳的圖片網址參數(Picasa 圖床),就能改變尺寸、進行裁切、加強 SEO

Wayne Fu 0 A+
picasa-url-parameter.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO從 Blogger 上傳的圖片、甚至 Google 相簿其實都是放在 Picasa 圖床, 詳細原理可參考「其實 Google 相簿依然是 Picasa」。

而 Picasa 圖床有著全世界其他圖床都沒有的技術,只要修改網址參數就能改變圖片尺寸,以及其他各種功能。

在這個「Blogger 社團討論串」有社員表示:

現在發文也是習慣直接替換成s1600的圖,不過偶爾還是會想說,如果能省點流量就好了…只能看看以後的技術,或許可以讓小圖用向量的方式來放大而不模糊呢…

Picasa 圖片網址的參數中,s1600 就是顯示原圖尺寸,本篇會整理各種實用參數、以及網址的變化規則,讓我們只要上傳一張圖,就能變化出更多應用空間。

(圖片出處: pixabay.com)


一、Picasa 圖片網址範例


girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖從 Blogger 上傳後,網址格式如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/girl.jpg
這張圖片的原始尺寸是 1280 x 853 px,之後會展示各種調整的效果。



二、增加 SEO 效果


其實 Picasa 圖片不需要檔案名稱、附檔名,例如以下的網址依然能顯示圖這張圖片:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/

但如果我們取個比較豐富的檔名,在 Google 搜尋會比較容易被找到,例如我們將 "girl.jpg" 改成 "girl-railroad-tracks.jpg",描述一下這張圖的情境,這樣對 SEO 好多了。

可以試試看,下面這個改過檔名的網址,依然顯示同一張圖:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/girl-railroad-tracks.jpg

常常看到很多站長上傳圖片時,沒有改掉原本的中文檔案名稱,結果圖片網址變成一大堆亂碼,像是 "%23%24%25...%%%"。其實不用重新上傳,建議有空可以回頭改一下圖片網址的檔名,使用有意義的英文字串即可



三、實用參數效果


以下針對原始圖片 "s1600" 這個參數進行修改,提供各種實用的參數效果:


1. 參數 s***

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖為改成 s400 的效果,代表的含意為:

  • 圖片的長、寬之中,較長的那一邊改成以 400px 顯示
  • 這張圖為橫躺長方形,所以原本 1280px 寬改以 400px 顯示
  • 高度會自動以等比例縮放
  • Picasa 圖片允許最長邊為 1600px,所以可修改的數值在此範圍之內

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s400/girl.jpg

2. 參數 w***

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖為改成 w512 的效果,代表的含意為:

  • 圖片寬度改成以 512px 顯示
  • 高度會自動以等比例縮放

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w512/girl.jpg

3. 參數 h***

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖為改成 h256 的效果,代表的含意為:

  • 圖片高度改成以 256px 顯示
  • 寬度會自動以等比例縮放

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/h256/girl.jpg

4. 參數 -c

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

任何參數後面都可加上 "-c",上圖為改成 s333-c 的效果,代表的含意為:

  • 較長邊改以 333px 顯示
  • 取垂直、水平方向置中的區塊,自動裁切為正方形
  • 所以使用 -c 參數的圖片,最好主要構圖在畫面正中央

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s333-c/girl.jpg

5. 參數 w***-h***-s

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖為改成 w400-h150-s 的效果,如果指定圖片的寬、高,並加上參數 "-s",代表的含意為:

  • 圖片尺寸成為寬 400、長 150
  • 改變原圖的比例,變形為新的指定比例
  • 通常這不是好的效果,如果圖中有人物很明顯會變形。

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w400-h150-s/girl.jpg

6. 參數 w***-h***-n

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖為改成 w400-h150-n 的效果,如果指定圖片的寬、高,並加上參數 "-n",代表的含意為:

  • 圖片尺寸成為寬 400、長 150
  • 維持原圖比例,依照新指定比例進行裁切
  • 會選擇置中的區塊進行裁切
  • 這效果通常會比 -s 參數來得好,也許裁切效果沒那麼滿意,但至少不會變形。

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w400-h150-n/girl.jpg


四、其他參數效果


除了以上比較實用的參數,Picasa 還有一些比較特定用途的參數可使用:

1. 參數 -d

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

任何參數後面都可加上 "-d",上圖為改成 s400-d 的效果,代表的含意為:

  • 點擊圖片後可下載此圖

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s400-d/girl.jpg

2. 參數 -bxx

girl.jpg-直接修改 Picasa 圖片網址參數,就能改變尺寸、進行裁切、加強 SEO

上圖為改成 s400-b10 的效果,如果在參數 "-b" 後面加上 10,代表的含意為:

  • 自動為圖片加上黑框,寬度為指定的數字

範例網址如下:

https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s400-b10/girl.jpg

3. 灰階、模糊效果

Picasa 的內建參數,竟然還有濾鏡的效果,這方面的參數比較複雜,因此另外整理一篇,請參考「不用語法及後製, Picasa 圖片立刻變成黑白(灰階)效果」。


更多 Picasa 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 您好~感謝分享資訊~
    想請問圖片會不會有”重複內容”的問題而影響seo? (一樣的圖但不同網址)

    回覆刪除
    回覆
    1. 一般討論 SEO "重複內容" 的問題,其實是指文章內容~~

      刪除

張貼留言注意事項:

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

TOP