js将图片转换为base64_为网站添加图片 WebP 自动转换功能

news/2024/5/20 4:35:40/文章来源:https://blog.csdn.net/weixin_39835991/article/details/110743293

0565688cc28696c4425ae9e79effb555.png

最近这几天在网上闲逛时,发现了一个名叫 WebP_Server_Go 的新项目,可以无缝将网站上已有图片转换为 WebP 格式输出,同时不改变原始图片链接,看起来挺适合我个人博客的需求,使用也比较简单。

网站使用 WebP 格式图片的好处是非常明显的,比起 jpg 有更强的压缩率

项目地址:https://github.com/webp-sh/webp_server_go

首先去 Releases 页面下载项目文件,这个项目成品就是一个单文件,没有后缀格式,为了方便,我这里重命名为 webp-server。

服务器环境为 CentOS 7.7 64bit,这项目从名称来看是不支持 32 位系统的。

我这里由于机子是系统盘和数据盘分开的,因此把程序丢到/opt/webp/目录,转换后的输出文件放在/www/webp/下。

接着 SSH 下切换到此目录:

cd /opt/webp

让程序自己创建一个样本配置文件:

./webp-server -dump-config > config.json

webp-server 是程序的文件名,这个根据自己实际修改,GO 语言的程序在 Linux 下可以直接运行,非常方便。

然后编辑 config.json 文件,:

 { "HOST": "127.0.0.1", "PORT": "3333", "QUALITY": "80", "IMG_PATH": "/www/wwwroot/lishuma.com", "EXHAUST_PATH": "/www/webp", "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"] 
} 

配置文件内容根据自己网站情况对应修改。

host 是监听地址,默认本机一般不用改

port 是端口,这个可以随意设定成自己喜欢的,注意由于是本地调用,防火墙是不需要放行此端口的。

quality 是转换质量,数字越大画质越好,一般来说默认的 80 差不多就刚好了,具体看自己需求。

img_path 是网站图片存储路径,这个只需要设定到网站所在的目录即可,具体目录会通过 nginx 规则匹配。

exhaust_path 是转换后的缓存输出目录,转换后的图片缓存会放在这里,这个根据自己情况设定,我这里设定在/www/webp 。

allowed_types 这个就不用多说了,指定要转换的源图片格式,一般网站也就这几种格式居多,正常来说不用改。


改完配置文件就保存关闭,然后去修改网站的 nginx 配置文件,添加以下内容:

location ^~ /wp-content/uploads/ {         proxy_pass http://127.0.0.1:3333; 
}

我这里是 wordpress 网站,所以监控/wp-content/uploads/目录,效果如下图:

6396fc696a4c4b5eb6f6ea75c5de423b.png

改完保存,重载 nginx 配置即可。

然后可以先运行测试一下,给程序执行权限:

chmod +x webp-server

直接执行,根据自己 config 文件目录修改 :

./webp-server --config /opt/webp/config.json

然后网站上找几个有图片的页面打开,ssh 里如果看到如下图这种 save to 的记录,就是成功转换图片了:

9ba121eea5c8d6750859d97c68d73b60.png

网页端 F12 调出开发者工具,也可以看到文件后缀名虽然还是 jpg,但类型已经变成了 webp:

750902ff99bd10b8e9ca125a66773c31.png

测试运行正常的话就可以 Ctrl+C 先退出了,来准备将其添加到开机自启,用 systemd 来管理。

在程序目录运行以下命令,让它创建一个样本服务文件:

./webp-server -dump-systemd > /lib/systemd/system/webp.service

然后去/lib/systemd/system/目录下,编辑 webp.service 文件,文件样例内容如下:

[Unit] 
Description=WebP Server 
Documentation=https://github.com/n0vad3v/webp_server_go 
After=nginx.target [Service] Type=simple 
StandardError=journal 
AmbientCapabilities=CAP_NET_BIND_SERVICE 
WorkingDirectory=/opt/webp
ExecStart=/opt/webp/webp-server --config /opt/webp/config.json 
ExecReload=/bin/kill -HUP $MAINPID 
Restart=always 
RestartSec=3s [Install] 
WantedBy=multi-user.target 

WorkingDirectory 和 ExecStart 都设定成程序目录,比如我的配置文件里就都改成了/opt/webp/ 。

保存退出,然后重新加载服务配置:

systemctl daemon-reload

启动程序:

systemctl start webp.service

再查看一下程序状态:

systemctl status webp.service

显示绿色 running 的话就是正在运行了:

b99be3eea83ace048503af4538df7a46.png

再次打开浏览器这类测试转换效果,一切正常的话就可以添加到开机自启了:

systemctl enable webp.service

到此就整个程序配置完毕,可以在支持 webp 的浏览器里看到页面加载速度的明显提升。


参考来源:

让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP

让图片飞起来 oh-my-webp.sh !

个人网站无缝切换图片到 webp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_795709.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么linux访问不到文件夹,laravel部署到linux,将public文件夹指定为网站根目录,但是无法访问其子文件夹...

本机使用的是window环境,一切正常,但是部署到linux系统上(配的是nginx),在访问的时候,控制器和方法都能正常执行,页面也可以输出,但是输出的页面却缺少css文件,一查是500错误,已经将请求重定向到public文件夹下,我的目录结构是:public/web/css/css.css域名是:aaa.com直接访问aa…

seo自动发外链_seo如何做外链(做seo外链建设有哪些原则)

人人做seo都需要发外链,同样的工作最终的结果却是千差万别,有些人发的外链让网站优化的结果更好,有些人发外链带给网站的优化结果是无效甚至于是反作用的。我们seo如何做外链呢?做外链建设有哪些原则?一、发布一些高质…

个6000常用wifi弱口令._Python网站开发怎么学(9个练习项目)

> 公众号回复"Python"获取更多学习资源;1. CSS3 基础入门地址: https://www.shiyanlou.com/courses/1246学习人数: 710关注人数: 71该课程已升级,请学习《CSS3 简明教程》:https://www.shiyanlou.com/courses/12372. Java 简明教…

网站封装单个exe_如何测试React网站和应用程序

通过学习测试React网站和应用程序来获取可用于生产的代码。#react#如何测试React网站和应用程序(图片来源:未来)如果您想知道如何测试React,那么您来对地方了。您真的知道您的代码可以执行它的工作吗?您是否在浏览器中测试过?如果…

python建站与java建站有何不同_模板建站好不好?和定制建站有何不同?

很多新手在建站前,都拿不准到底是使用模板建站好,还是找外包团队定制开发好。这两种建站方法差异还是蛮大的,下面就给大家说说模板和定制的几个主要不同之处,你可以根据这些来判断适合自己的建站方式:1.制作周期不同定…

html5网站访问地图

这个地图是我结合了网上的代码自己修改了下做出来的&#xff0c;样子大概是这样 前端使用的是layui&#xff0c;如果要使用的话需要更改一下 我就直接上代码吧 <!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml"> <head><meta char…

wordpressQQ登陆php代码_实现 WordPress 登录查看网站

下面由WordPress教程栏目给大家介绍WordPress 登录查看网站的方法&#xff0c;希望对需要的朋友有所帮助&#xff01;如网站内容只希望注册用户浏览&#xff0c;对其他所有人隐藏&#xff0c;浏览者未登录访问直接跳转到登录注册页面&#xff0c;可以用下面的代码实现。将下面代…

十个网页html,10 个不错的 HTML5 类型网站

Agent 008 Ball 一款采用canvas和audio元素的在线桌球游戏网站The Wilderness Down Town是一个很酷的结合地图和音乐创造出来的互动式电影短片网站。这个由Chris Milk拍摄的基于html5的互动电影短片“We Used to Wait”&#xff0c;超越flash/java,非常强大。网站利用谷歌浏览器…

网站根目录打不开服务器拒绝,检查网站打不开的三种原因

自己做了网站之后&#xff0c;如果在实际访问中&#xff0c;出现了网站打不开的情况&#xff0c;怎么去查找什么原因导致了网站打不开呢&#xff1f;可以通过下面三个方面去检查一下到底自己做网站时哪里出现了问题。一、检查网站域名是否出问题。网站在线方式有二种&#xff1…

java heritrix_「heritrix」开源爬虫: Heritrix 3.1 Windows 上安装/使用 - seo实验室

heritrix目前 Heritrix 的最新版本是 3.1.0(2011-10-21 发布)http://blog.sina.com.cn/s/blog_5f54f0be0101hcy8.html讲了 1.14.4 版本的安装和使用http://blog.sina.com.cn/s/blog_5f54f0be0101hcyd.html讲了如何扩展 1.14.4 版本其中的模块本文讲如何安装和使用 Heritrix 最新…

75款响应式国外漂亮网站建设中模板(上线倒计时模板)

