SEO图片优化：web前端图片极限优化策略

SEO图片优化：web前端图片极限优化策略

一、当前网页图片格式

当今常见的网络图片格式:

几种文档格式特征的简要描述

基线-jpeg

这种JPEG文档存储方式是按照从上到下的扫描方式，将JPEG文档中的每一行按顺序存储。当打开该文档显示信息及其内容时，数据信息将按照存储的顺序自上而下显示，直到读取完所有数据信息，完成一整张图片的显示信息。如果文档很大或者互联网网速很慢，那么你会看到图片是一行一行加载的实际效果。这种格式JPEG没有什么优势，所以一般强烈推荐使用渐进式JPEG。

预渐进-jpeg

与基线一次扫描扫描仪不同，渐进式JPEG文件包含多个扫描仪，这些扫描仪存储在JPEG文件中。在整个打开文件的过程中，信息的所有图片的模糊轮廓都会先显示出来。随着扫描仪频率的增加，图片越来越清晰。这种格式的关键优势是，当互联网速度较慢时，您可以看到图片画廊，并知道图片正在加载什么。

两个jpeg格式文档的实际效果如下:

jpeg的优势:

非常通用，JPEG可以在颜色和色调变化平滑的照片或写实绘画中达到最佳实用效果。

Jpeg缺点:

不适合线框绘制等文字或图例(图标)图形，因为在这种图形的特性中使用了它的缩小方法，会得到不合适的结果；

gif

GIF(图形交换格式)的意思是“图像交换格式”。GIF文档的数据信息是根据LZW优化算法(字符串表压缩算法)得到的颜色连续的无损压缩格式，是目前网页中非常常见的动画文件格式。

优势:

1.优秀的压缩算法在一定程度上保证了图像质量。另外，体积越来越小，可以插入多帧，从而完成实际的动画效果；

2.可以设置半透明以产生目标在场景上方闪烁的实际效果。

缺点:由于选择了8位还原，最大数量只有256色(2的8次方)，不适合真彩色图像。

巴布亚新几内亚

Png文档分为png8(8位透明png)、png24(256色png)和png32(多级透明png)。png在某种程度上依赖于位图文件的应用来完成网页上完全透明的图片，以达到更好的感觉。

优势:

支持256色调色板技术来创建小容量文档。

最大限度地支持48位真实数字图像及其16位二进制化。

支持Alpha安全通道的透明色功能。

支持图像色度的伽马校正信息量。-支持存储附加文本信息内容，保存图片名称、创作者、版权、写作时间、评论等信息内容。

应用无损压缩。

逐步显示信息和流式读写能力，适用于数据传输中快速显示信息和展示全景图前浏览实际效果。

应用CRC循环系统余号避免文件失效。

新的PNG规范允许在一个文档中存储多个图像。

缺点:

但是有些手机软件不能应用合适的预测分析，导致文档很大(IE6只支持PNG8)。

webp

目前手机Android4.0，PCchorme10(14~16有3D渲染bug)，opera11，safri都支持webp格式图片。与JPG相比，WEBP的编号速度慢10倍，编解码速度慢1.5倍。但在大多数网络技术应用中，图片都是静态的数据文档，对于客户应用只需要关注编解码速度即可。但实际上，虽然webp会增加额外的编解码时间，但文档的3D渲染速度其实更快，因为它减少了文档体积和加载时间。

目前webp上可行的应用领域:

-1.根据Chromium，客户端嵌入了webview。在这种计算机浏览器中使用的网页可以完全应用webp格式并提高加载3D渲染速率，而不考虑兼容性。

-2.用node-webkit开发设计程序流程，用webp减少文件包的体积。

-3.移动智能终端或者页游，页面一定要有很多图片，可以放入webp的编解码包中，可以节省客户总流量，提高网站打开速度。优势:

-对于png图片，webp比png小45%，但缺点是你缩小要花更长的时间；缺点:

-兼容模式不好，只有opera和chrome支持；

apng

简单来说，apng格式图片应用于png连接的几种动画图片格式，支持透明安全通道动画。与gif动画相比，没有毛刺，质量更高，但现阶段支持的电脑浏览器并不彻底。可以去caniuse查询其兼容模式。目前相对易用性较低，适合对动画质量要求较高的情况。

svg是矢量素材图片，支持全透明、缩放、动画。除android2.3手机外的所有场景都支持，是比较好的图片替换方案。优势:

矢量图形格式不会受到清晰度的损害——SVG的这一特性使其在不同的服务平台或新闻媒体中表现出色，无论分辨率如何。

SVG对动画的支持不错；它的DOM结构可以被它特殊的英语语法或者Javascript *** 纵，然后动画就可以轻松完成。

Javascript可以很好的控制SVGDom元素。

SVG的结构是XML，可浏览(盲文，有声阅读等。)，可执行可编程，并且可以通过CSS样式化来展开Canvas。此外，它支持ARIA功能，使其如鱼得水。

缺点:

DOM比所有普通的图形都要慢，如果它的节点众多且复杂，速度也会变慢。

不适合页游等。自然可以集成CanvasSVG来完成。

bpg

http://bellard.org/bpg/的图像质量与功能测试进行了比较。

BPG(更好的可移植图形)是一种新的图片格式。取代jpeg和webp的计划。这种格式具有以下优点:

高发动机压缩比。在同等画质下比jpeg小很多。

一个小型的js解码器可以由计算机浏览器支持。

