1. 程式人生 > >如何在微信朋友圈分享網頁內容的時候能夠有縮圖

如何在微信朋友圈分享網頁內容的時候能夠有縮圖

寫了一篇web文章,在微信裡邊分享,怎麼才能有縮小的圖片呢?這裡說的就是朋友圈裡邊,別人分享的文章,旁邊都有一個小個的圖片。或者說發給朋友的時候,也有一個縮圖。


我們在編寫網頁的時候,如果使用微信API的話,是可以的,因為有相應的事件配置,如果你做過微信開發你應該知道我在說什麼。但是那個比較複雜,而且要求是要認證的公眾號。這裡我們不討論。

這裡來簡單說一下比較容易的方法。原理就是,微信會預設選擇第一個符合條件的圖片作為縮圖顯示在朋友圈。如果你的文章中沒有任何圖片,當然縮圖會是一個空白,如果你的文章中有圖片但是不符合要求,那麼縮圖也會是一個空白。那麼如何準備符合要求的圖片呢?

首先準備一個

jpg圖片。我不知道其他格式諸如png的是否可以,我也沒有試,但是jpg是肯定可以的。這個圖片的解析度要符合要求,我也不知道具體微信要求的解析度是多少。但是同一張圖片,我使用180*180版本的,就無法獲取到縮圖。使用400*300的,就能獲取到縮圖,所以大致應該在最低畫素300左右。

如何檢視一個圖片的解析度?用電腦的資源管理器就可以。你點選這個檔案,然後在螢幕下方就會出現解析度的資訊。


注意,解析度並不是越大越好。開始的時候我用了一張手機拍攝的最原始的照片,高清,檔案容量2M多,解析度 3000*3000,這個造成的原因就是頁面在載入這個圖片的時候很慢,而且點選微信右上角的分享按鈕之後,很久都沒有反應,因為其載入縮圖的過程由於圖片很大,速度很慢。

這裡有人問,我手頭就有一個2M多的檔案,如何把解析度降低?當然有很多工具,比如說強大的PhotoShop.但是更方便的是,我們用自帶的畫圖工具就可以完成。




最後點選另存為就可以了。上邊所說的都是如何在文章中插入一個符合條件的圖片。

現在如果有人問,我文章中根本不需要這張圖片,但是我想分享的時候有這個縮圖,怎麼辦?如果你能改程式碼的話,可以這樣。你在緊挨著body標籤的旁邊加入這張圖片,但是把其設定為display:none就可以了。這樣既不影響原有的文章排版,也有了縮圖。

<div id="Div1" style="display: none"><img id="Img1" width="100%" src="Content/images/logo/robin3.jpg" style="position: absolute; top: 0; left: 0;"></div>