如何將圖像添加到 WordPress

已發表: 2020-05-10

這篇文章可幫助您了解如何將圖像添加到 WordPress。 我讓您知道如何將單個圖像直接添加到頁面。

WordPress 畫廊可用於顯示多張圖像,並在另一篇文章中介紹。

您還將了解如何獲取圖像、調整大小和壓縮。

直接跳到將單個圖像添加到 WordPress

為什麼要在 WordPress 上使用圖片?

定期添加圖像以使閱讀體驗更加愉快,這是搜索引擎的獎勵。

如果搜索引擎看到合適的圖像,他們會對網頁進行更高的排名。

他們知道人類是視覺的,網頁看起來更像是沒有圖像的文本文檔。

讀者對圖像的外觀更滿意,最終這就是搜索引擎希望網頁做的事情——吸引觀眾。

為博客或網站採購圖片

考慮形狀

在決定圖像時,首先要考慮形狀。

  • 它需要適合指定的空間——是風景、肖像還是正方形?
  • 我們不想在調整大小後失去圖像的主要焦點。

在花錢之前截圖庫存圖片。 即使上面有水印,也可以在最終購買之前檢查尺寸、形狀和顏色。

在哪裡可以找到圖像

我使用了許多照片和圖形的來源,並且很少創建自己的。 這取決於圖像的使用位置。

在我的網站上,我希望照片看起來很專業,但我的博客可以擁有更輕鬆、更友好的氛圍。

有多種方法可以免費或付費獲取網站或博客的照片。

聘請專業攝影師

我是專業攝影師的倡導者。 專業照片可以使網站看起來清晰。

如果你買不起專業攝影師,你可以試試當地的業餘攝影師。 業餘攝影師熱衷於將作品集放在一起,因此通常會更便宜。

一個企業可以付給攝影師一天或半天的費用,以獲得他們幾年所需的所有商業鏡頭,這確實是值得的。

在一天內完成產品、產品組合和團隊照片。

整理場地、清潔商務車輛、理髮,並努力在工作場所內外拍出好照片。

但是,我知道攝影師對於產品周轉率高的初創公司來說可能會變得昂貴。 在家拍照也可以。

自己拍照

如今,智能手機擁有非常好的相機。 如果您有眼光,拍攝自己的照片可以非常有效並且省錢。

將相機設置為最高分辨率,這樣您就可以隨心所欲地裁剪照片。

有助於家庭攝影的有用產品。

  • 相機三腳架。
  • 三腳架手機支架。
  • 章魚三腳架。
  • 攝影照明套件。
  • 燈箱工作室套件。

可以使用三腳架、漂亮的背景和良好的照明來拍攝團隊照片或視頻。 如果您經常需要它們,那麼花錢購買一些設備是值得的。

使用燈箱工作室套件或攝影照明套件中較高的漫射燈為您的網站拍攝小型產品。

自然的“家庭攝影”確實有助於將生活、性格和現實融入博客或社交媒體帖子中,所以不要害怕自然環境或自拍。

詢問朋友或業務關係

你可以交換一項服務——請朋友或業務關係提供照片。 提供引用它們或提供指向其網站的鏈接,這對 pageRank 非常有價值。

使用股票網站

創建適合文章的圖像很可能被證明是困難的,這是股票網站非常有用的地方。

有大量的股票網站提供關於您能想到的幾乎任何主題的照片、圖形、插圖、圖標和視頻——一個非常有用的資源。

您可以獲得終身許可證低至 5 英鎊的專業照片。 如果您正在經營一家企業,那非常值得。

我喜歡的一些圖片庫網站是:istockphoto.com、twenty20.com、shutterstock.com。

名為 Pexels 的免費圖片庫網站非常棒。 從業餘攝影師那裡下載免費照片並上傳您自己的照片。

使用 Google 圖片,“標記為可重複使用”

