如何像專業人士一樣輕鬆地將圖像添加到您的博客
已發表: 2020-04-28你寫了你有史以來最好的博客文章。
說真的,這是很棒的東西,在大量飢餓的讀者中傳播開來。
哇,銀! 首先,你需要引起他們的注意。
在任何人閱讀您的精彩文章之前,他們需要先停下來注意。
這就是圖像進來的地方..

圖片、視頻、屏幕截圖、圖表和插圖是防止讀者點擊離開的好方法。 在您的博客中添加圖片有助於讀者了解您的信息和想法,並記住您的帖子。
訣竅是快速有效地創建和添加這些博客圖像。
在這篇文章中,我們將引導您完成將圖像添加到您的博客的所有步驟、工具和技巧,而無需花費數小時來完成。
為什麼圖像有效
“我們的大腦主要是一個圖像處理器,而不是文字處理器。” – 今日心理學
我們(從字面上看)是為圖像而連接的。 神經解剖學家 RS Fixot 估計,我們大腦三分之二的活動都用於視覺活動。 這是有道理的……
從歷史上看,我們用我們的視力來警告我們免受掠食者的惡劣攻擊,或者發現我們可以獵殺或採摘和收穫的食物。
網上不一樣。。。
您的讀者會無意識地瀏覽相關或有趣的內容,或兩者兼而有之。 事實上,包含相關圖片的文章的總瀏覽量比沒有圖片的文章多 94%。
包含相關圖片的文章的總瀏覽量比沒有圖片的文章多 94%點擊推文。
這就是圖像的幫助。 從簡單的圖片到自定義創建的 gif 任何內容都將使閱讀體驗更加有趣,並讓您的讀者向下滾動。

我們的大腦處理圖像的速度比文本快 60,000 倍
事實上,65% 的高級營銷主管表示,照片、視頻、插圖和信息圖表是其品牌故事傳播方式的核心。
那麼,如果圖片如此出色,您應該如何將圖片添加到您的博客中以獲得更多流量和更好的結果?
讓我們從圖像尺寸開始。
像素、格式、大小和所有這些東西
試圖了解不同的圖像尺寸選項可能會變得非常複雜。 要知道的兩個基本知識是方向和大小/壓縮。
方向
對於大多數博客,水平方向(寬度大於高度)效果更好。 水平/橫向圖像在屏幕上佔用的空間更少,讓您的內容能夠吸引讀者的眼球。 水平圖像也非常適合在 Facebook、Twitter 和 LinkedIn 上分享您的博客。
但垂直或方形圖像在 Instagram 上的表現更好,更有可能被固定在 Pinterest 上。 原因很簡單——Instagram 和 Pinterest 都是關於圖像的。 垂直/縱向圖像佔用更多屏幕空間,這使它們更加引人注目。
您選擇的方向取決於您的用戶以及他們使用的社交平台。
Sprout Social 在這篇文章中為各種社交媒體渠道維護了一個最新的最佳圖像尺寸列表。

了解您使用的每個平台的圖像尺寸基礎知識非常方便。
尺寸/壓縮
圖像大小可能意味著兩件事——圖像的物理大小(長 x 寬)和文件大小(字節)。
大多數直接來自相機或庫存照片網站的圖像的分辨率(文件大小)和物理大小都高於網絡所需的大小。 大圖像文件的問題是它們會減慢您的網站速度。
數碼照片由像素 (px) 組成——顏色的小方塊。 我們通常以兩種方式談論像素——像素數和像素密度。 像素數是構成照片的像素數。 因此,一張 800 x 600 像素的照片僅意味著您的照片寬 800 像素,高 600 像素。

左邊的圖像是 3456 × 5184px 和 2.7Meg。 右邊的圖像縮小到 800 x 1200 和 193kb。
像素密度或 dpi 是每平方英寸的像素數。 每平方英寸的像素越多,圖像的分辨率就越高,也就越清晰。
對於打印照片,300dpi 或更高是理想的。 但是,對於網絡來說,一個好的範圍是 72-150dpi。
適合您網站的最佳尺寸
您網站的目標是良好的分辨率(不模糊)和速度(不大)。
您的圖像應該只與您的博客內容寬度一樣大。 所有現代網站均採用響應式設計(自動調整智能手機、筆記本電腦、平板電腦和台式機屏幕的頁面大小),將圖像設置為最大寬度。
在文件大小和質量之間找到平衡
圖像的文件大小越小,閱讀器加載的速度就越快。 但是,過度減小尺寸會產生模糊的圖像。 您的目標是在最小的文件大小和可接受的質量之間找到平衡點。
盡量將圖像大小保持在 150KB 到 300kb 之間。 看看下面的例子。 原始圖像為 7.6MB 和 5000 像素寬。 左邊的圖像被調整為 860px 寬並保存為高質量的 jpeg,生成了一個 250KB 的文件。
在線查看時,您幾乎無法分辨此圖像與原始圖像之間的區別。 它非常適合網絡。
右邊的圖像被調整為 860px 寬,但保存為低質量的 30KB jpeg。 當然,它會很快加載,但它很模糊,看起來很業餘。

最佳圖像大小為 150-300kb。 任何更小,您的圖像都會太模糊。
當然,將圖片添加到您的博客時,並不總是可以將圖片保持在 300KB 以下。 在視網膜顯示器上,一張復雜的照片在 300KB 時可能看起來很模糊。
關鍵的帶回家的想法是保持文件大小盡可能小,特別是如果您在帖子中使用大量圖像! 頁面加載時間會影響您的谷歌排名,並且讀者可能會被關閉需要很長時間才能加載的頁面。
有許多免費服務可用於減小圖像大小,例如 Pic Resize 和 Tiny PNG。 或者,您可以使用 Canva 或 PicMonkey 等免費設計網站為任何社交媒體網站或您的網站獲取合適的尺寸和分辨率(更多關於使用下面這些工具的信息)。

Pic Resize 之類的工具可以在不犧牲質量的情況下輕鬆縮小圖像的分辨率
我使用 JPG、GIF、PNG、SVG 嗎?
如果您曾經對所有圖像類型(jpeg、gif…)感到困惑,這將有所幫助。
將圖像添加到您的博客時,最好的格式是什麼?
- • JPG/JPEG – 以小文件大小提供高質量圖像。 這是照片的最佳選擇,除非它們需要透明、動畫或包含大量文字
- • GIF – 非常適合小型圖形和動畫,它們可以有透明背景。
- • PNG – 非常適合詳細的圖形、帶有大量文本的圖像或透明圖像。 PNG 文件往往比 JPG 文件大。
- • SVG – 這是一種可擴展的矢量格式,這意味著它在任何分辨率下都保持清晰。 它們在文件大小方面往往很大,但如果您有一個複雜的圖形需要自動調整大小,和/或具有翻轉效果或動畫,那麼 SVG 是一個完美的選擇。
在大多數情況下,除非您想要透明背景,否則對所有圖像都使用 jpeg。
注意:並非所有網站都設置為自動處理 SVG 文件。 WordPress 有一些有用的插件。 對於非 WordPress 網站,試一試,如果您的 SVG 文件未顯示,請諮詢您的 Web 開發人員。
測試你的圖像
不確定您的圖片將如何在線顯示? 大多數內容管理系統(如 WordPress)允許您在發布之前預覽您的草稿博客文章。
特色圖片
每篇博文都需要一個特色圖片。
您的特色圖片是您的讀者看到的第一件事,並且是您的社交媒體渠道提取的圖片。 在本文中,我們將解釋如果您的圖像沒有被您的社交渠道正確拉取,該怎麼辦。
您的特色圖片可以是一張照片,或者通過一些額外的工作,將您的標題疊加在圖片上。 無論哪種方式,它都需要創造一些好奇心並讓讀者想要繼續閱讀。
在 WordPress 中,您會在 WordPress 菜單的右側找到選擇特色圖片的鏈接。

