CN114036419A - 网页图片资源处理方法及装置 - Google Patents

Abstract

本申请实施例提供一种网页图片资源处理方法及装置，方法包括：获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件；对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件；本申请能够有效提升前端应用开发效率以及网站网页性能。

Description

网页图片资源处理方法及装置

技术领域

本申请涉及前端开发领域，具体涉及一种网页图片资源处理方法及装置。

背景技术

Web网站网页包含大量图片信息，其中图片的格式非常多，如：bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng。web网站上最常用的图片格式是：jpg、png、svg、gif和webp。

由于目前互联网上传输的数据有65％都是图片(数据出自：https://baike.baidu.com/item/WebP)，因此减小图片体积会显著提示web网站网页的性能，尤其是缩短网页信息显示时间，提升用户体验。在图片格式中webp格式的图片在图片质量相同的情况下，图片体积显著较小，webp相比JPEG，可以把图片大小减少40％；webp相比png，可以把图片大小减少75％。虽然webp在图片体积上有明显优势，但是webp的浏览器兼容性不容乐观，例如，webp在ie浏览、safari浏览器以及低版本Edge浏览器存在较明显的浏览器兼容问题，即在部分浏览器上存在无法展示webp图片的问题。

发明内容

针对现有技术中的问题，本申请提供一种网页图片资源处理方法及装置，能够有效提升前端应用开发效率以及网站网页性能。

为了解决上述问题中的至少一个，本申请提供以下技术方案：

第一方面，本申请提供一种网页图片资源处理方法，包括：

获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件；

对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

进一步地，所述获取用户发送的网页应用工程并进行webp图片格式转换，包括：

遍历网页应用工程中的图片文件资源，得到图片资源文件集合；

调用预设格式转换插件将所述图片资源集合的各图片资源文件转换为webp图片格式，并将经过图片格式转换后得到的webp图片文件资源存储至webp图片文件目录。

进一步地，所述根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，包括：

遍历所述网页应用工程中的层叠样式文件资源，得到层叠样式资源文件集合；

将所述层叠样式资源文件集合中的各层叠样式资源文件的文件内容拷贝至当前目录下与所述webp图片格式对应的新增层叠样式资源文件中；

调用预设样式处理插件将所述新增层叠样式资源文件中的图片资源链接替换为与所述webp图片文件目录对应的webp图片资源链接，得到经过图片资源链接替换后的层叠样式资源文件集合。

进一步地，所述对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，包括：

根据所述超文本标记语言文件中头部标签内容触发的图片文件目录请求操作，确定当前网页应用工程支持的图片格式类型；

若所述当前网页应用工程支持webp图片格式，则在所述超文本标记语言文件的图片标签内容中加载经过图片资源链接替换后的层叠样式资源文件。

第二方面，本申请提供一种网页图片资源处理装置，包括：

格式转换模块，用于获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件；

检测加载模块，用于对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

进一步地，所述格式转换模块包括：

图片资源获取单元，用于遍历网页应用工程中的图片文件资源，得到图片资源文件集合；

图片格式转换单元，用于调用预设格式转换插件将所述图片资源集合的各图片资源文件转换为webp图片格式，并将经过图片格式转换后得到的webp图片文件资源存储至webp图片文件目录。

进一步地，所述格式转换模块包括：

层叠样式获取单元，用于遍历所述网页应用工程中的层叠样式文件资源，得到层叠样式资源文件集合；

资源文件新建单元，用于将所述层叠样式资源文件集合中的各层叠样式资源文件的文件内容拷贝至当前目录下与所述webp图片格式对应的新增层叠样式资源文件中；

资源链接替换单元，用于调用预设样式处理插件将所述新增层叠样式资源文件中的图片资源链接替换为与所述webp图片文件目录对应的webp图片资源链接，得到经过图片资源链接替换后的层叠样式资源文件集合。

进一步地，所述检测加载模块包括：

格式类型确定单元，用于根据所述超文本标记语言文件中头部标签内容触发的图片文件目录请求操作，确定当前网页应用工程支持的图片格式类型；

层叠样式加载单元，用于若所述当前网页应用工程支持webp图片格式，则在所述超文本标记语言文件的图片标签内容中加载经过图片资源链接替换后的层叠样式资源文件。

第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的网页图片资源处理方法的步骤。

第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的网页图片资源处理方法的步骤。

由上述技术方案可知，本申请提供一种网页图片资源处理方法及装置，通过获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，使得web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示，由此能够有效提升前端应用开发效率以及网站网页性能。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例中的网页图片资源处理方法的流程示意图之一；

图2为本申请实施例中的网页图片资源处理方法的流程示意图之二；

图3为本申请实施例中的网页图片资源处理方法的流程示意图之三；

图4为本申请实施例中的网页图片资源处理方法的流程示意图之四；

图5为本申请实施例中的网页图片资源处理装置的结构图之一；

图6为本申请实施例中的网页图片资源处理装置的结构图之二；

图7为本申请实施例中的网页图片资源处理装置的结构图之三；

图8为本申请实施例中的网页图片资源处理装置的结构图之四；

图9为本申请实施例中的电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

考虑到目前互联网上传输的数据有65％都是图片(数据出自：https://baike.baidu.com/item/WebP)，因此减小图片体积会显著提示web网站网页的性能，尤其是缩短网页信息显示时间，提升用户体验。在图片格式中webp格式的图片在图片质量相同的情况下，图片体积显著较小，webp相比JPEG，可以把图片大小减少40％；webp相比png，可以把图片大小减少75％。虽然webp在图片体积上有明显优势，但是webp的浏览器兼容性不容乐观，例如，webp在ie浏览、safari浏览器以及低版本Edge浏览器存在较明显的浏览器兼容问题，即在部分浏览器上存在无法展示webp图片的问题，本申请提供一种网页图片资源处理方法及装置，通过获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，使得web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示，由此能够有效提升前端应用开发效率以及网站网页性能。

为了能够有效提升前端应用开发效率以及网站网页性能，本申请提供一种网页图片资源处理方法的实施例，参见图1，所述网页图片资源处理方法具体包含有如下内容：

步骤S101：获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件。

可选的，本申请将网页应用工程中的非webp图片资源文件转换为webp图片资源时可以使用图片转换插件webp-converter。

可选的，在完成图片格式转换后，本申请还需新增层叠样式资源文件，即css文件，同时将新增的css文件中图片资源的非webp图片链接替换为webp图片资源链接，以此确定对应的层叠样式资源文件。

步骤S102：对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

可选的，本申请还可以将网页应用工程中的超文本标记语言文件(即html文件)处理为同时支持webp和非webp图片格式的内容，具体操作内容可以包括：

1、处理文件中的img标签内容。

2、html文件添加webp格式图片兼容检测代码。

3、html文件添加引用css文件代码。

4、html文件添加动态配置img标签src属性代码。

由此，本申请可以在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，以完成对webp图片格式的自动支持。

从上述描述可知，本申请实施例提供的网页图片资源处理方法，能够通过获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，使得web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示，由此能够有效提升前端应用开发效率以及网站网页性能。

为了能够准确进行图片格式转换，在本申请的网页图片资源处理方法的一实施例中，参见图2，上述步骤S101还可以具体包含如下内容：

步骤S201：遍历网页应用工程中的图片文件资源，得到图片资源文件集合。

步骤S202：调用预设格式转换插件将所述图片资源集合的各图片资源文件转换为webp图片格式，并将经过图片格式转换后得到的webp图片文件资源存储至webp图片文件目录。

可选的，首先本申请可以遍历web应用工程中的图片文件资源，如：jpg、png、svg、gif和webp格式图片资源文件，得到一个图片资源文件集合。

然后，本申请可以循环处理图片资源集合的每一个文件，对于文件扩展名是webp的不进行处理；对于文件扩展名是gif的图片资源，调用webp-converter插件的gwebp方法将gif图片转换为webp图片，转换后的webp图片与gif图片位于相同的目录下；对于其他文件扩展名非gif的图片资源(如png、jpg、svg等)，调用webp-converter插件的cwebp方法将gif图片转换为webp图片，新生成的webp图片与原图片位于相同的目录结构。

由此，web应用中每个非webp图片资源在其相同目录结构下都有一个文件名一样，扩展名为webp的图片文件，如原工程image目录下有一个test.png，经过本步骤后image目录下会多了一个test.webp的图片文件。

为了能够准确进行层叠样式的相应变换，在本申请的网页图片资源处理方法的一实施例中，参见图3，上述步骤S101还可以具体包含如下内容：

步骤S301：遍历所述网页应用工程中的层叠样式文件资源，得到层叠样式资源文件集合。

步骤S302：将所述层叠样式资源文件集合中的各层叠样式资源文件的文件内容拷贝至当前目录下与所述webp图片格式对应的新增层叠样式资源文件中。

步骤S303：调用预设样式处理插件将所述新增层叠样式资源文件中的图片资源链接替换为与所述webp图片文件目录对应的webp图片资源链接，得到经过图片资源链接替换后的层叠样式资源文件集合。

可选的，首先，本申请可以遍历web应用工程中的所有css文件资源，得到css文件集合。

然后，循环处理css文件集合的每一个文件。

具体的，拷贝这个文件，在相同目录下生产一个.webp.css的文件。如原css目录下有一个test.css的文件，拷贝test.css文件内容，同时在css目录下生成一个test.webp.css的文件。

然后，通过一个postcss插件，处理新生成的css文件，经过postcss解析后的结构为一个AST(abstract syntax code，抽象语法树)，将源代码抽象为树状结构表示，AST描述源代码的信息。图片资源链接在AST节点的decl属性上，由此本申请实现一个postcss插件，处理AST节点del属性上图片链接地址。

可选的，因图片链接仅在css的background-image或background属性上，使用postcss的walkDeclsAPI遍历background-image和background属性的内容，获取background-image和background属性的值，若属性值存在图片链接(图片链接都是在url中)并且图片链接地址为非webp图片，使用正则表达式将图片链接地址替换为webp图片文件链接(web应用已有webp图片文件)；接着，将postcss插件处理后的代码写入到.webp.css中。

为了能够使网页应用工程自适应webp图片格式，在本申请的网页图片资源处理方法的一实施例中，参见图4，上述步骤S102还可以具体包含如下内容：

步骤S401：根据所述超文本标记语言文件中头部标签内容触发的图片文件目录请求操作，确定当前网页应用工程支持的图片格式类型。

步骤S402：若所述当前网页应用工程支持webp图片格式，则在所述超文本标记语言文件的图片标签内容中加载经过图片资源链接替换后的层叠样式资源文件。

可选的，本申请还可以将网页应用工程中的超文本标记语言文件(即html文件)处理为同时支持webp和非webp图片格式的内容，具体操作内容可以包括：

1、处理文件中的img标签内容。

2、html文件添加webp格式图片兼容检测代码。

3、html文件添加引用css文件代码。

4、html文件添加动态配置img标签src属性代码。

具体的，首先进行img标签内容的处理：html中使用img标签来显示图像(https://www.w3school.com.cn/html/html_images.asp)，其中img有src属性，如<img src＝"url"/>，URL指存储图像的位置。如代码：<img src＝"boat.gif"alt＝"Big Boat">，页面就显示boat.gif这张图片。

因此，本申请可以将<img src＝"boat.gif"alt＝"Big Boat">示例代码，转换为<img src＝""data-no-webp＝"boat.gif"data-webp＝"boat.webp"alt＝"Big Boat">，此时img标签src属性内容为空字符串，同时新增了2个自定义属性，即data-webp，data-no-webp。新增的data-no-webp属性的值是原src属性的内容；新增的data-webp属性的值是原src图片文件名的webp图片格式的图片。

当web页面所运行的浏览器支持webp格式图片时，本申请可以通过插入JavaScript代码将data-webp属性内容赋值到src属性上，此时img标签显示webp格式的图片；若html所运行的浏览器不支持webp，html中JavaScript代码将data-no-webp属性内容赋值到src属性上，此时img标签显示非webp格式的图片。由此可以实现一套html文件，即支持webp图片资源展示也支持非webp图片资源展示。

进一步讲，本申请可以使用parse5插件将html解析为语法树(AST)，处理img标签的流程为：

1、循环遍历AST中nodeName为“img”的节点。

2、获取节点的src属性值，将src属性值赋值为空字符串。

3、添加2个新的属性data-no-webp和data-webp到此“img”节点，将获取到的src属性值赋值到data-no-webp属性值上，使用正则表达式将src属性值的webp格式图片文件赋值到data-webp属性上。

4、根据新的AST生成为html内容，替换原html文件内容。

由此，经过本步骤后每个html页面中的img标签的src属性都赋值为了空字符串，同时img标签新增了2个属性。

然后，在html文件添加webp格式图片兼容检测代码。

具体的，在AST中添加webp格式图片兼容检测代码，将添加webp格式图片兼容检测代码添加到网页head标签中(添加在head标签的原因是：head标签位于html页面的最前面，尽早实现webp格式图片兼容检测，为后续动态插入css文件以及赋值img标签src属性内容做前提准备)。

在AST中遍历nodeName为“head”的标签，在childNodes节点插入webp兼容性检测代码。webp兼容性检测的原理是：使用浏览器的canvas的toDataURL这个API检测浏览器是否支持webp图片。

核心逻辑为若使用canvas的toDataURLAPI返回“data:image/webp”开始的字符串就表明浏览器支持webp格式图片，否则浏览器不支持webp格式图片，网页上webpEnable变量为布尔值true就是支持webp格式图片，webpEnable变量为布尔值false就是不支持webp格式图片。

再然后，在html文件添加引用css文件代码。

具体的，在AST中遍历nodeName为“link”的标签，并且attrs属性数组中有name为“type”，value为“text/css”的节点。因为link标签还可能是链接其他资源如icon资源，因此需要判断属性类型是“text/css”才为link链接css文件。

遍历AST中所有的link为css文件的节点，将节点的attrs属性数组中元素name为“href”的value记录下来(即记录html页面中所有的链接的css文件)。之后将AST中所有的link为css文件的节点删除(后续会重新使用JavaScript代码动态插入)。根据前述内容获取的浏览器是否支持webp标识，将link标签的href内容使用JavaScript代码重新插入到网页的head中。

其中，webpEnable是浏览器是否支持webp图片标识，若浏览器支持webp格式，path值就是“.webp”，否则就是空字符串。在浏览器支持webp图片资源时，link链接的css资源是“css/index.webp.css”；若浏览器不支持webp图片资源时，link链接的css资源是“css/index.css”(即原web应用中的css文件)。

由此，浏览器在不支持webp图片时加载网页原css文件，浏览器支持webp图片时加载前述内容新生成的css文件。

最后，在html文件添加动态配置img标签src属性代码。

因为处理后的html页面上img标签的src属性都为空字符串(为空若不处理不能准确显示图片)，同时img标签还新增了2个属性data-no-webp和data-webp。本步骤在html文件的body节点最后添加动态配置img标签src属性代码(添加在body的末尾原因是：在body最后才能获取页面上全部的img标签，若在body最开始、head标签或者其他位置都不能准确获取到img标签)。

html文件解析后的AST的nodeName为“body”为节点添加一段动态配置img标签src属性代码JavaScript代码。根据webp格式图片支持兼容检测标识webpEnable，若webpEnable为true，将data-webp属性的值赋值到img标签的src属性(即加载webp格式图片)，否则将data-no-webp属性的值赋值到img标签的src属性(即加载非webp格式图片)。

至此，html文件通过解析为AST，对AST做处理：处理AST中的img标签、ASThead标签插入webp格式图片兼容检测代码、AST删除link标签中type属性为“text/css”的节点并添加JavaScript动态引入css文件、AST的body节点尾部添加处理img标签src内容的代码，最后将AST生成为html代码覆盖原来html页面内容。

由此，web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示(若web应用运行的浏览器不支持webp图片格式，web应用自动降级为使用非webp格式的图片资源，不影响页面展示)。

为了能够有效提升前端应用开发效率以及网站网页性能，本申请提供一种用于实现所述网页图片资源处理方法的全部或部分内容的网页图片资源处理装置的实施例，参见图5，所述网页图片资源处理装置具体包含有如下内容：

格式转换模块10，用于获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件。

检测加载模块20，用于对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

从上述描述可知，本申请实施例提供的网页图片资源处理装置，能够通过获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，使得web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示，由此能够有效提升前端应用开发效率以及网站网页性能。

为了能够准确进行图片格式转换，在本申请的网页图片资源处理装置的一实施例中，参见图6，所述格式转换模块10包括：

图片资源获取单元11，用于遍历网页应用工程中的图片文件资源，得到图片资源文件集合。

图片格式转换单元12，用于调用预设格式转换插件将所述图片资源集合的各图片资源文件转换为webp图片格式，并将经过图片格式转换后得到的webp图片文件资源存储至webp图片文件目录。

为了能够准确进行层叠样式的相应变换，在本申请的网页图片资源处理装置的一实施例中，参见图7，所述格式转换模块10包括：

层叠样式获取单元13，用于遍历所述网页应用工程中的层叠样式文件资源，得到层叠样式资源文件集合。

资源文件新建单元14，用于将所述层叠样式资源文件集合中的各层叠样式资源文件的文件内容拷贝至当前目录下与所述webp图片格式对应的新增层叠样式资源文件中。

资源链接替换单元15，用于调用预设样式处理插件将所述新增层叠样式资源文件中的图片资源链接替换为与所述webp图片文件目录对应的webp图片资源链接，得到经过图片资源链接替换后的层叠样式资源文件集合。

为了能够使网页应用工程自适应webp图片格式，在本申请的网页图片资源处理装置的一实施例中，参见图8，所述检测加载模块20包括：

格式类型确定单元21，用于根据所述超文本标记语言文件中头部标签内容触发的图片文件目录请求操作，确定当前网页应用工程支持的图片格式类型。

层叠样式加载单元22，用于若所述当前网页应用工程支持webp图片格式，则在所述超文本标记语言文件的图片标签内容中加载经过图片资源链接替换后的层叠样式资源文件。

从硬件层面来说，为了能够有效提升前端应用开发效率以及网站网页性能，本申请提供一种用于实现所述网页图片资源处理方法中的全部或部分内容的电子设备的实施例，所述电子设备具体包含有如下内容：

处理器(processor)、存储器(memory)、通信接口(Communications Interface)和总线；其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；所述通信接口用于实现网页图片资源处理装置与核心业务系统、用户终端以及相关数据库等相关设备之间的信息传输；该逻辑控制器可以是台式计算机、平板电脑及移动终端等，本实施例不限于此。在本实施例中，该逻辑控制器可以参照实施例中的网页图片资源处理方法的实施例，以及网页图片资源处理装置的实施例进行实施，其内容被合并于此，重复之处不再赘述。

可以理解的是，所述用户终端可以包括智能手机、平板电子设备、网络机顶盒、便携式计算机、台式电脑、个人数字助理(PDA)、车载设备、智能穿戴设备等。其中，所述智能穿戴设备可以包括智能眼镜、智能手表、智能手环等。

在实际应用中，网页图片资源处理方法的部分可以在如上述内容所述的电子设备侧执行，也可以所有的操作都在所述客户端设备中完成。具体可以根据所述客户端设备的处理能力，以及用户使用场景的限制等进行选择。本申请对此不作限定。若所有的操作都在所述客户端设备中完成，所述客户端设备还可以包括处理器。

上述的客户端设备可以具有通信模块(即通信单元)，可以与远程的服务器进行通信连接，实现与所述服务器的数据传输。所述服务器可以包括任务调度中心一侧的服务器，其他的实施场景中也可以包括中间平台的服务器，例如与任务调度中心服务器有通信链接的第三方服务器平台的服务器。所述的服务器可以包括单台计算机设备，也可以包括多个服务器组成的服务器集群，或者分布式装置的服务器结构。

图9为本申请实施例的电子设备9600的系统构成的示意框图。如图9所示，该电子设备9600可以包括中央处理器9100和存储器9140；存储器9140耦合到中央处理器9100。值得注意的是，该图9是示例性的；还可以使用其他类型的结构，来补充或代替该结构，以实现电信功能或其他功能。

一实施例中，网页图片资源处理方法功能可以被集成到中央处理器9100中。

其中，中央处理器9100可以被配置为进行如下控制：

步骤S101：获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件。

步骤S102：对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

从上述描述可知，本申请实施例提供的电子设备，通过获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，使得web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示，由此能够有效提升前端应用开发效率以及网站网页性能。

在另一个实施方式中，网页图片资源处理装置可以与中央处理器9100分开配置，例如可以将网页图片资源处理装置配置为与中央处理器9100连接的芯片，通过中央处理器的控制来实现网页图片资源处理方法功能。

如图9所示，该电子设备9600还可以包括：通信模块9110、输入单元9120、音频处理器9130、显示器9160、电源9170。值得注意的是，电子设备9600也并不是必须要包括图9中所示的所有部件；此外，电子设备9600还可以包括图9中没有示出的部件，可以参考现有技术。

如图9所示，中央处理器9100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器9100接收输入并控制电子设备9600的各个部件的操作。

其中，存储器9140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器9100可执行该存储器9140存储的该程序，以实现信息存储或处理等。

输入单元9120向中央处理器9100提供输入。该输入单元9120例如为按键或触摸输入装置。电源9170用于向电子设备9600提供电力。显示器9160用于进行图像和文字等显示对象的显示。该显示器例如可为LCD显示器，但并不限于此。

该存储器9140可以是固态存储器，例如，只读存储器(ROM)、随机存取存储器(RAM)、SIM卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为EPROM等。存储器9140还可以是某种其它类型的装置。存储器9140包括缓冲存储器9141(有时被称为缓冲器)。存储器9140可以包括应用/功能存储部9142，该应用/功能存储部9142用于存储应用程序和功能程序或用于通过中央处理器9100执行电子设备9600的操作的流程。

存储器9140还可以包括数据存储部9143，该数据存储部9143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器9140的驱动程序存储部9144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。

通信模块9110即为经由天线9111发送和接收信号的发送机/接收机9110。通信模块(发送机/接收机)9110耦合到中央处理器9100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。

基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块9110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)9110还经由音频处理器9130耦合到扬声器9131和麦克风9132，以经由扬声器9131提供音频输出，并接收来自麦克风9132的音频输入，从而实现通常的电信功能。音频处理器9130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器9130还耦合到中央处理器9100，从而使得可以通过麦克风9132能够在本机上录音，且使得可以通过扬声器9131来播放本机上存储的声音。

本申请的实施例还提供能够实现上述实施例中的执行主体为服务器或客户端的网页图片资源处理方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的执行主体为服务器或客户端的网页图片资源处理方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

步骤S101：获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件。

步骤S102：对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

从上述描述可知，本申请实施例提供的计算机可读存储介质，通过获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，使得web应用开发者不需要改变工程代码就可以使web应用支持webp图片资源显示，由此能够有效提升前端应用开发效率以及网站网页性能。

本领域内的技术人员应明白，本发明的实施例可提供为方法、装置、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(装置)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种网页图片资源处理方法，其特征在于，所述方法包括：

获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件；

对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

2.根据权利要求1所述的网页图片资源处理方法，其特征在于，所述获取用户发送的网页应用工程并进行webp图片格式转换，包括：

遍历网页应用工程中的图片文件资源，得到图片资源文件集合；

调用预设格式转换插件将所述图片资源集合的各图片资源文件转换为webp图片格式，并将经过图片格式转换后得到的webp图片文件资源存储至webp图片文件目录。

3.根据权利要求2所述的网页图片资源处理方法，其特征在于，所述根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件，包括：

遍历所述网页应用工程中的层叠样式文件资源，得到层叠样式资源文件集合；

将所述层叠样式资源文件集合中的各层叠样式资源文件的文件内容拷贝至当前目录下与所述webp图片格式对应的新增层叠样式资源文件中；

调用预设样式处理插件将所述新增层叠样式资源文件中的图片资源链接替换为与所述webp图片文件目录对应的webp图片资源链接，得到经过图片资源链接替换后的层叠样式资源文件集合。

4.根据权利要求1所述的网页图片资源处理方法，其特征在于，所述对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件，包括：

根据所述超文本标记语言文件中头部标签内容触发的图片文件目录请求操作，确定当前网页应用工程支持的图片格式类型；

若所述当前网页应用工程支持webp图片格式，则在所述超文本标记语言文件的图片标签内容中加载经过图片资源链接替换后的层叠样式资源文件。

5.一种网页图片资源处理装置，其特征在于，包括：

格式转换模块，用于获取用户发送的网页应用工程并进行webp图片格式转换，根据经过所述图片格式转换后得到的webp图片文件确定对应的层叠样式资源文件；

检测加载模块，用于对所述网页应用工程的超文本标记语言文件进行webp图片格式兼容检测，并在检测到当前网页应用工程支持webp图片格式时加载所述层叠样式资源文件。

6.根据权利要求5所述的网页图片资源处理装置，其特征在于，所述格式转换模块包括：

图片资源获取单元，用于遍历网页应用工程中的图片文件资源，得到图片资源文件集合；

图片格式转换单元，用于调用预设格式转换插件将所述图片资源集合的各图片资源文件转换为webp图片格式，并将经过图片格式转换后得到的webp图片文件资源存储至webp图片文件目录。

7.根据权利要求6所述的网页图片资源处理装置，其特征在于，所述格式转换模块包括：

层叠样式获取单元，用于遍历所述网页应用工程中的层叠样式文件资源，得到层叠样式资源文件集合；

资源文件新建单元，用于将所述层叠样式资源文件集合中的各层叠样式资源文件的文件内容拷贝至当前目录下与所述webp图片格式对应的新增层叠样式资源文件中；

资源链接替换单元，用于调用预设样式处理插件将所述新增层叠样式资源文件中的图片资源链接替换为与所述webp图片文件目录对应的webp图片资源链接，得到经过图片资源链接替换后的层叠样式资源文件集合。

8.根据权利要求5所述的网页图片资源处理装置，其特征在于，所述检测加载模块包括：

格式类型确定单元，用于根据所述超文本标记语言文件中头部标签内容触发的图片文件目录请求操作，确定当前网页应用工程支持的图片格式类型；

层叠样式加载单元，用于若所述当前网页应用工程支持webp图片格式，则在所述超文本标记语言文件的图片标签内容中加载经过图片资源链接替换后的层叠样式资源文件。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至4任一项所述的网页图片资源处理方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至4任一项所述的网页图片资源处理方法的步骤。

Images