如何像专业人士一样轻松地将图像添加到您的博客

已发表: 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,我们为我们的图片使用了许多网站。 我们确实有一个 Adob​​e 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 的方法:

  1. 这个过程变得超级简单。 首先在 YouTube 上找到您想要的视频。
  2. 接下来,复制该视频的 URL(类似于 https://www.youtube.com/watch?v=JKrPz6JHwYw)
  3. 登录您的 WordPress 网站,打开博客文章进行编辑,将光标定位到您想要视频的位置,粘贴 URL。

这个免费工具将允许您自定义 YouTube 视频的外观,并执行诸如关闭烦人的“相关”视频之类的操作。

以下是将 Vimeo 中的视频插入 WordPress 的方法:

  1. • 要获取视频的嵌入代码,请转到其在 Vimeo 上的页面,然后单击“共享”按钮。
  2. • 单击“+显示选项”链接并复制嵌入代码。
  3. • 登录您的 WordPress 网站,打开要编辑的博客文章,然后单击文本编辑器中的“文本”选项卡。
  4. • 将光标定位到您想要视频的位置并粘贴嵌入代码。
如何像专业人士一样轻松地将图像添加到您的博客

使用 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. 1. 在美国眼科学杂志上发表的一篇论文中,神经解剖学家 RS Fixot 估计,我们 50% 的神经组织与视觉直接或间接相关,我们大脑三分之二的电活动用于视觉处理。
  2. 2. 在 eMarketer 的一项研究中,照片占全球 Facebook 页面发布内容的 75%,并产生了 87% 的粉丝互动率(相比之下,任何其他帖子类型的互动率都不到 10%。)
  3. 3. 乔治亚理工学院和雅虎实验室的一项研究查看了 Instagram 上的 110 万条帖子,发现有人脸的照片比没有人脸的照片获得点赞的可能性高 38%。 他们吸引评论的可能性也高出 32%。

照片由 LinkedIn Sales Navigator 在 Unsplash 上拍摄