网站建设:图像如何选用及优化?(附资源和工具)

该文讨论在建设好的网站过程中如何选用图像匹配您的内容提升吸引力增强用户转化,及对图像进行完全优化提升网站性能及搜索排名的文章。

网站图像如何选用并完全优化即提升网站性能和搜索引擎排名

图像优化是以理想的格式、大小和分辨率创建和交付高质量图像以提高用户参与度的过程。它还包括精确地标记图像,以便搜索引擎爬虫可以阅读它们并理解页面上下文。

首先,它们为搜索引擎提供重要的上下文信息。第二,优化后的图片加快了页面打开速度,这将增加了用户参与度和提升搜索引擎排名。

来自Httparchive.org的数据表明:截至2018年11月,图片平均占总网页重量的21%。因为图像比网站的其他部分消耗更多的字节,所以它们的大小和复杂性严重影响了网站的性能。

如果在不影响质量的情况下减小图像文件大小,页面加载时间会提高,随后,网站访问者的体验也会提高。 Aberdeen Group的一项研究表明,一秒钟的加载时间延迟等于转换率下降7%,大约40%的人放弃了一个需要3秒钟以上加载的网站

改进的用户体验和与网站的交互对搜索引擎排名有积极影响,这将进一步提高客户参与度、转化率和客户保持率。

而且,当优化后的图像占用服务器上的存储空间较少时,站点备份将更快完成。

顺着新龙的指引,您的图像将服务好内容并能提升网站在搜索引擎的排名和曝光度。下面我们开始吧:

一、正确选用图像发挥内容的效能

  1. 选用与内容相关联的图像。这一点对于提升用户可用性非常重要。选用于内容关联度高的图像能够帮助访问者更好理解您的文章,对于复杂性的内容如果配上合适的图像诠释,能够明确传递作者意图,发挥文字所达不到的作用;
  2. 图像需要传递与内容相协调的情感。这意味着你需要考虑到选择的图像对访问者情绪的影响;
  3. 图像需要有一个清晰的焦点。您的图像需专注传达主要内容,图像里的元素不可太多,避免访问者无法很快识别图像所要表达的含义;
  4. 谨慎使用来自网络图库站的图像,尽可能使用“唯一”的图像。很多时候需要使用“在线图库”的图像,但是在某些情景中,比如公司的产品、客服团队、企业文化活动、生产设备工作场景及产品图等等应反应企业真实性的这类图像需要自己拍摄。从SEO角度来说,“唯一”图像更利于排名。

以上是选择图像原则性要点,实际处理中我们还需要分辨图像的品质。什么图像品质呢?这需要做些比较,例如以下四张图:

如何选用图像
来源:https://visualhunt.com

第一张图飞机作为图片主体,太小。

如何选用图像
来源:https://visualhunt.com

第二张飞机尺寸合适,但整张图片前景有较大面积模糊,且背景色较暗淡。

如何选用图像
来源:https://visualhunt.com

第三张飞机尺寸合适,也没有明显的模糊,但是仔细看的话飞机的轮廓不够很清晰。

如何选用图像 来源:https://visualhunt.com

第四张相对来说比较理想,飞机轮廓及机身图案比较清晰,与图片背景对比比较分明。整体给人视觉品质更高的感受。

我们再来对比两张黄色飞机的图像:

网站图像如何选用
来源:https://visualhunt.com

这是一张黄色飞机图像,地面和高山都是深绿色,但是深绿色变化层次比较单一。整张图片看起来有点单调,飞机作为主体也不够明亮。我们来看下面一张:

网站图像如何选用
来源:https://visualhunt.com

太阳的余晖照在地面和飞机上,飞机机翼闪着亮光。地面呈现褐色,与飞机背后的晚霞形成同色系的变化层次,整个图像色彩饱满,更具欣赏性。

选用高质量的图像需要花费时间收集和比较,从中挑选一张即能表达文本含义并具强烈视觉效果的图像。

以下列出一些提供免费图库资源:

  • https://www.pexels.com
  • https://pixabay.com
  • https://unsplash.com
  • https://visualhunt.com
  • http://thestocks.im
  • http://www.raumrot.com
  • https://picjumbo.com
  • http://www.polayoutu.com/collections
  • https://kaboompics.com
  • https://moveast.me
  • https://www.lifeofpix.com
  • http://pngimg.com
  • http://www.designerspics.com
  • http://jeshoots.com
  • http://skuawk.com

说明:以上图库资源仅供参考,不保障以上网站的每张图均为CC版权声明。

二、重新确定图片尺寸和格式

图像大是指图像的长宽尺寸,例如1000X500像素,图像文件大小是指图像的字节数,例如1M字节,这意味着这张图在服务器上需要1M的空间量。不同的格式会带来字节数的变化。

传统的图像有四种格式:JPG, PNG, GIF, SVG。最近谷歌推出了WebP图片格式。

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;

不足是目前还不是所有浏览器支持WebP格式。

通常使用专业相机能够获得分辨率更高、尺寸更大的图像,但是这会大大增加网页加载时间。由于网页显示不如印刷需要较高的分辨率,因此我们可在不损失太多质量的情况下缩小文件大小,以便这些图像在网络上正常工作。

对于色彩丰富的图像,推荐使用jpeg格式;对于简单图像,推荐使用png格式;如果您的较大图像用于展示某些抽象内容,建议采用svg格式。

SVG 是可伸缩矢量图形 (Scalable Vector Graphics),图像在放大或改变尺寸的情况下其图形质量不会有所损失,它与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