根据超清视频缩减规范(HEVC)的非空子集

支持与jpeg相同的颜色值，并支持在有损压缩的公告中完全透明，

多通道支持8至14位颜色值区域。

支持有损压缩

可以添加大量的元编码数据。

支持动画

在画质差不多的前提下，比webp小。

特点:

根据mozilla的科学研究，bpg应用的HEVC数比最初的HEVC更强，因为BPG的顶部比HEVC的小。

支持4:2:2和4:2:0颜色值设置。

BPG可用于在硬件配置上支持HEVC转码软件。

这种图片格式现阶段还没有得到电脑浏览器的支持，必须用js解码，但是优点还是比较突出的。

除此之外，还有mozjpg和sharpP图像格式，因为现阶段还在发展中，这里暂且不详细介绍。有兴趣的可以跟进掌握。

二。前端开发图片改进方案

应用base64数字而不是图片

场景:适用于图片大小小于2KB，网页上介绍图片数量很少的情况。

原理:将图片转换成base64编号的字符串数组，内联到网页或css中。

优点:减少了http请求的频率，可以放入后台管理数据库查询，只传输字符串数组，有很多专门的工具可以立即构建。

缺点:这种方法仅限于图片数量少，图片大小小于2KB的情况。否则图像字符串数组会越来越长。

马赛克图片精灵

场景:所有使用网页图片的场景。

原理:把几个网页上使用的情境图片组合成一个大图，引入网页。

优点:可以合理减少所需数量，不损害开发设计体验。建筑软件的应用可以保证对开发者完全透明。它适用于网页上有许多彩色图片的情况。

缺点:形成的画面体积很大，减少了所需的数量，也增加了画面的大小。不科学的拆分会造成不利的并行处理负载。

应用css、svg、canvas或iconfont而不是图片

css而不是图片

情况:适用于手机或高级电脑浏览器，绘制图案设计相对简单。

原理:css方法可以用来画相对简单的簇，而不是画图片。一般在之前或之后使用伪元素来丰富多彩的图案设计的复杂性。

优点:具有完成简单，画面尺寸小的特点，可以完成简单的动画效果。

缺点:还受到css兼容模式特性的制约，绘图复杂，图案设计困难。

前面已经展示了svg的描述和可用场景。

画布替代图片

情境:必须有优秀表现的图片或动画。

原理:图片可以通过在html5中绘制canvas元素来创建。

优点:在绘制3D图形时，网页的3D渲染特性比较高，网页的3D渲染特性不受图形复杂度的伤害，只受图形屏幕分辨率的影响。绘制的图形可以立即存储为。png或者。jpg图形，适用于绘制光栅图像或组合图形。

缺点:没有dom *** 作，必须依赖定时器。文字的3D渲染特性较差，无法添加旁白(标题特性等。)，而且兼容模式限制。

Iconfont是一种web字体样式，用于替换图片。场景:在网页上用单色替换图片的优点是:兼容模式好，应用广泛，目前常见的缺点。但是因为字体样式有单色设置，所以只能用来替换单色的图片。对于颜色复杂的图片，iconfont很难解决。

响应网站图片

场景:不同的终端设备对同一张图片有不同的要求，因此可以根据终端设备加载的不同图片节省不必要的总流量。

原理:根据图片图元、图片填充或服务平台判别，为不同的终端设备服务平台输出不同的图片。

优点:减少了不必要的图片加载，易于 *** 作。慢的客户不会加载不了小图片，也不需要在手机上加载大容量的图片，所以按照不同的方法可以兼容所有的电脑浏览器。

缺点:没有办法阻止加载图片的全过程，图片本身也没有提高。

图像缩小

情况:在必须加载图片的前提下，为了进一步提高实际效果，只能按照不利或无损压缩来缩小图片的大小。

原理:对画面进行高质量有损压缩，变成缩小的画面。

优点:减少图片加载总流量，实际效果明显。

缺点:web服务器和计算机浏览器的工作压力不断扩大，web服务器必须有额外的服务支持。

更强的图片格式

情况:如前所述，webp、bpg、sharpP等新的图像格式具有更强的引擎压缩比，可以用来替换原图像。

原理:改变图片格式，在画质可以接受的情况下，达到引擎压缩比更强的实际效果。

优点:减少图片加载总流量，实际效果明显。

缺点:web服务器和电脑浏览器的工作压力不断扩大，web服务器必须有额外的服务支持。格式转换应考虑计算机浏览器的兼容模式。

三。图像缩小

减少图像的方法有很多，这里就不一一列举了，比如下面这部分专用工具服务平台:

https://kraken.io/北海巨妖(网络)主页

首页:http://zhitu.tencent.com/支持将原png改为jpeg和webp(现阶段不支持bpg)，并展示了引擎压缩比的各种降低，现阶段在tx广泛使用。

目前，bpg格式的图片也被一些企业使用。这几个方面也可以试试。

总结:以上展示了网页图片的一些格式特点以及图片推广的可行方案。实际情况一定要考虑选择不同的方法进行推广。推广的总体思路是:网页的静态数据资源图片要用css、canvas、svg、iconfont、sprite、base64进行推广，后台管理返回的公共数据图片要按照响应式网站和图片还原进行推广。另外，对于引擎压缩比较高的新图片，如webp、bpg等，也要尽可能考虑进行图片转换。

之上便是对web前端图片極限优化策略所有内容的详细介绍，大量內容请再次关心诺心互联网！