Time相册图册优化方案-缩略图压缩和webp自适应

新版本支持懒加载Time1.1.2版本 搭配云oss图片处理使用专题,请查看下边这个文章:

云图片处理:https://www.zmki.cn/5374.html

Time主题:https://www.zmki.cn/4953.html


随着time主题的发布,博主整理了一下目前网站图片的优化解决方案。提供参考。

这一篇详细介绍time如何极致优化图片大小,提升访问速度。包括图片压缩,缩略图优化,webp优化等。

优化前后对比:

  • 优化前图片占用 8.0M 

20191122-db6fa049527d8

  • 优化后图片占用 1.6M   具体为 优化缩略图 和 转换webp格式

20191122-279c3606ff7e6

优化方案之-图片压缩篇

图片在使用前可通过下边的工具进行压缩,一般的图片都可以压缩到50%以上。并且图片质量损失极小。

优化方案之-webp格式加持

首先介绍一下webp
WebP,是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。

荐使用又拍云 云储存 存放time图册,配合又拍云WebP 自适应方案,自动将图片转换成webp格式并分发。对当前还有一部分客户端并不支持 WebP 格式,可以通过 CDN 层去判断,对于支持的客户端,响应 WebP 格式的图片;不支持的客户端,响应原图。从而实现无缝适配。

20191122-499f5b8096ccd

看一下图就很好理解

使用前推荐搭配图床使用,可参考博主之前自建图床的文章:
  • 钻芒图床-Lsky Pro-为博客站长提供稳定图片托管:https://www.zmki.cn/2484.html
  • lsky-pro图床项目:https://github.com/wisp-x/lsky-pro
  • 钻芒图床三层分发:https://www.zmki.cn/4868.html

lsky-pro图床可以添加又拍云USS(云储存)储存策略,上边三篇文章都是讲如何搭配图床使用的,当然你也可以直接在又拍云控制台上传图片。

回归正题,如何开启又拍云webp自适应。在又拍云控制台-云储存-成本控制-开启webp自适应即可(如果有又拍云cdn开启方法同)

20191122-056e92d08c943

测试是否成功

如下图所示,是通过 Chrome 浏览器开发者工具抓包显示,可以通过查看响应头和请求头相关字段,得知该图片已经被 CDN 自动转化为 WebP 格式:

20191122-8119a8066d4c7

说一下这个方案对ios是没有用的,因为Safari不支持webp格式,不过ios端会显示原图

优化方案之-缩略图优化

何为缩略图,字面意思就是 缩小省略图片 意思相同 的图片。
time首页封面就是缩略图,点击图片进入图片灯箱就是图片原图。如下图演示。点击

20191122-8d4e57b538870

上边的你看见的就是缩略图,点击了就是原图,实际上是由两张图片组成。

回到正题,由于缩略图一般显示尺寸较小,没有高清显示的需求。我们可以适当地缩小缩略图和压缩。这样又可以节省一些带宽内存

如何实现?

不管你用的又拍云还是阿里云,甚至WordPress都可以调整处理图片大小。

又拍云  云储存 图片处理:

原图:https://a-oss.zmki.cn/2019/20190920-5d84e6d37f502.png

又拍云缩略图版本:https://a-oss.zmki.cn/2019/20190920-5d84e6d37f502.png!upys

20191122-1c385f7b381b8

阿里云oss图片处理

20191122-06ee056dc9903

方法和又拍云基本一致。

访问处理后的图片:

        图片链接   分隔符   图片处理规则名称
https://a-oss.zmki.cn/2019/img_4575.jpgimg


理清思路后,我们可以修改time模板中的index.php  调整首页缩略图图片路径。我的阿里云图片处理规则名称是ys,分隔符是- 所以在函数后加入-ys

这样我们用户访问首页的缩略图显示的是经过压缩和缩小的图片,减少图片占用提示页面加载速度,用户点击图片加载的才是原图。

20191122-eff2bd974d354

至此,大功告成。尽情的网上冲浪吧!

相关链接:

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=7x3d1ef6mcj3

文章最后更新于 2021-09-11

给TA买糖
共{{data.count}}人
人已赞赏
前端后端文档笔记网站源码网络资源

Time相册主题 for typecho模板 [2020年2月12日更新至V1.1.2 支持懒加载]

2019-11-22 22:15:29

文档笔记

css文字块-display行内元素块 inline-block 只给文字加背景

2019-12-1 12:40:40

31 条回复 A文章作者 M管理员
  1. 请问一下time主题的关于页面打不开是怎么回事呀?

    • Time主题没有独立的About关于页面,集成在底栏里

    • Alextao

      谢谢博主,顺便问一下怎么在一个文章里放多个图片链接呢?

    • 目前不支持相册集功能

  2. 😈 说博主奈斯就行了

  3. “首先介绍一下wenbp”
    多了个“n”哈哈哈哈 😐

    • 哈哈哈 感谢提醒 已经修改好啦 灰常感谢

    • Alextao

      早睡身体好 😆

    • 是的,你也早些休息

    • Alextao

      秒审,睡吧睡吧,明天再来你博客消化知识~ 晚安

    • 哈哈哈 晚安

    • Alextao

      秒啊???是不是在移动端操作的,不会还在电脑前吧?

  4. 我看了一下博主说的缩略图规则:链接分隔符字符 比如说 xxx.img.jpg-fg
    我的那个图床是:xxx.img-fg.jpg,请问这种情况该怎么办?

    • 修改相册源码格式或者后台设置为空。文章里的链接写图片链接。

    • Alextao

      关于相册源码格式 更改这一问题,我这里有一个小问题。
      $this->fields->img()
      这个东西应该是一个方法,里面是不是包含了图片地址输出而非返回链接,所以当我尝试直接对他进行替换的时候导致无法替换,然后我查看了他的变量类型,提示为NULL,如果可以的话,请问能够在哪里进行更改。
      我在typecho的编辑界面看到只有四个文件,都搜索过img(),结果除了index.php以外, comments.php,functions.php,post.php里面都看不到。
      /(ㄒoㄒ)/~~我太难了

    • 建议你后台图片格式设置为空 然后每个相册链接直接放你的带参数格式的URL即可

    • 或者用阿里云oss 或者又拍云uos。就没这么多问题了

    • Alextao

      我是拿自己不用的电脑搭建的图床,成本低啊!!!后台直接放这个嘛? 😮

    • 对 既然你的图片链接这么特殊 那么就不要自定义url参数了。直接每一个链接都放带参数的吧。

    • Alextao

      奇怪 ,链接没了。。。左a href=”http://imgs.lldxgo.com:2048/image/ePfo”右左img src=”http://imgs.lldxgo.com:2048/images/2020/04/11/startdream316_.th.jpg” alt=”startdream316_.jpg” border=”0″ /右左/a右

    • 太玄幻了 慢慢折腾吧 加油

    • Alextao

      hhh 感谢站长啦 我加油试试/(ㄒoㄒ)/~~

    • Alextao

      虽然我没有找到传递url的地方,但是经过我不屑地努力,找到了你的loadimg函数,在这里有一个source = xxx,就是从数据库里面取出来,然后加载他,这是一个js的代码,我直接在这个地方取消掉了他的const的属性,因为我需要更改他,然后我发现console。log它有的时候是空所以用了一个try,然后成功地用replace替换了链接属性,改成了缩略图,真的不容易/(ㄒoㄒ)/~~

  5. […] 优化图片占用:www.zmki.cn/4956.html […]

  6. 谢谢博主,已经放到淘宝上卖了,版权给您去掉了!由于您没有在GitHub公开发表,本人已注册知识产权即此模板,请您删除此贴,您损害了我的利益,否则律师函警告 😡 😡 😡

    • 呦,商品链接看一下啊。看来我的这个主题很受大家喜欢啊哈哈

    • Alextao

      不是这个优化,是TIME模板

    • 本人的Time早已经开源至GitHub,永不收费。https://github.com/wclk/time

    • Alextao

      哈哈哈让他发一下商品链接,大家一起探讨一下法律知识

  7. […] 优化图片占用: www.zmki.cn/4956.html […]