製作自己的形象
庫存圖像很棒,但原始圖像更好——即使您只是為庫存圖像添加一個扭曲。
您不必成為圖形藝術家或擁有昂貴的軟件來創建自己的圖像。 Canva 和 Picmonkey 等免費工具具有廣泛的模板、圖像以及即用型圖形和字體。 通過一些練習,您可以在圖像上添加獨特的旋轉或創建報價圖像、模因、圖表和信息圖表。
這是我在 Canva 中僅用 5 分鐘製作的圖像。

通過一些額外的努力,您可以將您的標題覆蓋在您的圖像上。
一旦您對這些工具感到滿意,您就可以對結果進行創意。 調整圖像大小、添加屏幕、裁剪等簡單技術——即使選擇更有趣的字體也會讓您的圖像脫穎而出。
在這篇文章中了解更多使您的圖像流行的簡單技術。
[你不必成為平面設計師來裝扮你的圖像,讓它們脫穎而出。]
避開法律
您已經搜索了網絡,找到了完美的圖像,並將其添加到您的博客中。
快進兩個月,您會收到一封要求賠償損失的“停止和終止”信。
哇哦?
圖像擁有所有權,就像藝術品一樣。 未經所有者許可,您不能使用某些圖像。 在這篇文章中,我們將解釋知識共享如何與圖像一起使用。
好消息是有比以往更多的網站為您提供精美的圖像,您可以購買用戶權利或通過歸功於藝術家來使用。
歸功於藝術家
如果您在知識共享許可下使用圖像,最好註明攝影師和來源。 大多數庫存照片網站會在您下載圖片時為您提供鏈接。


借助 Unsplash 之類的網站,它們可以輕鬆複製藝術家的功勞,這樣您就可以將其粘貼到帖子底部
在 BlogWorks,我們為我們的圖片使用了許多網站。 我們確實有一個 Adobe Stock 帳戶,我們依賴於客戶的博客,此外,我們經常使用 Pixabay、Unsplash、Refe 和 Magdeleine。
Adobe 提供高質量的圖像源以及其他創意軟件包。 如果您正在尋找一種簡單的新方法來查找或創建圖像,您可以在此處查看他們的產品。
如果您仍然找不到您想要的內容,請訪問 Librestock,其中匯總了來自 40 多個站點的圖像供您搜索。 我們列出了 7 個網站,可以在這篇文章中找到很棒的圖片。
您甚至可以使用 Google 將圖片添加到您的博客中 - 只需確保在工具下選擇“標記為可重複使用”。

如果使用 Google 查找圖片,請始終搜索“標記為可重複使用”
關於搜索“完美”圖片的快速提示:找到比您在前 5 分鐘找到的圖片稍微好一點的圖片不會讓您的帖子像病毒一樣傳播開來。 將自己限制在 5 分鐘內,以找到足夠好的圖像——如果找到更好的圖像,您可以隨時更改它。
使用真實人物的圖像
人物圖片是互聯網上最具吸引力的內容形式之一。
面孔是獨一無二的,人類對盯著面孔有著天生的視覺偏好。 面孔和人物的圖像會吸引讀者的注意力。
但是你的圖片需要與內容相關或有助於解釋一個概念或觀點——研究發現,當人們的圖片是通用的、裝飾性的圖片時,它們會被讀者掩蓋。
當談到社交媒體時,面孔會吸引我們。 有面孔的照片吸引了更多的評論和喜歡。
如果我要向我們的博客添加圖片,我會盡量避免使用俗氣的庫存圖片,比如左邊的圖片,並尋找更原始的圖片,比如右邊的圖片。

圖庫攝影可以是千篇一律,非原創,有點無聊(左)或更有趣和原創(右)
添加屏幕截圖和圖表
假設您正在嘗試解釋如何使用在線搜索引擎或在您的網站上的何處找到您的最新書籍,甚至如何確保您的選擇加入電子郵件沒有進入該人的“促銷”文件夾郵箱。
有點難以用語言來解釋——對吧?
這就是屏幕截圖非常有用的地方。 在幾分鐘之內,您就捕獲了圖像,添加了幾個箭頭,現在您的圖片值一千字——而且您可以讓更多人去正確的地方!
像 Snagit 這樣的工具是一項非常寶貴的投資。 只需 50 美元,您就擁有了一個隨時可用的屏幕截圖、視頻甚至 gif 圖像(本文中使用的所有屏幕截圖都是使用 Snagit 創建的)。
這是我在 Snagit 中創建的使用 Snagit 編輯屏幕截圖的視頻(現在是元數據!)。

自定義圖形和圖表是解釋複雜概念或只是為您的帖子增添一些樂趣的另一種好方法。 OmniGraffle 和 Lucidchart 提供了可用於製作有趣圖表的流程圖工具。 Piktochart 有一個免費版本,用於創建信息圖表和數據驅動的圖表。
需要一張圖表來幫助說明一些信息? 您可以直接從 Excel、Google 表格或 Word 中獲取它們。 只需複製圖表並將其粘貼到文本編輯器中,或截取屏幕截圖即可。
不要害怕拿起鉛筆或鋼筆! 畫出你的想法並拍照。 如果你不是藝術家也沒關係——你的讀者會喜歡看到你和他們一樣!

添加視頻和 GIF
有時僅靠文字是不夠的。 這就是視頻和動畫可以發揮作用的地方。
Giphy 和 Tenor 是製作 GIF 動畫的好資源。 Sitepoint 有一個很好的資源列表,可以找到知識共享圖像、視頻和其他媒體。
很多次有人問我如何將視頻添加到我的博客中。 我當然不是專家,但是當談到任何聞起來很技術的東西時,我會提醒自己“完成勝於完美”並且我保持簡單。 從頭到尾,一個簡單的視頻應該不會超過 15 分鐘。
這是我所經歷的步驟的說明。

