在WordPress上傳圖片後顯示不正常?實用外掛教學

在WordPress上傳圖片後顯示不正常?

當你上傳圖片到媒體庫,WordPress會生成該圖檔的多個縮圖副本,預設情況下,WordPress生成4種尺寸:縮圖、中等尺寸、中大尺寸、大尺寸。

WordPress縮圖
WordPress 圖片尺寸

上傳完畢後在媒體庫的後台看只有一個圖檔,但其實從 FTP 登入 WordPress 的 upload 資料夾 後,會到看很多不同尺寸的縮圖。但你有可能只會用到原始尺寸的圖片,而其他尺寸永遠都不會用到,卻佔據了你的硬碟空間

當你在頁面或文章上傳圖片時,右側的設定欄就可以選擇圖片尺寸大小,這就是透過內建的縮圖來完成。

上傳圖片後利用外掛禁止縮圖產生

外掛 Stop Generating Unnecessary Thumbnails 可以在後台的外掛安裝中直接搜尋到,這個外掛的功能就是將 WordPress 內建的其他圖片尺寸關閉。安裝完成之後,可以在媒體庫–>圖片尺寸設定。

Stop Generating Unnecessary Thumbnails
Stop Generating Unnecessary Thumbnails

可以看到產生縮圖的尺寸,可以手動關閉產生縮圖。

  • 適用於任何外掛和主題。
  • WooCommerce 兼容。
  • 多站點兼容。
  • 非常容易安裝和配置。
  • 它是免費的,而且永遠都是。

停止內建圖片的其他尺寸後,之後再上傳新的圖片就不會產生縮圖,之前已經產生的縮圖並不會被清除,若不需要可至FTP手動刪除。

禁止縮圖產生可以為你減省不少空間容量,但因為沒產生縮圖,所以圖片的壓縮更重要,上傳圖片前可以先到 Squoosh 壓縮你的圖檔,大概可以壓縮80%。(建議閱讀:Google Squoosh 圖片壓縮工具教學 免費!高質量!

延伸閱讀:

Google Squoosh 圖片壓縮工具教學 免費!高質量!

squoosh

Google 一直致力於加快網站載入速度,以此提升使用者體驗,因此 Google 在 2018 年 11 月 12 日發布了一項新工具「Squoosh」以降低網站圖片的大小,這項好用的功能能夠幫助圖片減肥、壓縮圖片大小,而「Squoosh」厲害之處在於,壓縮圖片大小的同時,又不會失去圖片的品質。

以下是官方的介紹影片:

Squoosh 使用教學

Squoosh」雖然是線上壓縮工具,但其特點在於能夠「離線使用」,當你第一次連上網路開啟後,之後進入 Squoosh 就都能以離線方式使用,即使在沒有網路情況之下,依然可以使用 Squoosh 進行圖片壓縮,在後續再次進入 Squoosh 後,就可以看到下方顯示「Ready to work offline」。

Total Time: 15 minutes

進入Squoosh網站

squoosh 2

可以直接將要壓縮的圖片拉進中央,或是點選加號選擇圖片檔案。

圖片壓縮後台,左邊是原圖、右邊是壓縮後,可以比較兩者差異

squoosh 3

左下角是原圖的檔案大小,右下角是壓縮後的檔案大小
中軸直線可以左右拖曳移動來比較壓縮前後的圖片畫質差異

右下角可以進行更多設定

squoosh 4

可以重新調整圖片尺寸、剪裁,也可以微調顏色、壓縮品質等等,點開Advanced settings有更多其他設定。

可以選擇壓縮後輸出的圖片檔案類型

squoosh 5

「Squoosh」也提供多種壓縮格式,如:AVIF、OxiPNG、MozJPGE、WebP、Browser PNG、Browser JPGE、WebP等等
點選右下角下載icon就可以下載壓縮圖片了

Supply:

  • none

Tools:

  • Squoosh

Materials: none

Squoosh 的好處是已經整合各種強大的圖片編碼解碼器,不需要下載、安裝任何軟體,重要的是在網頁載入後即可離線使用,且無論是在手機、平板還是電腦上都能輕鬆使用。

延伸閱讀:

Google Search Console 顯示「thumbnailUrl」欄位未填

超實用免費影片素材網站

如果你有使用 Elementor 影音小工具的話,可能要注意有沒有使用圖片覆蓋功能。

Google Search Console 若偵測到會發送這樣的建議訊息給你:

您的網頁或功能可能會因為某些錯誤而無法顯示在搜尋結果中。以下是系統在您的網站上找到的錯誤項目:

「thumbnailUrl」欄位未填

指的是你網站的影片沒有使用縮圖。以下教你編輯 Elementor 影音小工具:

在右上角的藍色鉛筆點選右鍵,選擇編輯影音

elementor video 1
elementor 影音設定

右側的設定欄可以做一些基本的設定:

  • Source:選擇您影片的影音平台
  • 連結:貼上影片的連結
  • 自動播放:開啟網站時,自動播放影片。有開啟這項設定的話,手機版也可以做設定。
  • 播放管理器:影片的播放管理按鈕,關閉的話就不會顯示(播放、暫停、時間軸等等)

Elementor 影音小工具圖片覆蓋功能

點選上圖最下面的圖片覆蓋

elementor video 2
圖片覆蓋

這邊可以開啟圖片覆蓋,下方選取您要覆蓋的圖片。

也可以選擇是否要顯示播放圖示

elementor video 3
影片燈箱

開啟燈箱選項的話,點選影片時會自動跳出燈箱播放影片。若無則會在原處播放。

elementor video 4
影片尺寸

在樣式的地方可以調整影片顯示的長寬比播放圖示的顏色尺寸陰影等等。

學會了嗎?可以回去檢查你的網站是否有影片還沒有做圖片覆蓋的處理唷!

延伸閱讀: