建站笔记 – 智翼分享

HTML前端图片压缩工具，附完整可运行源码

智翼分享 — Fri, 10 Jul 2026 15:51:30 +0000

做自媒体或者临时需要图片压缩的朋友，一定都踩过图片压缩的坑：于是我自己用HTML写了一款纯浏览器本地图片压缩工具，

线上地址：https://zhiyifenxiang.com/tupianyasuo/

工具核心亮点（全部前端实现，零后端）

全程本地运算，图片永不上传服务器，隐私100%安全

永久免费无次数限制，不加水印、无广告

支持JPG/PNG/WebP三种主流图片格式

10-100自定义压缩质量，尺寸锁定不裁剪原图

一键转JPG通用格式，压缩前后实时对比预览

不用登录、不用注册，打开网页直接免费使用

所有图片处理逻辑全部在你的浏览器内存中完成，不会发起任何网络请求上传原图，隐私敏感素材（证件照、产品图、写真）放心用。

一、前端本地压缩核心原理

市面上绝大多数在线压缩工具都会把图片上传到服务端处理，而本工具依靠浏览器原生API实现纯本地处理：

完整处理流程：本地选择图片 → 浏览器读取文件压缩 → 本地预览+下载，全程无网络上传。

二、完整可运行前端源码（无第三方依赖）

1. HTML代码



本地图片无损压缩工具 | 免费不上传服务器


    
    
        
            
                
                高效照片压缩工具
            
            
                 纯本地浏览器处理 · 图片永不上传服务器

                 永久免费 · 零隐私泄露风险
            
        
        
            
                
                    
                    上传图片
                    仅支持 JPG / PNG / WebP，全部图片仅在您本机浏览器运算，不会上传任何服务器，隐私安全永久免费
                    
                        选择图片
                    
                    
                    
                    
                         重新选择
                    
                
            
        
        
            压缩设置
            
                
                    压缩质量: 90%
                    
                    统一锁定原图尺寸；10=极致小体积，100=无损最高画质；PNG不受质量数值影响，原生无损
                
                
                    输出格式
                    
                        JPG｜通用兼容，有损高保真压缩
                        PNG｜无损透明，像素色彩完全不变
                        WebP｜平衡画质体积，现代网页最优
                    
                    所有格式均不修改原图分辨率，全程本地运算不上传
                
            
            
                
                    开始压缩
                
            
        
        
            压缩前后对比
            
                
                    原图
                    
                        
                        
                            
                            暂无图片
                        
                    
                    
                        尺寸: --
                        大小: --
                        格式: --
                    
                
                
                    压缩后
                    
                        
                        
                            
                            暂无图片
                        
                    
                    
                        尺寸: --
                        大小: --
                        格式: --
                        
                    
                
            
            
                
                    下载图片
                
            
        
    
    
        图片压缩工具 © 智翼分享 2026 | 全程本地浏览器处理，图片不会上传至任何服务器，永久免费无水印
    
    
        
            
            本地处理中，请勿关闭页面

三、线上工具使用教程

1、打开链接：https://zhiyifenxiang.com/tupianyasuo/

2、点击上传框选择本地图片；

3、滑动滑块调整压缩质量；

4、自动生成原图/压缩后对比，查看体积缩减比例；

5、点击下载，保存压缩后的图片到本地

有开发能力的朋友可以基于这份源码继续迭代

结尾

不管是自媒体博主，还是临时需要图片压缩小伙伴，这款零隐私风险的本地压缩工具都能解决日常配图压缩痛点。

源码完全开源，可直接复制部署到自己的静态站点使用，不用任何后端服务，静态页面托管即可运行。

设置网站动态标题

智翼分享 — Fri, 21 Feb 2025 05:34:50 +0000

我们经常逛别人的网站，有些网站当我们离开该页面浏览其他页面的时候，我们在离开的页面上面会看到比如本站的“你别走吖 Σ(っ °Д °;)っ”这样的字样，当我们点回来的时候页面上面会看到“(/≧▽≦/)你又回来了！”的字样。那么我们如何实现呢？其实很简单，只需一句javascript语句即可实现。请看下面的教程。

美化教程

（以子比主题最新版为例）在后台主题设置—>自定义代码—>自定义javascript代码把下面的代码添加到里面即可实现。

//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦！”可自行修改成自己喜欢的标题文字。

如果你的网站主题设置没有自定义javascript代码这个框的话，若有自定义头部HTML代码的话，把下面的代码添加到里面也可实现。

或者在首页文件位于“”标签之前添加下面的代码也可以。

注：代码中“你别走吖 Σ(っ °Д °;)っ”和“(/≧▽≦/)你又回来啦！”可自行修改成自己喜欢的标题文字。

添加VIP视频在线解析页面

智翼分享 — Wed, 19 Feb 2025 07:09:31 +0000

电视剧、电影是我们生活中必不可少的，它们可以让我们放松一下心情，但大多数的电视剧或电影都是要VIP或者付费的，本来不怎么富裕的我们更加的雪上加霜，本来可以每炖吃好的，但为了追一个剧，只能吃馒头了！
那么我们怎么能够免费看那些电视剧或电影呢？
为了能够看免费的，大佬们弄出了VIP视频解析接口，只需在该接口输入电视剧或电影的网址就可以观看视频。
VIP视频在线解析页面采用的主要是HTML代码和一些js、css啥的，因为我的能力有限，所以只能搞这么多。
如果有感兴趣的朋友，自己修改一下代码。
同时本页面采用的是后台直接通过创建自定义HTML页面实现的，主要防止主题每次更新后就会消失，所以采用这种方式来实现。
本站采用的是子比主题，所以可能只适应子比主题，如果有其他主题的朋友，自己测试一下吧。

美化教程

进入后台—>页面—>新建页面—>自定义HTML（古登堡编辑器，我没用过经典编辑器不知道是不是这样）—>把下面的代码添加进去就可以啦！

初始版代码：

修改版去边框代码：

优化版解决弹窗不显示与更换部分无效接口代码：

Zibll子比主题-全站使用阿里巴巴Iconfont图标详细图文教程

智翼分享 — Wed, 01 Jan 2025 02:00:00 +0000

子比主题已经集成了Font Awesome 图标，可以在全站使用Font Awesome图标而无需任何插件。

要使用Font Awesome图标教程十分简单，如图所示，仅需两步：

Iconfont-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录，数百万的图标免费使用，官方也提供了详细的教程

一、新建Iconfont项目

接下来我们就一步一步的教大家如何在使用阿里巴巴Iconfont图标

Iconfont 支持GitHub帐号登录，登录之后你就可以寻找自己需要的图标啦

首先呢，寻找自己的需要的图标，通通点进购物车！

再把购物车的图标加入到项目，如果还未创建项目，那就新建一个就是了

二、网站集成

使用 Iconfont图标图标官方也有详细的教程，同时官网提供三种集成方式：Unicode、class、Symbol。这三种集成方式各有优劣势，具体请查看官方教程

这里我推荐使用 Symbol 的方式集成到网站中，当然你也按照官方的教程使用其它方式集成

第一步：将刚刚新建的项目生成 Symbol 接入链接，并复制

第二步：将代码保存到主题设置

将以下代码中的链接替换为您刚刚复制的链接，然后进入主题设置-自定义代码-自定义底部代码，粘贴后保存主题设置

简单吧！网站集成 Iconfont图标就已经全部搞定了！接下来就是使用 Iconfont图标了！

提醒：请勿直接将代码写入到主题源码，已更新就没了。

三、使用 Iconfont图标

在已经添加到你项目中查找图标并复制图标代码，然后按照下面的格式替换href="#iconxxx"中的图标代码，将代码插入到你需要显示图标的地方！

还是按照在导航菜单中添加图标为例：

最后我们看看效果吧！

是不是很简单啊，接下来我我们再试试在文章中插入

使用古腾堡编辑器需要将内容转换为HTML编辑，然后再复制图标代码：

使用经典编辑器也是需要先转为HTML编辑，再将图标代码复制到所需位置：

主题设置中的部分内容也是支持的喔！例如在加载更多的文案中插入

教程结束，赶紧试试吧