您確實需要在某處託管您的視頻。 我們已經使用 Vimeo 多年,並且喜歡它的價格以及使用的快速和簡單。 您還可以使用 YouTube 或 Wistia。
練習幾次後,將視頻添加到博客的步驟非常簡單,但具體取決於您的網站和託管視頻的位置。
以下是將 YouTube 中的視頻插入 WordPress 的方法:
- 這個過程變得超級簡單。 首先在 YouTube 上找到您想要的視頻。
- 接下來,複製該視頻的 URL(類似於 https://www.youtube.com/watch?v=JKrPz6JHwYw)
- 登錄您的 WordPress 網站,打開博客文章進行編輯,將光標定位到您想要視頻的位置,粘貼 URL。
這個免費工具將允許您自定義 YouTube 視頻的外觀,並執行諸如關閉煩人的“相關”視頻之類的操作。
以下是將 Vimeo 中的視頻插入 WordPress 的方法:
- • 要獲取視頻的嵌入代碼,請轉到其在 Vimeo 上的頁面,然後單擊“共享”按鈕。
- • 單擊“+顯示選項”鏈接並複制嵌入代碼。
- • 登錄您的 WordPress 網站,打開要編輯的博客文章,然後單擊文本編輯器中的“文本”選項卡。
- • 將光標定位到您想要視頻的位置並粘貼嵌入代碼。

使用 Vimeo 等工具,您可以像專業人士一樣輕鬆地將視頻插入您的博客。
注意:如果您希望您的帖子被 Google 等搜索引擎收錄,您應該在您的視頻中包含文字。 您可以在 Wynn 的旅行視頻博客中看到它是如何完成的。 對於每篇博客文章,他們都有大量的文字、圖像和視頻,以保持您、讀者的興趣並用於 SEO。

使用一致的主題
當您選擇圖像或字體時,最好與您的網站和博客的主題保持一致。
它可以像使用一致的字體(我是 Helvetica Neue、Marker Felt、Yellowtail 和 Bebas Neue 的粉絲)、配色方案或圖標樣式一樣簡單。
客戶服務應用程序 Help Scout 在其博客中使用一致的設計元素方面做得很好,這些元素輕巧、現代且古怪。

選擇正確的文件名
圖像 SEO 以文件名開頭。 當您在博客文章中使用圖片時,您希望 Google 知道您的圖片是關於什麼的,甚至不用看它!
在上傳新圖像之前,請查看圖像的名稱。 您的圖片應命名為與圖片和/或文章內容相關的名稱。 它還應盡可能包含您的關鍵字。 為您的圖片選擇一個關鍵字豐富的名稱將使搜索引擎更容易對您的頁面進行排名。
例如,如果您正在撰寫一篇關於如何為小狗選擇最佳咀嚼玩具的文章,請將您的圖片命名為“best-chew-toy-for-puppies.jpg”。 如果您的圖像顯示泰國蘇梅島海灘上的日落,請將其命名為“thailand-koh-samui-beach-sunset.jpg”。
在單詞之間使用破折號,而不是空格、下劃線或將所有單詞放在一起。
此建議直接來自 Google。 我們不確定其確切原因,因為谷歌保護其搜索引擎算法的工作方式比魔術師保護他們的技巧更接近。 但谷歌網站管理員說,單詞之間的破折號有助於谷歌找到你的圖片!
替代文字
當您上傳圖片、視頻或其他媒體時,您可以選擇包含 ALT 文本。 你應該盡可能地這樣做。
ALT 文本告訴搜索引擎您的圖像,這有助於您的排名。 此外,屏幕閱讀器會讀出 ALT 文本,因此您可以幫助您的內容更易於訪問。

圖片上的 Alt 文字解釋了您的圖片是關於什麼的
你的 ALT 文本應該有助於解釋你的形像或你試圖說明的觀點。 就像選擇文件名一樣,您的 ALT 文本應該與您的文章內容或關鍵字相關。
字幕和標題
圖片標題通常出現在您的圖片下方。 許多讀者瀏覽文章,您的圖片說明可以吸引他們的注意力並讓他們對您的內容產生好奇。
在 BlogWorks,我們嘗試編寫添加到書面內容的標題。 這個想法是,如果讀者只閱讀標題,他們就會很好地了解文章的內容。
BarkPost 是每月一次的狗糧訂閱 Bark Box 的發明者,它用愚蠢、有趣的狗狗圖片與好萊塢小報式的頭條新聞相匹配來吸引愛狗人士(比如我),比如:
- • 5 種跡象表明您的狗眼鼻屎是由危險因素引起的
- • 18 隻狗不贊成這種你稱之為“洗澡時間”的水刑
- • 我為我的狗註冊了一個牙科護理盒,這就是發生的事情

您的最終清單
您添加到博客的任何圖像都應該使您的讀者體驗更好。 並吸引他們閱讀文章——這意味著他們在您的網站上停留的時間更長。
作為最後的檢查,問自己以下兩個問題:
- 這張圖片會讓讀者在頁面上停留更長時間嗎?
- 這張圖片是否有助於讀者更好地理解我的信息?
您在查找圖像並將圖像添加到博客中所付出的額外努力可以獲得豐厚的回報。 您的帖子不會被忽略,而是可以與成千上萬的讀者分享並擁有自己的生活。
畢竟,我們的目標是讓我們的博客被閱讀、分享和喜愛。 正確的?
喜歡這篇文章嗎? 這裡還有 3 個關於圖像、視頻和讓您的博客病毒式傳播的內容:
將 YouTube 視頻添加到您的博客的終極指南。
為您的博客提供免費圖片:7 個很棒的資源
4 種方法讓你的博客圖片流行起來
腳註:
- 1. 在美國眼科學雜誌上發表的一篇論文中,神經解剖學家 RS Fixot 估計,我們 50% 的神經組織與視覺直接或間接相關,我們大腦三分之二的電活動用於視覺處理。
- 2. 在 eMarketer 的一項研究中,照片佔全球 Facebook 頁面發佈內容的 75%,並產生了 87% 的粉絲互動率(相比之下,任何其他帖子類型的互動率都不到 10%。)
- 3. 喬治亞理工學院和雅虎實驗室的一項研究查看了 Instagram 上的 110 萬條帖子,發現有人臉的照片比沒有人臉的照片獲得點讚的可能性高 38%。 他們吸引評論的可能性也高出 32%。
照片由 LinkedIn Sales Navigator 在 Unsplash 上拍攝
