如何最好地在線展示您的圖像

已發表: 2013-12-18
更新於

圖片最佳實踐 無論您擁有什麼樣的網站,您的內容都可能是文本和圖像的混合體。 對於攝影師、藝術家和其他創意人員來說,您網站上的圖像可能是您內容中最重要的部分,因此了解如何正確呈現它們至關重要。

當然,您可以通過 WordPress 儀表板繼續上傳照片和圖形而無需任何進一步的考慮,但如果您想確保您的網站快速加載、易於閱讀並針對搜索引擎進行了優化,那麼您最好閱讀這篇文章在您的網站中使用圖像時的最佳實踐簡短指南。

保存和上傳圖像

雖然 WordPress 可以直接從您的計算機上傳大圖像並自動顯示它們以適合您博客的寬度,但我們不建議您上傳未經處理的圖像。

如果代碼中有指示,任何 Web 瀏覽器都能夠以比實際尺寸更小的尺寸顯示圖像,但這樣做不會導致實際文件大小的減小。 以 50% 的全寬和全高顯示的 500kb 圖像仍將是 500kb。 不熟悉 HTML 和 WordPress 的博主可能會認為,因為他們的圖片在屏幕上看起來不大,這意味著他們可以快速下載,但情況並非總是如此。

要檢查您的圖像大小,請右鍵單擊或按住 Control 單擊博客中的圖像,然後從菜單中選擇查看/打開圖像(措辭會因您使用的瀏覽器而略有不同)。 如果打開的圖片比您在博客上看到的大得多,這意味著您的圖片尺寸不正確。

如果您有一個圖片較多的博客,並且在上傳圖片之前沒有調整圖片大小,那麼您的網頁的合併大小可能會過大。

在上傳圖像之前,花幾分鐘調整和壓縮圖像是非常值得的。 這可以在 Photoshop 或您使用的任何其他圖像編輯軟件中輕鬆完成。 您還可以使用免費的在線工具,例如 PicMonkey 和 Dynamic Drive 的圖像優化器。

手動調整圖像大小可以讓您完全控制壓縮並大大減少上傳時間,但如果您願意,您也可以選擇使用 WordPress 在每次上傳時自動生成的調整大小的圖像。 當您在帖子中插入圖片時,您可以選擇插入全尺寸、大尺寸、中尺寸或縮略圖尺寸的圖像。 您可以在設置 > 媒體中編輯這些尺寸以適合您的博客設計。 請注意,如果您選擇此方法,任何人都可以從您的網站免費下載原始的全尺寸圖像——這對於攝影師和插畫家來說不是最佳選擇!

圖像優化和可用性

除了確保您的圖像尺寸正確並針對頁面加載時間進行了優化外,您還應該確保它們已針對 SEO(搜索引擎優化)進行了正確標記。 SEO 使搜索引擎更容易找到和索引您的網站,與未優化的網站相比,利用良好 SEO 技術的網站可能會在搜索引擎結果頁面中出現更高的位置。

對 SEO 的全面討論超出了本文的範圍(無論如何,許多 WordPress 主題都是開箱即用的 SEO 友好型),但是優化您的圖像元信息是一種簡單的方法,可以讓您的現場 SEO 得到一點提升和可以幫助人們通過 Google 圖片搜索和其他基於圖片的搜索引擎找到您的網站。

正確標記圖像對於可用性也很重要,尤其是在圖像說明重要信息時。 在圖像無法加載或無法看到的情況下(由於互聯網連接緩慢、圖像已關閉或視障用戶),必須提供替代文本描述。

1. 文件名

首先,當您保存圖像時,請確保它們具有描述性文件名。 將您的圖像命名為 IMG_013445.jpg 或它們從相機中取出時的名稱不會給搜索引擎任何關於它們所描繪的內容的線索。 使用用連字符分隔的適當描述性關鍵字,例如 children-playing-ocean.jpg

2.替代文字

當您通過媒體上傳器上傳圖像時,WordPress 提供了幾個文件描述字段。 雖然這些可以留空(許多博主這樣做是為了節省時間),但您填寫的字段越多,搜索引擎優化和可用性就越好。 其中最重要的是替代文本,是“替代文本”的縮寫。