一些关于国外漂亮网站建设中模板&#xff0c;希望大家能使用得上&#xff0c;大家喜欢就点个赞吧。 1、 【网站开通中】黑夜飘雪背景响应式网页倒计时模板 大小&#xff1a;2.09 MB 下载地址&#xff1a;http://www.177347.com/view-105-31847-0.html 2、 【网站计划实现中…

asp php都支持的主机,Asp虚拟主机与php主机有什么区别?Asp虚拟主机适合哪些网站?...

购买过虚拟主机的朋友应该都知道&#xff0c;在我们选择主机方案时&#xff0c;一般主机商都会问我们选择PHP语言&#xff0c;还是ASP语言。那么&#xff0c;这两者之间到底有啥区别呢&#xff1f;Asp虚拟主机与php主机的区别其实&#xff0c;PHP和ASP是两种动态语言&#xff0…

c语言课设代写一般多少钱_SEO代写1000字文章要多少钱?什么价格才算合理?

如题&#xff0c;不单单是SEO代写文章这一块价钱千差万别&#xff0c;其他产品亦是如此。SEO代写报价影响因素很多&#xff0c;以价格区间去衡量合不合理&#xff0c;其实是不公平的。偏锋文章代写报价因为文章发布地址、用途、目的等各种要求的不同&#xff0c;价格也不同。下…

利用其他网站的搜索结果_网站SEO优化知识分享 - 最蜘蛛池出租

原出处&#xff1a;最蜘蛛池原文链接&#xff1a;网站SEO优化知识分享 - 最蜘蛛池1、内容相关性搜索引擎会努力为搜索者的问题提供最相关的结果。具体如何提供搜索结果&#xff0c;不同的搜索引擎有自己不同的内部算法&#xff0c;难以真正确定&#xff0c;但有几项因素肯定会影…

可以发外链的网站_守护袁昆:网站营销运营到底哪里可以发外链?

(文/守护袁昆)对于网站运营者来说网络营销推广比较难做&#xff0c;大多数朋友选择做网站SEO优化&#xff0c;然而SEO优化中外链怎么发的问题却难倒了9成9的从业者。SEO优化到底哪里可以发外链&#xff1f;极少数部分网站是可以发布外链的&#xff0c;但基本上网站收录慢、流量…

linux i2c 传输详解,I2C基础知识_Linux编程_Linux公社-Linux系统门户网站

常识两条总线线路:串行数据总线SDA&#xff0c;串行时钟总线SCL每个连接到总线的器件都有唯一的地址供其他设备寻址每个连接到总线的器件都可以作为发送器和接收器是多主机总线&#xff0c;如果两个或更多主机同时初始化&#xff0c;数据传输可以通过重提检测和仲裁防止数据被破…

服务器上iis7.0的网站架设,如何在iis 7.0配置网站 iis上搭建网站具体图文教程

一个网站需要程序&#xff0c;域名&#xff0c;空间。这本是三个独立产品&#xff0c;如何把他们关联起来&#xff0c;形成我们可以正常访问网站呢&#xff1f;下面就来讲讲如何在iis上&#xff0c;搭建网站。以下实例是在window 2008 server上安装iis 7.0&#xff0c;搭建.net…

php代码统计,php+memcache实现的网站在线人数统计代码

这篇文章主要介绍了phpmemcache实现的网站在线人数统计代码,代码例子简洁实用,需要的朋友可以参考下今天闲来无事&#xff0c;想在博客统计中显示在线人数。在网上找了好多例子&#xff0c;不是数据库存储数据就是文件存储&#xff0c;代码也看起来过于复杂。晚上回来后&#x…

linux下运行hadoop,安装并运行Hadoop - 如何在Linux上安装与配置Hadoop?_服务器应用_Linux公社-Linux系统门户网站...

三、安装并运行Hadoop介绍Hadoop的安装之前&#xff0c;先介绍一下Hadoop对各个节点的角色定义。Hadoop分别从三个角度将主机划分为两种角色。第一&#xff0c;划分为master和slave&#xff0c;即主人与奴隶;第二&#xff0c;从HDFS的角度&#xff0c;将主机划分为NameNode和Da…

聊聊自学,让你事半功倍的学习网站和工具

上学那会儿&#xff0c;我们有大量的业余时间&#xff0c;去做自己想做的事情&#xff0c;幸福且充实。 上大学后&#xff0c;有个明显的感受是&#xff1a;很多知识都要靠自学&#xff0c;才能掌握。 我大学本身自动化专业&#xff0c;学得了强电玩得了弱点&#xff0c;做得…