若要更改行動版文章內的圖片,原理是使電腦版的圖片為行動版圖片所用,一併保有原圖的尺寸和解析度,建議步驟如下:
1.利用修圖軟體變更圖片尺寸。
2.將圖片上傳至Blogger後,將其設定為"原始大小",如下圖所示。
3.切換至HTML程式碼欄位,檢查是否有控制圖片的width=" " 和height=" "程式碼,若有,請將其刪除。並保留data-original-width=" " 和 data-original-height=" "的程式碼區段。
須提醒的是,行動裝置效能畢竟還是低於電腦,同時在相對小的行動裝置螢幕中,圖片解析度足夠即可。建議可針對主題圖片作尺寸和解析度要求即可,一並兼顧使用者瀏覽網頁的速度體驗。
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/--Cm2Buvf3ck/XDm9Cw0bblI/AAAAAAAADTY/Ug7YKdiR2NYftyipRRGf9ZQRXMA4VyWXQCLcBGAs/s1600/small%2528600_337%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="337" data-original-width="600" src="https://4.bp.blogspot.com/--Cm2Buvf3ck/XDm9Cw0bblI/AAAAAAAADTY/Ug7YKdiR2NYftyipRRGf9ZQRXMA4VyWXQCLcBGAs/s1600/small%2528600_337%2529.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-dlaxL9Xg69w/XDnAIk5gAnI/AAAAAAAADTw/1r8LANZbsO4oXvJvIZdDCNuYGRt6oezCACLcBGAs/s1600/small%2528450_253%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="253" data-original-width="450" src="https://1.bp.blogspot.com/-dlaxL9Xg69w/XDnAIk5gAnI/AAAAAAAADTw/1r8LANZbsO4oXvJvIZdDCNuYGRt6oezCACLcBGAs/s1600/small%2528450_253%2529.png" /></a></div>
<br />
-----如果文章對您有幫助,打開微信掃一掃,請作者喝杯咖啡。-----