让WordPress的图片支持webp模式

file

简介 | 来源于wiki

WebP是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式[8],派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。2011年11月8日,Google开始让WebP支持无损压缩和透明色(alpha通道)的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。

WebP支持的像素最大数量是16383×16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩(可逆压缩)的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据。

WebP有静态与动态两种模式。动态WebP(Animated WebP)支持有损与无损压缩、ICC色彩配置、XMP诠释数据、Alpha透明通道。

缘由

我第一次接触这个图片格式有印象的是在豆瓣电影上,我当时看到这种图片格式感到特别奇怪,居然无法引用。具体就忘了,这几天准备进一步压缩网站传输量就发现了这个东西,当然刚开始搜索的关键词是压缩图片,多次看多多个插件有提到这个图片格式,然后就准备尝试更改。但此刻遇到了巨大难题,自己网站的图片基本都是在第三方的图片库中或其它网站的引用,这就麻烦了,这所有的图片压缩仅仅针对于本地的图片。

解决方法

我刚开始的思路是准备全部用爬虫下载后改变数据库的内容来达到目的,后期发现数据库这个操作有点特别蛋疼,那就是怎么实现一对一的解答?最后找到了一个插件实现了双重解决办法!

关闭所所有分享到地方的服务

emmmmm,我自己领英是更新了全部的文章

插件获取图片到本地

爬虫解决无法获取的少数部分

请带着脑子去思考每一个地方,有必要的注释,自己去选择更改!刚开始感觉有点困难的是正则表达式,仔细去查看好所有图片的链接形式对应修改!

  • 获取所有对应文章及其文章对应图片的地址(方便后期去找到对应位置更改!)
#实现把所有文章的链接生成对应的json
import requests as req
import re
from bs4 import BeautifulSoup
import os
# 用于获取网站的所有文章链接
i = 0   # links number
all_link = []
origin_rul = 'https://www.emperinter.info/post-sitemap.xml'   #所有文章对应的sitemap地址
r = req.get(origin_rul)
bs = BeautifulSoup(r.content, 'html.parser') #解析网页
hyperlink = bs.find_all(name = 'loc') 
for h in hyperlink:
    hh = h.string
    all_link.append(hh)
    i += 1  

# print(i)

# 获取所有文章的图片地址
i = 1
bad_img = 1
origin_img_link = []
for m in all_link:
    r = req.get(m)
    bs = BeautifulSoup(r.content,'html.parser')
    hyperlink = bs.find_all(name = 'img') 
    print(str(i) + ' : ' +  m)               #如果有问题可以快速定位出错地方
    for h in hyperlink:        
        hh = h.get('src')
        if(re.match(r'^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+',hh)):  #确保为http开头的可下载图片
            print(hh)
#             print(str(i) + ' : ' +  m)               #如果有问题可以快速定位出错地方            
#             if(re.match(r'^((https|http|ftp|rtsp|mms)?:\/\/)www.emperinter.info/wp-content/uploads/(\S)+',hh)):
#                 break
#             else:
#                 print(hh)
#                 bad_img += 1
            origin_img_link.append(hh) 
    i += 1
    print('\n')                            #获取每个文章对应的图片

print(i)
print(bad_img)   #和后面的未成功下载的图片数量应一致

# # 查看所有图片链接的地址
# n = 1    
# for m in origin_img_link:
#     print(n)             #如果有问题可以快速定位出错地方
#     print(m)
#     n += 1
# print(n)
  • 查看及计算
finished = []
Not_finished = []
for m in origin_img_link:
    try:
        if(re.match(r'^((https|http|ftp|rtsp|mms)?:\/\/)www.emperinter.info/wp-content/uploads/(\S)+',m)):    #判断是否为已经转换成功的图片
            finished.append(m)
        else:
            Not_finished.append(m)
    except:
        print(m + " : wrong !")

# xx = 1        
# for x in finished:    #输出所有已转换成功的img url并计数
#     print(x)
#     xx += 1
# print(xx)
# print('\n\n\n')

yy = 1
for y in Not_finished:  #未转换成功的img url 并计数v              
    print(y)
    yy += 1

print(yy)   #和前面的未成功下载的图片数量应一致
  • 下载图片
test = 1
bad_img_count = 0
# 按正则匹配下载    
bad_img_link = []
for m in Not_finished:
    try:
        if(re.match(r'^((https|http|ftp|rtsp|mms)?:\/\/)',m)):
            r = req.get(m)
            if r.status_code == 200:
                s = re.sub(r'^((https|http|ftp|rtsp|mms)?:\/\/)([^\/]+/){2,6}','',m)  # 正则表达式保留图片名称
                with open(s, 'wb') as f:
                    f.write(r.content)
                print(s + '下载成功!')
                print(str(m) + '\n' + str(test) + " : " + s)      #用来检测生成的img名称是否正确
    except:
        print(m + ' : is wrong !')
        bad_img_link.append(m)
        bad_img_count += 1
    test += 1
print(test)
print('\n\n\n')

#获取需要手动去下载的图片,图片对应的文章由第一段代码获取
for mm in bad_img_link:
    print(mm)
print(bad_img_count)
  • 手动替换

    我原本是400多张图片,无法替换的有50多张,我是手动替换的!后期我应该不会把图片放到服务器之外的地方了,这次有10来张图片的来源网站已经关闭,自己用的编辑插件有可以直接复制图片到本地的选项,不在选sm.ms等服务商了!

用插件实现图片转webp

插件 Webp Express,尝试过什么short piexl之类的,但都由于过多复杂的东西以及限制都放弃了,这一个可以说是完全的free,而非限定500张处理之类的;

  • 设置如下(自己也可以测试去更改)

file

  • 测试

    有一个绿色即可,点击测试可看到实际效果

file
file

  • 开始转换

file

其它


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *