如何优化您的图像以使其对SEO友好(完整指南)

您网站的性能取决于多种因素,从您选择的特定虚拟主机,遵循以下网站可访问性准则到您使用的图片文件大小.


但是,将它们格式化为适当的大小会由于您所做的修改而降低质量。好消息是您可以通过一些技巧和窍门保持最佳图像质量并获得合适的尺寸.

什么是图像优化?

图像优化尺寸存在大图像时,网页可能会显着降低速度。这样可以减少加载时间,并使整体体验低于您的网站访问者.

减小文件大小是图像优化。您可以为此使用脚本或插件.

这样可以加快页面的加载时间。无损压缩和有损压缩是两种最常见的优化方法.

图像格式化的好处

网络上的平均图片大小据估计,网页总重量的约54%来自图像.

因此,在进行网站优化时,图像应该是您的首要任务。图像格式化的好处包括:

  • 提高页面加载速度
  • 创建备份更快
  • 需要更少的服务器存储空间
  • 使用正确的SEO插件改进了SEO
  • 使用更少的带宽

如何通过图像优化来提高性能

目标是平均平衡可接受的质量和尽可能小的文件大小。您可以通过多种方式执行此操作。上传之前,压缩图像是一种常见的选择。您可以为此使用工具或插件(以下是一些).

重要的是要考虑使用的压缩类型和文件格式。正确的组合可以使图像大小最多减少五倍.

试用不同的文件格式和压缩类型,以确定满足您需求的最佳组合.

选择最佳文件格式

要选择最佳文件类型,重要的是要知道哪些可用。这些是最常见的:

  • JPEG: 此类型利用无损和有损优化。您可以通过调整质量级别来达到文件大小和质量的稳定平衡.
  • PNG: 这种类型的文件往往较大,但是图像质量较高。您可以使用有损或无损压缩.
  • GIF: 这是动画图像的理想选择。您只能使用无损压缩。它仅使用256色.

图像文件格式

还有其他选择,但是这些是最常见且易于使用的选择。其他选项包括JPEG XR和WebP。并非所有浏览器都支持这两种浏览器,因此请注意.

但是,它们可能是一个可行的选择。例如,与可比较的JPEG图像相比,使用WebP可以将文件大小平均减少30%.

由于缺少对这两个选项的通用支持,因此您的应用程序将需要服务器或应用程序上的其他逻辑来提供适当的资源:

  • 图像优化是某些CDN提供的服务,包括WebP和JPEG XR交付.
  • 为了检测客户端,提供最佳的可用图像格式并检查支持的格式,可以添加其他应用程序逻辑.
  • 某些开源工具可自动进行对话,优化和提供适当资产.

尺寸与压缩质量

低压缩往往会带来更高的质量,但文件大小通常会更大。高压缩率则相反。文件较小,但是质量趋于降低.

图像质量与压缩

理想情况下,您希望网页的总重量为一到两MB。因此,请考虑您需要使用多少张图片, 用这个数字除以1.5. 这样可以为每个图像提供最大的加载速度.

无损与有损优化

这是您将使用的两种压缩类型。了解他们的工作很重要:

  • 无损与有损压缩无损:这会压缩数据,它是一个过滤器。渲染图像之前,必须先将其解压缩。但是,质量不会降低。有几种工具可以执行无损压缩.
  • 有损:这消除了一些数据,它是一个筛选器。请注意减少多少,因为这会降低图像质量。您可以使用其他图像编辑器和工具来调整图像的质量设置.

无损或有损配置的最佳配置取决于您自己的标准,例如引入的工件和文件大小以及图像内容之间的权衡.

没有适用于所有图像的通用设置。最终,您想要玩转不同的图像,以查看哪个效果最佳.

调整图像大小

多亏了WordPress等网站上的自适应页面,您的媒体库中将获得几种文件大小。您的浏览器可以选择最佳尺寸并下载。浏览器选择的大小取决于设备的分辨率.

在WordPress中调整图像大小

原始文件保持不变。如果愿意,可以使用插件来避免保存原始文件以节省光盘空间.

更换和消除图像

您是否需要网页上的所有图像?如果不是,请删除不必要的内容。但是,如果所有内容都与内容相关,请考虑使用更好的选项替换较大或较低质量的图像.

在某些情况下,网络字体和CSS效果可以代替图像,同时仍然在页面上提供良好的视觉美感。使用网络字体,漂亮的字体可以帮助提高可用性并为您的页面提供更量身定制的外观.

它还可以提高您的可读性和品牌。只要确保您仍然可以轻松地搜索,选择文本并调整其大小而不会出现可读性问题.

CSS效果包括阴影和渐变等元素。这些也可以进一步建立品牌。动画可以在每个缩放级别和分辨率下为您的网页提供视觉吸引力。与图像文件相比,这些只是字节的一小部分.

光栅与矢量图像

rastor vs矢量

栅格和矢量是两种主要的图像文件类型。基于像素的程序,扫描仪或照相机用于创建光栅图像.