Google 提供了一種搜索工具,可幫助查找標記為可重複使用的圖像。

  1. 直接訪問 www.google.com 並蒐索主題,然後單擊圖像。
    或者直接訪問 images.google.com。
  2. 在頂部單擊搜索工具。
  3. 單擊“標記為重用”選項。

谷歌顯示了一個標記為可重複使用的圖像網格,即使是商業用途。

谷歌圖片搜索,標記為重複使用突出顯示
Google 提供了一種搜索工具,可幫助您查找標記為可重複使用的圖像。

保持警惕。 檢查每個圖像的版權是您自己的責任。 遵循指導方針——如果你不這樣做,你可能會被處以重罰。

點擊圖片訪問網頁。 閱讀版權要求。

可能需要指向攝影師頁面的鏈接或信用。

使用 Google 圖片時的警告

公共領域中的某些圖像可在商業站點上重複使用,而其他圖像則不能。

像其他任何東西一樣,照片和圖形是由有技能的人創建的。 因此,即使沒有明確說明,他們也擁有這些權利。

直接從 Google 或任何其他網站下載圖像時要小心,濫用會被處以巨額罰款。

為 Web 調整大小和壓縮圖像

圖像調整大小、壓縮、保存和放置的方式將影響網頁的搜索引擎排名。

圖片加載緩慢的網站會受到搜索引擎的懲罰。 遊客也不會總是想等他們。

我寫了一篇專門討論這個主題的帖子——如何調整網絡圖像的大小。 這篇文章討論了按像素調整圖像大小並壓縮它們以減少千字節。

不幸的是,這裡沒有單一的標準尺寸可以讓您知道。

所有網站都不同,並且可以在多種屏幕尺寸上看到圖像——小到手機,大到電視。

請記住以下幾點:

  • 照片的寬度永遠不應小於450 像素,因為它們可能會在移動設備上堆疊,450 將填滿移動屏幕並且剛好超過一半的中等屏幕,非常適合兩列顯示。 這些是大多數 WordPress 插件的默認設置。
  • 全屏放大或眾所周知的“英雄圖像”(位於網站頂部從屏幕左側延伸到右側的圖像)需要高達 1920 像素寬才能容納超大屏幕。 這是相當大的,甚至不足以容納更大的電視。
  • 考慮在 WordPress 中使用自適應圖像插件來為設備顯示足夠的尺寸。

閱讀我的帖子 - 如何為網絡調整圖像大小以獲取更多詳細信息。

保存圖像以供 Google 搜索

如果以正確的方式保存圖像,搜索引擎可以立即識別出圖像所說明的內容。 文件名是搜索引擎優化的重要組成部分。

根據照片的主題保存圖像。

即,將圖像保存為 <strawberry-cheese-cake.jpg> 比 <image07_912.JPG> 提供更多信息和更有效。

搜索引擎會認可這種努力。

Google 質量指南要求網站所有者盡可能“將圖片放在相關文本旁邊”。 確保您使用的任何圖像都與文本相關。

正確調整大小、壓縮和保存圖像後,您就可以將其添加到 WordPress。

將圖像添加到 WordPress

如何將圖像添加到 WordPress
  • 登錄到您的 WordPress 管理區域並導航到帖子或頁面。
  • 使用 Gutenberg 塊編輯器,我們將點擊 + PLUS 圖標添加“圖像塊”。 只需將鼠標懸停在頁面上已使用的任何塊上。 加號圖標出現在塊下方。
在塊編輯器 (Gutenberg) 中將圖像添加到 WordPress
  • 點擊加號後,會彈出一個包含阻止選項的菜單。
  • 有一個“最常用”的部分,對於經常使用的塊很方便。 如果您在此處看不到 IMAGE,請使用頂部的搜索字段。
  • 新圖像塊位於您單擊的加號下方。 可以使用選定塊左側的向上/向下箭頭輕鬆移動塊。
  • 點擊上傳按鈕上傳圖像。
  • 圖像將出現在塊內。 您上傳的任何圖像也將顯示在媒體庫中。