這是當圖像關閉或由於其他原因無法顯示時顯示的文本,因此它應該作為圖像的描述。 搜索引擎也會閱讀此文本並使用它來決定頁面的內容以及將您的網站放置在列表中的哪個位置。 例如,如果您是德克薩斯州的婚禮攝影師,您需要確保所有博客圖片的替代文本都包含大量描述性文本,包括“婚禮攝影師”和“德克薩斯州婚禮攝影”等關鍵字。 儘管請注意,與您的博客文本一樣,重要的是不要在圖像描述中過多地填充關鍵字。

將相同的替代文本複制並粘貼到所有圖像中以節省時間可能很誘人,但理想情況下,您的每個圖像都應該具有正確描述它的唯一替代文本。

3. 圖片標題

圖片標題與替代文字相似,但用途略有不同。 標題不應提供圖像的替代信息,而應提供附加信息。 圖像標題是當您將鼠標懸停在圖像上時出現在彈出框中的“工具提示”文本。 此文本對於可用性和 SEO 都很重要,並且應提供有關圖像或其鏈接位置的快速相關信息。

圖片標題應該與替代文本略有不同,並且每張圖片都應該是唯一的。

4. 圖片說明

標題是通常顯示在圖像下方並提供附加說明或支持性文本的文本。 使用標題是可選的,但如果您使用來自其他站點的圖像,它們可以方便地提供有關您的圖像的其他信息或引用來源。 將標題想像成藝術畫廊展覽中的信息標籤。

圖像鏈接

默認情況下,當您將圖像插入頁面或帖子時,WordPress 會將其鏈接到僅包含圖像的新頁面。 這沒有真正的原因,甚至可能對您的網站在 SEO 方面造成損害。

這也可能是一個很大的可用性問題——如果用戶將鼠標懸停在你的圖像上並看到它是一個鏈接,他很可能會認為它鏈接到一個包含有用信息的頁面。 點擊這些只有圖片的頁面對訪問者來說是浪費時間,甚至可能導致您失去訪問者。

要解決此問題,只需在 WordPress 中上傳圖片時選擇“無”作為“鏈接 URL”字段,除非您確實想將其鏈接到特定頁面。 如果這樣做,請確保使用圖像標題或說明來指示圖像鏈接到的位置。

圖像放置

除了確保您的圖像針對 SEO 和用戶友好性進行了優化外,考慮到它們如何與您的文本相適應也很重要,因為它們具有美學和可讀性的原因。

您可能更喜歡使用內聯圖像(比主列小,因此文本環繞它們)、全角圖像或兩者的組合。 您應該避免使用非全寬的獨立圖像,或一系列不同寬度的圖像,因為這看起來不專業且沒有吸引力。

為此,您應該確保縱向圖像與橫向圖像的寬度相同。 注意圖像的高度——如果它們太高,它們可能會在較小分辨率的屏幕上溢出。 這將導致用戶必須滾動才能看到完整的圖像,應該避免這種情況。 如果您的圖像太大而無法以縱向格式顯示為全寬,您可以並排製作兩個或多個縱向圖像的拼貼。

內嵌圖像可以為您的內容提供一些多樣性,並有助於分解大量文本。 對於不適合全寬顯示的較小或較窄的圖像,它們也是一個不錯的選擇。

當您使用內聯圖像時,最好再次確定設置的寬度以保持視覺一致性。 這應該不超過文本列寬度的一半,因為比這更寬的圖像會過度壓縮文本並使其難以閱讀。

內聯圖像應始終與文本的右側而不是左側對齊,以免破壞左邊距並降低可讀性。

用圖片美化你的博客

使用圖像對於創建一個有趣且具有視覺吸引力的博客很重要,而在營銷您的創意業務時,它們甚至更為重要。

遵循我們在本文中介紹的技巧,以獲得經過良好優化、呈現良好的圖像,您的網站不僅看起來很漂亮,而且加載速度也很快,閱讀起來很愉快,並且對搜索引擎更具吸引力。 出版愉快!