在网页展示产品图时建议使用1000像素宽度,博客页面文章的推荐图像一般使用400-1200像素(谷歌建议移动端文章推荐图不小于1200像素)。“不是图像尺寸越小文件越小吗?”的确如此,但是对于兼容手机、平板和台式机的自适应网站来说太小的图片将导致人们用手机访问您的网页时图像因太小而被拉大,导致变得模糊影响用户体验。因此图像尺寸需要考虑手机屏幕尺寸制定。

请特别注意:网站的产品图请设置为统一的尺寸,比如1000X1000像素;网站的新闻图片请设置为统一尺寸,比如800X600像素或者1200X900像素。网站的某一个板块(比如页面的最新案例展示块)及每一个栏目下的图片需要统一尺寸。

如何压缩图像文件大小呢?以下是较好又免费的图像优化软件官方下载地址,可以批量优化图片:

以下是在线图像优化工具,每一款工具各有特点:

查看图片优化后的网页速度:

三、重新为图像命名

为图像命名非常重要,因为正确的文件名对于页面搜索引擎优化和图像搜索结果排名很重要。在上传任何图片之前,用相关的描述性关键字命名文件,以获得最大的SEO能力。从搜索引擎技术方面来说,爬虫无法读取图像中的内容,只能够通过文件名和图像的Alt等数据记录该图像。

在图像文件名开头应包含目标关键字并用连字符分隔这些词。不要使用下划线和空格,因为搜索引擎无法识别。

比如下面这张图,原始文件名为“3B0748C9A458E637EA091AEAF627A329.jpg”

green leaves

这么长一串数字的名字没有任何意义,我们把图像名字命名为:green-leaves.jpg,搜索引擎就能够比较好识别和收录。

对于企业的产品图更要注意命名,因为企业内部人员更关注用产品编号命名,而忽略外部市场人们通过自己熟悉的语句或者产品关键词查找产品,包括通过图片搜索来寻找产品和供应商。

因此我们需要通过关键词分析,搜索趋势,网站访问数据等方式来了解人们的想法和做法,从市场角度对图像命名。

根据图像命名关键词开头原则,产品图像命名可以是这样的组合:产品关键词+品牌词+产品编号,如果需要强化品牌,可以:品牌词+产品关键词+产品编号。请注意:词与词之间用中横线链接

四、优化图像Alt、Title、Caption

搜索引擎蜘蛛无法读取图像内容,因此图像Alt属性是必填项。如果没有这个文本,搜索引擎无法准确地索引图像内容。一个好的alt标签能够提供完整的图像含义,也可以帮助视力受损的用户了解图像的意思。如果图像由于故障而无法加载,搜索引擎仍然可以读取Alt文本来帮助对页面进行排名。

填写Alt可以使用与品牌或关键词相关的文字,但应该避免关键字堆砌。那么我们会 填写多少文字才合适呢?一般10-15单词合适。

对于WordPress网站来说,图像标题Title自动从图像文件名获取,可以根据需要修改标题内容。从SEO方面说,标题并不十分重要,它的作用是帮助Alt提供更多的图像信息。图像标题在提升用户参与方面更有用,例如在图像标题上添加一个简短的行动号召——“立即购买”或“立即下载”。

图像的说明Caption并不影响SEO,与Alt不可见不同,它通常出现在图像的下方直接影响用户体验。大多数人会受到图像说明吸引,进一步了解网页内容。如果没有图像说明,网页的跳出率可能会增加,影响在搜索引擎上的信誉值。

五、优化结构化数据

向页面中添加结构化数据有助于搜索引擎将图像显示在富媒体搜索结果中。为了向用户提供高品质的搜索体验,谷歌撰写以下指南:

https://developers.google.com/search/docs/guides/sd-policies

Google 表示,违反以上内容指南的网页或网站可能会获得较低的排名,或被标记为不符合显示为富媒体搜索结果的条件。

六、向搜索引擎提交网站地图

网站地图是一个文件,告诉谷歌和其他搜索引擎你的网站内容组织。

网站地图是SEO的一个重要组成部分,因为它们告诉搜索引擎你网站的所有页面。为了确保搜索引擎爬虫能注意到每一张图像,我们要把图像包含在网站地图中。

用心做好每一个网站,面向全球长期服务好每一位客户

唯有匠心,不负光阴——关于我们

我们是一家注册于深圳南山科技园的营销型网站建设和3D/2D产品定制电商网站开发公司。

我们醉心于使网站更美好并创造更大效能的所有工作:理论、方法、设计、技术和服务。

我们的服务范围:全球域名注册、企业邮箱、专用图片服务器、高性能营销网站建设(网站在Google Pagespeed移动端和桌面端均获得优秀评级)、3D和2D产品配置器电子商务网站开发、WordPress/Woocommerce/Magento网站技术维护。

我们思考如何使您的企业通过网络获得更多生意机会,因此我们在网站策划和设计上突出企业个性,彰显产品品质,传递企业专业专注形象,并使用提升客户转化的网页设计技巧和方法。

我们特别重视网站性能,技术上遵守搜索引擎规范操作,并通过不断更新技术使您的网站访问速度更快,用户体验更佳。

好的网页设计网站建设服务仅仅是企业走向网络营销成功的第一步,我们持续高品质服务将陪伴您走得更远更好。

网络营销营销型高转化网站建设-深圳新龙,是您互联网商业应用的好伙伴!