图片访问优化

选取正确的图片格式

类型 是否支持透明 是否支持动画 浏览器支持 压缩类型
PNG Yes No All 无损压缩
JPEG No No All 有损压缩
WebP Yes Yes Not all 无损压缩
GIF Yes Yes All 无损压缩

PNG

具有更强的色彩表现力，可以很好的展示图片，但是图片的体积大，所以一般 PNG 的使用场景是在需要清晰的保存图片使用

JPEG

色彩表现力较 PNG 表现较差，有损压缩，但是图片体积小，一般网站的图片使用都是这种格式

压缩图片

  • 使用插件来对图片进行压缩,如：
1
npm install --save-dev image-webpack-loader

图片 CDN

可以在用户与服务器之间添加 CDN 层，图像 CDN 专门从事图像的转换、优化和分发，对于从图像 CDN 加载的图像，图像 URL 不仅指示要加载的图像，还指示大小、格式和质量等参数。可以让用户与 CDN 交互的图片的体积更小，加快加载速度

图像 URL 通常包含以下成分：来源、图像、安全密钥和转换。

CDN 的使用，这里我使用的是 又拍云 - 加速在线业务 - CDN 加速 - 云存储 (upyun.com)

其 CDN 的使用免费，可以较好的处理一些简单的业务需求

响应式图片

简单来说就是针对不同的分辨率调整显示不同大小的图片尺寸，可以修改对应的 CSS 也可以修改对应的 JS 文件

图床

如果图片的体积较大或者数量较多，那么对于服务器的流量来说就是一种摧残，而图床则是处理这个问题的方法之一

我们可以将图片存放在图床上，在使用中就直接使用图床所提供的外链即可

，图床尤其是免费的图床都不完全的稳定，可能会突然丢失图片，所以注意重要图片的备份

对 Hexo 的优化

本博客使用的是 Hexo + butterfly 构建的网站，部署在华为云上，但是在华为云服务器是按照流量计费，对于其中的大图片以及大文件都需要消耗流量，所以我这里对其进行优化

Jsdelivr + GitHub + ImgBot

Link: Jsdelivr Imgbot - Automatic image compression

图床

图床我选择的是 GitHub 作为图片托管，原因主要是因为在 Hexo 的初次创建中，我就在 GitHub 上传创建了一个个人的博客页，所以就使用其作为静态文件仓库

创建过程可以参考：博客搭建（一）

CDN

GitHub 对于大部分的访问者来说访问速度慢，所以这里使用了 Jsdelivr 作为图片 CDN 来对图片的访问过程进行加速

1
2
3
4
// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it

https://cdn.jsdelivr.net/gh/user/repo@version/file

以上是最基础的使用方法，是直接对 GitHub 上的资源进行加速

图片压缩

为了简化图片上传，压缩等操作，这里直接在 GitHub 上使用了 ImgBot

它可以自动的将仓库里的图片进行压缩，并发布一个 Merge 你只需要合并分支即可

如果需要更详细的配置，需要在目录中添加配置文件： .imgbotconfig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "schedule": "daily", // daily|weekly|monthly
    "ignoredFiles": [
        "*.jpg",                   // ignore by extension
        "image1.png",              // ignore by filename
        "public/special_images/*", // ignore by folderpath
    ],
    "aggressiveCompression": "true", // true|false
    "compressWiki": "true", // true|false
    "minKBReduced": 500, // delay new prs until size reduction meets this threshold (default to 10)
    "prTitle" : "Your own pr title",
    "prBody" : " Text before optimization ratio {optimization_ratio} Text after optimization ratio
                 Text before optimization details {optimization_details} Text after optimization details",
}

具体意思可以看：Imgbot - Docs