WordPress 中的圖像對齊

可以使用工具欄在其塊內對齊圖像。 選擇圖像時,工具欄出現在左上角。

使用類似於帶有兩條線的框的圖標,一條在上面,一條在下面。

只需點擊圖標右側的箭頭,即可找到將圖像向左、向右、居中、寬或全寬對齊的選項。

始終保存,然後檢查前端以查看圖像的位置。 圖像可能不像您想像的那樣對齊。 後端編輯器講述了與前端不同的故事。

在台式計算機和移動設備上檢查它以使其在兩種屏幕尺寸上都正確。

也可以使用圖像工具欄鏈接或替換圖像。

用於圖像放置的 WordPress 列

我們使用 WordPress 塊編輯器中的列,將圖像放置在大屏幕上另一個塊的左側或右側。 想像一下並排顯示的報紙專欄。

例如,這就是我們在段落旁邊放置圖像的方式。

在像智能手機這樣的小型設備上,列會堆疊起來,一個接一個。 通常左列會堆疊在右列的頂部。

要創建 2 列:

  • 點擊加號來創建一個塊。
  • 現在點擊 COLUMNS 或搜索 COLUMNS。
  • 選擇最左邊的選項,兩列,等分。
  • 點擊每列中的加號將圖像添加到一列,如上所示。
  • 點擊下一欄中的加號以添加一個段落。

為 WordPress 中的搜索引擎優化圖像

我想強調 WordPress 提供的兩個更重要的屬性,以幫助網站所有者優化搜索圖像。

替代文字(替代標籤)

Alt text 代表替代文本,它是一個信息標籤。

Alt 標籤用於幫助人們 - 那些“關閉圖像”的用戶、有視覺障礙的用戶和/或使用屏幕閱讀器的用戶。

alt 標籤還可以幫助 Google 了解圖像是什麼。

寫作時使用關鍵短語。

在 WordPress 塊中,單擊圖像塊後,您將看到一個 ALT 標籤字段。 它位於頁面右側的塊設置下方。

圖片說明

提供圖片說明也將有助於搜索引擎排名,儘管我不經常使用它們,因為我覺得它們很亂。

Google 希望您在用戶訪問網站後為他們提供良好的體驗。

要添加標題,只需單擊頁面上的圖像塊,圖像下方將出現 CAPTION 字段。

如果您不包含標題,則此處根本不會顯示任何內容。

WordPress 畫廊

WordPress Gallery 提供了在一個區域中包含多張照片的能力,所有照片都具有相似的佈局。

添加 WordPress 畫廊的快速教程:

  • 點擊加號來創建一個塊。
  • 搜索然後點擊畫廊。
  • 頁面或帖子上會出現一個圖庫塊。
  • 單擊“上傳”按鈕從計算機上傳圖像。
  • 使用“媒體庫”按鈕可包含媒體庫中已託管的圖像。
  • 選擇多張圖像 - 它們將以藍色突出顯示,您會看到一個勾號。
  • 點擊右下角標有“創建新畫廊”的藍色按鈕。
  • 使用左側的鏈接繼續添加到圖庫。
  • 或者使用左下角的藍色按鈕將畫廊插入頁面。

畫廊出現在頁面上後,可以更改設置——選擇畫廊塊,然後使用右側邊欄中顯示的塊設置。

我寫了一篇更深入的文章,這將有助於 – WordPress 畫廊 – 添加、編輯和增強。

將圖像添加到 WordPress 的快速過程

  • 找到比例適當的圖像。
  • 檢查它是否可以重複使用或購買許可證。
  • 調整像素寬度以適合文章。
  • 使用壓縮軟件來降低 kb。
  • 根據谷歌要求保存。
  • 使用塊將其添加到帖子、頁面或 WordPress 畫廊。
  • 使用 ALT 標籤、標題標籤和標題優化每個圖像。