修改 Blogger 圖片網址為圖片裁切、套上濾鏡、特效
Blogger 的圖床:Google 相簿,有著強大的裁剪、變形、特效功能,而這些功能只要修改在 Blogger 文章中取得的圖片網址參數即可達成。如此強大的編輯功能除了自己寫程式來達成以外,交付 Google 伺服器來處理也較能快速處理圖片。
Blogger 一張圖片的網址長相如下:
https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/image.png
其中的 x 為系統自動產生的代碼不可以亂動。整個圖片網址可以更動的地方有三個,第一個是 https://x.bp.blogspot.com/
內的 x;第二個是網址中 s320
的部分;第三個是 image.png
的部分。
補充,最新的網址已更新,使用方式與舊的圖片連結相同。
https://blogger.googleusercontent.com/img/b/xxx/xxx/s5000/img.jpg
1. 伺服器分流
因為 Google 每天的流量龐大,對伺服器負荷量也超乎想像,所以 Picasa 圖片網址用 4 個伺服器來分流,而這 4 個伺服器所儲存的圖片是同步的,所以你可以將:https://1.bp.blogspot.com/
改成 https://2.bp.blogspot.com/
。也就是說,第一個可更動的部分是 https://x.bp.blogspot.com/
的x 可填入的值為 1~4,而不論填入何者取得的圖片皆相同。以下我將同一張圖片用 4 個伺服器的網址來顯示:可以用在新分頁中開啟圖片來驗證網址。
1.bp.blogspot.com
2.bp.blogspot.com
3.bp.blogspot.com
4.bp.blogspot.com
Source: Photo by Stanford Smith on Unsplash.
雖然提供 4 個伺服器做分流,可是文章上還是建議使用單一來源,如果文章中使用 1.bp.blogspot.com
就從頭到尾都用 1.bp.blogspot.com
,如此一來可以減少解析 DNS 的時間。
2. 圖片修改
網址中的第二部分:s320
是決定 Google 相簿該傳送何種圖片格式設定之處,最常見的格式是:s000
(0 代表任意數)。在這部分也是可自訂最多的地方。
s:以最大邊作為限制條件
s 是以這張圖片的「最大邊」作為限制條件,產生的圖片長寬不會超過這個值,譬如:假設有一張 1024x720
的圖片,將其限制條件設定為 s512
則會獲得一張 512x360
的圖片;舉一反三,假設有一張 1080x1920
的圖片,將其限制條件設定為 s1024
則會獲得一張 720x1024
的圖片。
那麼如果我限制條件是 s0
呢?此時 Google 相簿並不會產不出圖片,反而會產生這張圖片的原始大小。雖然 Blogger 新增圖片時是以 s1600
作為大圖的連結,實際上如果你的原始圖片長或寬大於 1600 時,Google 相簿也只會給你最大邊為 1600 的大圖而非原始圖片,所以此時將條件設定為 s0
則會貨真價實的取得原圖檔的大小(這裡的原圖檔指的是經過 Google 相簿壓縮後的原圖而非上傳時的原圖)。
w:以寬作為限制條件
w 是以這張圖片的「寬」作為限制條件,產生的圖片寬不會超過這個值,原理與 s 同樣是限制圖片的大小。
h:以高作為限制條件
h 是以這張圖片的「高」作為限制條件,產生的圖片高不會超過這個值,原理與 s 同樣是限制圖片的大小。每一項限制條件應該以「-」(hyphen,連字號)隔開。
小結
s、w、h 是可以同時出現的,此時若都有指定大小時,系統會自動產生出同時符合這三個限制條件的圖片,舉例:假設我有一張 1920x1080
的圖片,而我限制條件為 s1920-w1024-h1080
的話,系統會產生 1024x720
的圖片,因為這張圖片同時滿足了不超過最大邊 1920 像素(s1920
)、不超過寬 1024 像素(w1024
)、不超過高 1080 像素(h1080
)。
這三個限制條件的最大值為原圖的大小,即使設定超過了原始圖片,系統仍然只會回傳原圖大小,並不會放大。
c:裁切圖片
如果在大小的後方加上 c 則會將圖片裁切, Google 相簿的裁切方式有點微妙。原圖如下,接下來的例子接以此圖(大小:320*213)做為示範。
例 1:s320-c、w320-c、h320-c
這個的裁切方法為:是以 320*320 的正方形框在圖片中心位置,再將圖片縮放成寬或高剛好符合這個正方形的其中一邊進行裁切。這個可以輕鬆的裁出置中正方形的圖片。
例 2:w320-h160-c
這個的裁切方法與例 1 的裁切方法稍微不一樣,是以將圖片寬縮放為 320 像素後,從頂端往下 160 像素進行裁切。
n:與 c 類似的裁切方法
n 的指定方式與 c 相似,差異之處在於用 n 進行裁切時是以圖片的中心點為基準點。此時的 s、w、h 都不可以單獨使用,而且當你指定 n 時若要使用 s 則必須 w、h 同時指定時。以下舉例沿用 c 的原圖。
例 1:w320-h160-n
此為先將原圖的寬設定為 320 像素後以原圖高的中心軸向上、下各 80 像素進行切割。
例 2:s180-w320-h160-c
此時的 s
會覆蓋這張圖最大邊的設定,再將其結果按照例 1 的方式進行切割,以這張圖為例其結果等價於 w180-h160-c
。
p:比 n、c 類似但更進階的裁切方式
p 的使用方法與 n 一樣,但是 p 會藉由分析後找出這張圖片最重要的部分作為中心進行裁切。
w320-h160-p
pp:保持圖片原比例再用黑色補足缺少處
pp 的使用方法與 p 一樣,但 pp 會將高(h)固定為指定值,寬的設定值若比縮放後的原圖更寬,不足的部分會以黑色邊填充。
w320-h160-pp
pa:與 pp 一樣
pa 的使用方法與 p 一樣,而他的功能與 pp 類似,只差在 pa 沒有 pp 的黑色邊。
w320-h160-pa
pf:智慧人臉辨識裁切
pf 使用 Google 的人工智慧臉部辨識系統,將圖片中的人臉置中並裁切。以下是套用效果前的原圖:
下圖則是套用效果後的
s300-pf
cc:圓形裁切
cc 是非常經典的用圓來裁切圖片,如果同時指定 w 和 h 的話,系統會自動取比較小的數值作為圓的直徑。
s300-cc
ci:與 cc 類似
cc 是用正圓來裁切圖片,那麼 ci 是用正方形來裁切圖片,一樣如果同時指定 w 和 h 的話,系統會自動取比較小的數值作為正方形邊長。
s300-ci
裁切講到一個段落後,接著是圖片的鏡像、旋轉,這兩個也可以透過網址參數達成。
fv:垂直鏡像
垂直鏡像顧名思義就是將圖片上下顛倒,使用的參數為 fv,以下為接著示範用原圖:
接著讓我們把效果套用上去:
s320-fv
fh:水平鏡射
水平鏡像顧名思義就是將圖片左右顛倒,以下為示範圖:
s320-fh
那麼我們可不可以同時使用垂直鏡射與水平鏡射呢?答案是可以的。
s320-fv-fh
r:旋轉圖片
旋轉圖片的方法很簡單,用 r + 90 / 180 / 270
即可。r 的單位是角度,以下為示範圖:
s320-r90
目前的旋轉圖片僅支援 90、180、270 度旋轉,其他角度尚不支援。
圖片格式轉換
不論上傳的圖片格式為何,只要 Google 伺服器能正確解析並儲存,抓取圖片時的檔案格式也是可以轉換的。
- JPEG 格式:於網址中加入
rj
後會將圖片的格式轉為 JPEG。 - PNG 格式:於網址中加入
rp
後會將圖片的格式轉為 PNG。 - GIF 格式:於網址中加入
rg
後會將圖片的格式轉為 GIF。 - WebP格式:於網址中加入
rw
後會將圖片的格式轉為 WebP。
除此之外,Google 相簿也有關於 JPEG、GIF 更多可自訂的參數,如:v0
是將 JPEG 以 Baseline Standard 標準格式回傳;v1
是將 JPEG 以 Baseline Optimized 格式回傳、v2
是將 JPEG 以 Progressive 的方式回傳,有關於這三種格式的介紹請參考:「儲存 JPEG 時,這些選項是甚麼意思?-攝影札記 Photoblog - 新奇好玩的攝影資訊、攝影技巧教學」。
JPEG 除了格式有許多種外,Google 相簿提供指定壓縮比的功能,在網址中加入 l + 數字
就可以指定壓縮比了。舉例:若我要將圖片壓縮 15%,則參數需設定為 l85
。
如果在 GIF 的圖片參數中加上 rh
則會將 GIF 動畫轉換成 MP4 格式的影片,這個影片可以用 HTML5 的 video 標籤讀取、播放。如果要把 GIF 的動圖效果關閉,可以加上 k
這個參數,如此一來就會讓 GIF 變成靜圖。
特效滿點
邊框
Google 相簿也可以幫圖片套上特效,假設我要將圖片加上邊框,只需要加入 b + 數字
作為參數即可,舉例:我將原圖加上 10 像素的邊框需要將參數設為 b10
,以下為結果圖:
s400-b10-c0xaaaaaa
模糊
模糊效果也是可以套用的,參數為:fSoften=1,n,0,其中 n 代表模糊強度,以下為示範圖:
s400-fSoften=1,10,0
s400-fSoften=1,100,0
暗角
暗角效果使用的參數為 fVignette=1,a,b,0,HEX
,上式中 a
為暗角強度,範圍從 0 到 100;上式中 b 為暗角漸層效果的擴散程度;上式中的 HEX
指的是十六進位的色碼。舉例:最基本的暗角效果設定值以及效果示範如下圖:
s400-fVignette=1,20,1.2,0,000000
灰階
灰階的參數為:fansel=1,HEX
,HEX
是十六進位色碼的部分。
s400-fansel=1,ffffff
進階裁切
Google 相簿的進階裁切在網路上還真的找不到相關的介紹,所以在經過我一翻摸索後找到設定的方式了,進階裁切的參數為:fcrop64=aaaabbbbccccdddd
,這個參數的設定比較麻煩,在上式中 a 為左側邊的位置;上式中 b 為上側邊的位置;上式中 c 為右側邊的位置;上式中 d 為下側邊的位置。也就是說,預設不經過裁切的圖片設定為:fcrop64=00000000ffffffff
,他是以四位數的十六進位數字進行定位,所以為了方便閱讀我把原參數的各位置設定用英文半形逗號隔開:
fcrop64=0000,0000,ffff,ffff
分別為:fcrop64=
左上右下。至於裁切的像素應該是以圖片大小下去算比例的吧?詳細的我就不清楚了。切記,在填入網址的時候記得把逗號拿掉,加入逗號指是方便閱讀而已。
同時套用多種特效
套用多種特效的方法很簡單,參數不是 f
開頭且沒有 = 的用連字號隔開,而參數以 f
開頭且有 = 的指需要去掉開頭的 f
並用 : 分隔即可。舉例:灰階 + 暗角的效果:
s400-fansel=1,ffffff:Vignette=1,20,1.2,0,000000
進階顏色設定
這裡的顏色設定一樣是透過十六進位的色碼來更改邊框、圓形裁切背景的顏色,Google 相簿提供的圓形裁切背景並不是透明的即使將檔案格式改成 PNG,但是他的背景顏色可以自行設定(預設是白色)。其參數為 c0xHEX
,HEX
就是輸入色碼的部分,如:白色(c0xffffff
)。
s400-b10-c0xeeeeee
s400-cc-c0xeeeeee
更改快取有效時長
如果有跑 Google PageSpeed Insights 就會發現在報表中會要求你把快取時間拉長,Google 相簿預設的快取時長只有十分鐘,其實只要在網址中加入一個參數就可以更改這張圖片的快取有效時長,參數為 e + 時間
,舉例:一張圖片我想將快取過期日設定為 30 天後,參數為:e30
,本篇文章的所有圖片都將快取時間設為 30 天後過期。
3. 檔名不限制
原網址為:
https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/image.png
其中的第三部分:image.png
是可以隨意更改的,Google 相簿的圖片抓取主要是依照 xxxxxxxx/xxxxxxxx/xxxxxxxx
的部分,所以在後方的檔名 image.png
可以肆意更改,要注意的是如果將 image.png
改成 image.jpg
並不會更改圖片格式,必須使用第 2 點介紹的圖片格式更改參數方法。
更改檔名只是為了增進 SEO 而已,所以改不改依照跟人需求啦!即使上傳前該檔案的名稱為中文也無妨,爽改成日文、西班牙文、法文都可以。
總結
以上就是關於 Blogger 的圖片自訂說明,強大的 Google 伺服器提供這樣的隱藏功能還不多加利用,這些功能在其他圖床不一定有。只是因為這些功能未公開使得在尋找參數、測試參數時花費不少時間。不過也因為如此,讓 Blogger 上的圖片更能容易的、高速的產生更多樣化的效果且不須二次上傳修改完成的圖檔。