这些在Internet上被广泛使用,并且更常用。矢量软件用于创建矢量图像。这些通常用于物理产品上的图像以及工程,CAD和3D图形中.

矢量图像与分辨率和缩放无关。当涉及几何形状时,矢量是理想的。当图像复杂且具有大量细节和不规则形状时,首选光栅图像.

光栅图形将每个像素的各个值编码在一个矩形网格中,以表示图像。矢量图形使用点,线和面表示图像.

高分辨率屏幕含义

重要的是要区分两种不同的像素类型,包括设备像素和CSS像素。单个CSS像素中可以存在多个设备像素。随着设备像素的增加,屏幕上的细节变得更加精细.

CSS像素与设备像素要充分利用较高的设备像素数,图像资产必须具有更多细节.

这个任务是 矢量图像的理想选择,因为它们可以产生清晰的结果 以任何分辨率渲染时.

由于光栅图像使用每像素的基础来编码图像数据,因此更具挑战性。这是栅格文件大小随像素增加而增加的时候.

因此,高分辨率屏幕需要高分辨率图像才能获得好处。矢量图像是 最适合高分辨率屏幕 由于它们始终独立于分辨率,因此始终可以提供清晰的结果.

请记住,无论分辨率如何,图像优化技术都是相同的.

优化矢量图像

所有现代浏览器均支持可缩放矢量图形(SVG).

这是二维图形的理想选择,格式是基于XML图像的。可以使用您喜欢的文本编辑器或大多数基于矢量的软件类型手动创建SVG文件.

为了减小SVG文件的大小,应将其缩小。压缩SVG文件时应使用GZIP.

优化光栅图像

像素网格构成了光栅图像。各个像素在二维网格上。例如,一个10,000像素的序列构成一个100 x 100像素的图像。每个像素编码透明度和颜色信息.

栅格重RGBA值按每个像素存储。这些包括:

  • 红色通道
  • 蓝色通道
  • 绿色通道
  • Alpha(透明)通道

浏览器内部分配了256个阴影(值)。每通道转换为八位。每个像素为四个字节。这样就可以使用网格尺寸计算文件大小。文件大小变大并不需要太多.

因此,为了减小图像文件的大小,有几种策略:

  • 降低图像的位深。您可以使用较小的颜色托盘来完成此操作.
  • 优化单个像素存储的数据.

工具和参数调整

没有完美的图像工具,优化参数集或格式可用于每张图像。图像内容及其技术和视觉要求将决定您应使用哪种图像.

找到合适的设置集后,以后就可以将其用于类似图像以节省时间。但是,请确保您永远不要假设应该使用相同的设置来压缩所有图像.

了解一些常用工具可以帮助您做出正确的选择。这四个是最常用的:

  • Gificle:这使您可以优化和创建各种GIF图像.
  • Optipng:用于无损PNG优化.
  • 聚乙二醇:这使您可以优化JPEG图像.
  • quan:用于允许有损PNG优化.

交付缩放的图像资产

执行图像优化时,需要考虑两个主要标准:

  • 优化图像的总像素数.
  • 优化编码图像中每个像素所需的字节数.

图像格式树您的图片文件大小分为 总像素乘以单个像素编码所需的总字节数. 就是这个。在确定网站上图像文件的最佳大小时,请记住这一点.

因此,最有效,最简单的优化图像的方法是确保您没有运送绝对需要在浏览器中以预期尺寸显示资产的更多像素.

所以, 不只是依靠浏览器来缩放图像. 这可能导致它们以较低的分辨率显示。它还使用大量额外的CPU资源.

通常无法保证所交付的每项资产的确切显示尺寸。但是,请务必将所有不必要的像素减少到最小.

同样重要的是,您必须尽可能交付大型资产,使其与显示的尺寸尽可能近.

图像优化清单

这里的所有信息都可以使您优化图像,从而使网页更快。您仍然可以使用精美的图片,但是它们不会导致页面加载时间大幅下降.

这将使您的访问者满意并改善您网站的整体功能。优化图像时,请考虑以下清单点:

  • 考虑矢量格式,因为它们适用于高分辨率和多种设备,因为它们与比例和分辨率无关.
  • 所有SVG资产都应压缩并缩小。这将删除不必要的元数据.
  • 对于栅格格式,请使用最佳质量设置。这样可以为您节省大量字节.
  • 对于每种资产,请确定您的功能要求并为光栅图像选择最佳格式.
  • 尽可能自动进行,以确保一致的图像优化.
  • 服务缩放后的图像,以使自然图像尺寸和显示尺寸尽可能相似.

综上所述,图像优化既有科学又有艺术。高度发达的算法和技术可以作为科学.

缺乏关于单个图像压缩的明确答案是本领域的技术。最终,您应该尝试一下。这使您可以为图像文件以及它们如何提高网页速度做出最佳选择.

随着诸如Wix之类的第三方网站建设者的日益普及和成熟,设计人员很容易草率而又专注于开发和维护良好的图像优化过程,无论是敲打模板还是从头开始构建网站。.

参考资料和图片来源:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map