Blogger 圖片 URL ㄟ參數

今天，我要給大家介紹的是如何使用圖像 URL 結構參數，來裁剪和調整 Blogger / Blogspot 圖像大小的最佳方法。
希望這些技巧能幫助您更好地為模板優化縮略圖。


原圖

在您將圖片上傳到您的帖子並選擇將其顯示為原始圖片後，您的圖片網址將如下所示：

https://lh3.googleusercontent.com/-cLYx0Vn3h8/YaxmEQzFYhI/AAAAAAABLGDFHuknc/s1600/12345.jpg

URL 中的參數 /s1600/ 將告訴 Blogger / Blogspot 圖片託管，您想要的圖片原始尺寸版本。

以上是舊格式，新的格式和舊的不同之處，在於參數書寫的位置不同 ~ 以下是新的格式

https://blogger.googleusercontent.com/img/a/AVvXsEgy9u3lT1WOa5el_DBVtfEWRyv_4LA=s16000

其實這個參數，類似 Max-width，假如 :  圖片的寬度小於這個值，就是圖片的原始尺寸,
假如 :  圖片的寬度大於這個值，那 S 後面的值就是最大值


插個花、倘若你想要在網址有檔案名，有3種方法 ..

1. 偷吃步、用欺敵之術偽裝，在圖像網址之後 + 問號，在問號之後隨便寫上你要的檔名，WRyv_4LA=s16000?xxx.jpg

2. 在編輯文章時，按插入圖片，再按右鍵 ~ 如下圖，將會取得你原來上傳時的檔名目前還有效，以後就莫宰羊!! 😜 不建議這樣做，因為取得的網址又臭又長

接下來就介紹幾種參數給你聞香，並不是全部，像這幾個我就測不出他有什麼作用 -nu-g-d

參數、雖然可以串接相加組合，不過有些是不能一起用的，自己動手試看看就知道 👀

-S 已介紹過，不再多說💛 -C 之前有人說是正方形，好像不是很正確，應該是圖片中心點或 裁剪
-ci 才是會強制返回正方形裁剪

-CC 使用圓形遮罩進行中心裁剪

圖片是距型的所以就變成橢圓形 

  遮罩裁剪後底色為白色，
可使用 -c0x 參數添加到 size 的末尾，填充背景顏色 →  WRyv_4LA=w300-h300-c0xff5555-cc  紅色    

    

      -c0x 後面是16進位顏色碼

-W 寬度，-H 高度，旋轉角度有3個參數可用， 90° : r90, 180° : r180, 270° :r270 ⏰  WRyv_4LA=s0-r90

 -fv 垂直翻轉圖像，例如s320-fv ， -fh  水平翻轉圖像，例如s320-fh

-K 和 -no 一起使用，-k 讓 gif 停止不動，-no 隱藏撥放按鈕

幫圖片瘦身優化

Webp是一種同時提供失真與無失真壓縮的圖片檔案格式，目的在於減少圖片的檔案大小、提高圖片檔案在網路上的傳送時間和速度，同時又能保持和 JPG 與 PNG 等格式相同的圖片品質。

使用 “-rw”參數，讓您可以在您的 Blogspot 博客上以 .webp 格式提供圖像。
 在文章編輯器、點按取代，找到圖像的參數 s0 或 s16000 在後面加上 -rw，這樣 Blogger 系統就會幫你轉換輸出 ⭐ 並不是所有的圖檔轉成 webp，就會變苗條，有些還會長胖，這點需要注意 .. 

先反白目標  > 按下取代 > 出現 Replace 確認後再按下 Enter > 輸入 s16000-rw > 再按 Enter > 最後點按 All  >  存檔結束當您在 size 參數末尾添加 -p 時，Google 相簿的智能演算法將檢查圖像並選擇圖像中最有價值的區域作為裁剪版本返回。

有加-P

否 -p →

pf：智慧人臉辨識裁切 


-ba [0-11] 在右下角添加一個小符號（星星、複選標記等）。有效範圍：0 到 11

-br 為圓角 border radius  類似  -cc， -br10 == CSS border-radius : 10px ，這個應該用不到，因為他裁剪後會留下不透明底色。


以下是可被轉換的格式，假如你原來就是 jpg 檔，就不必用 -rj 轉換輸出 

-rj → ( JPEG )  輸出

-rp → ( PNG )

-rw → (WebP)

-rwa GIF 翻譯 → (WebP)

-rg → ( 動圖 )

-rh → ( MP4 )

---

   如何、將 Google Drive 空間上的圖片，顯示到你的 (Blog) 網站 ??

您可以在 Google Drive 的託管平台上存儲各種類型的檔案，例如圖像、視頻、檔案和應用程式等，基本上在 Google Drive 託管的檔案是不允許您外連的。
但是透過一些技術手段是可以利用 Google Drive 作為圖床來使用。 
下面就帶大家一起來看是如何實現的。


首先 ：到 google 雲端硬碟取得圖片連結 假如存取權還未設定成共用，改成任何人都能檢視共用後按下 ~ 複製連結



步驟1：剛複製的圖片連結，我們需要稍加修改下列連結，通常需要在 HTML 的 IMG標籤中使用圖片，必須獲得圖片 ID，而下列斜杠裡面的 紅色字符則是該圖片的url ID名稱。

https://drive.google.com/file/d/15CPEFX167GI3gIlZAwTJxKDdYnQhjFlC/view?usp=share_link


步驟2：現在我們把地址修改為下面的格式，修改 Google 網域名後的/file/d/字符，改為/uc?export=view&id= 加上圖片 ID，刪除 連結最後部分字符/view?usp=share_link。
修改好的連結完成後如下

https://drive.google.com/uc?export=view&id=15CPEFX167GI3gIlZAwTJxKDdYnQhjFlC

步驟3：最後，我們要在 HTML 的 IMG標籤中插入上面我們修改好的連結，添加完成後如下。

<img src="https://drive.google.com/uc?export=view&id=15CPEFX167GI3gIlZAwTJxKDdYnQhjFlC" />

像這樣添加Google Drive共享連結地址，不管是部落格、社群、電子信箱等都可以引用此圖片 嘍。