縮圖產生的影響可見於分享連結時的簡短摘要、RSS、Facebook轉貼等, 在文章中看不出其重要性, 分享轉貼時一幀主題鮮明的圖片極具代表性. 由於各種網站平台設定主圖的方式不一, 故不說明其程式碼構成, 這裡的重點在於圖樣尺寸的設定. var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Note',message:'也許你不知道的事實
只要你曾經在文章內使用過圖片、照片, 其縮圖亦可能在搜尋資料中顯示為其他文章的縮圖, 縱使已經移除該圖片',buttons:[{id:'btn-ok',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});
以 Blogger 文章縮圖為例, 一般範本是以文章的首圖當作預覽縮圖. 除非在 <head> 區間寫入特定圖片當作縮圖, 否則是以 <body> 以下的第一張圖當作首圖. 要如何看首圖位置? 在此不以範本CSS來找出首圖, 而是要以文章按右鍵查看網頁原始碼; 這個才是搜尋引擎索引時的列圖依據.
舉個例子：當我的部落格小工具模組排列在文章模組的上方, 那麼模組裡會出現的圖片即有可能變成首圖. 假設我使用了作者簡介模組, 因此顯示作者個人頭像變成了縮圖. 有些範本寫入工具模組 (widget) 位置時, 排列在 </body> 的下方, 那麼不會影響文章內第一張圖, 這是比較良好的範本.
參考尺寸
雖說文章的第一張圖是縮圖的預設值, 本無須計較圖檔尺寸. 但2014年起, Facebook 為了內文的品質, 對於分享連結的縮圖採取最優政策, 也就是不以預定首圖當作縮圖; 而是以像素清晰度當作擷取依據. 對於這一點, Blogger 編輯器在圖檔程式也做了相對應的修改.
以往 Blogger 的插圖 HTML 寫法如下：
<div class="separator" style="clear: both; text-align: center;"> <a href="http://.../s1600/xxx.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://.../s200/xxx.png" height="200" width="200" /></a></div>
參數 s200 是為了加快載入速度, 僅使用小尺寸縮圖的表圖. 按下圖片開啟燈箱觀看時才會另外載入 s1600 的原始圖檔. 當然也有的作者習慣寫文章時全部使用原始尺寸 s1600. (圖片很多時訪客開啟頁面就會很痛苦)
現在 Blogger 編輯器則將預先載入改為 s1600, 以符合臉書的優圖政策, HTML 如下：
<div class="separator" style="clear: both; text-align: center;"> <a href="http://.../s1600/xxx.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://.../s1600/xxx.png" height="200" width="200" /></a></div>
現在有個問題出現, 當圖檔使用 s1600 時尺寸還是太小, 於是其他圖片依舊取代了首圖位置. 例如留言板的作者頭像尺寸是 s512、G+ 留言板頭像尺寸 s46、Blogger 簡介尺寸約 s220, 或是標題圖檔使用非制式模組的撰寫方式. 當您的首圖原始檔尺寸 (s1600) 小於以上這些模組圖片, 很可能改變了縮圖首圖.
結論是首圖的原始尺寸建議最好大於 s512 (長寬像素大於 512 pixel)
參考圖形
首圖的形狀與格式會影響文章摘要的顯示, 我將幾種圖樣做了小小的評比.
正方形
無論在搜尋結果或各種RSS工具中表現最佳的形狀.
矩方形
最常用的形狀, 採取 3:2 比例為佳, 唯圖形在搜尋縮圖中會削減左右部份圖樣, 故略減半顆星; 事實上在搜尋結果表現佳, 文章中的視覺表現也最佳.
正方形邊角去背 png
僅邊角小區域透明通道的 png、gif 圖檔, 影響 data image 計算數據不大; 檔案較大, 尚可接受. var types=[BootstrapDialog.TYPE_DETAIL];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Important',message:'此類僅限邊角去背, 圖樣本體如使用透明值即等同鏤空處理. 扣分！
PNG alpha 透明通道參考文件：PNG 圖形格式',buttons:[{id:'btn-warn',label:' Oops! Got it',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});
長方形
不利於搜尋結果的圖形框架, 計算比例偏差值高, 宜少用.
鏤空去背或透明值 png
這是中看不中用, 評價最差的圖形. 太多鏤空使透明通道數值擴張, 像素抽樣定位失靈, 不建議使用此類圖檔. 雖然我的文章經常使用此類圖檔, 是因為我ㄏ一ㄠˊ咖稱所致...
最佳格式是 jpg(jpeg) 檔名請盡量使用與主題相關的命名, "小肥貓.jpg" 絕對比 "DSC0001.jpg" 為佳, Google images search 會參考檔名及上下文章關聯性.
Author Summary
Subject : 文章縮圖的設定
Author : - Dream Talker Updated at: 6:51 AM
Votes : - 5.0 - based on 2015
分享連結時Blogger文章的縮圖尺寸
Author : - Dream Talker Updated at: 6:51 AM
Votes : - 5.0 - based on 2015
分享連結時Blogger文章的縮圖尺寸
5 Stars - Reviews
蛤 怎麼辦?! 我的圖經常使用長形直立式那種分數很低的圖欸!!
ReplyDelete第一張圖有影響, 以後儘量避免首圖使用分數低的圖樣就好.
Delete請問第一張圖要使用比例小或中的縮圖呢？像您是使用最小圖例嗎？
ReplyDelete謝謝你！
哈哈! 有網友問過類似問題, 請參考說明：最優縮圖比例
Delete