优化HEXO图片LOADING

最近在写 TRAVELLOGUE，插入了很多的图片 发现BLOG加载的很慢。因此 访问优化 提上进程，此LOG诞生。

总的优化思路是: 在不更改图片源文件的情况下。尽量通过优化访问速度以及优化加载顺序来提升访问体验。

先将CDN换成 Edge One

CDN

换完之后,还是感觉速度有点差强人意, 检查了下控制台 还是要5min加载完 吓死人了😧

LODING SPEED

核心原因还是图片太大了, 服务器带宽太小了

LQIP 方案优化瞬时加载

在浏览hexo的plugin库中, 偶然发现 hexo-lazyload-image。这个plugin主要的功能就是实现图片的 lazyload 但是其中有个 LQIP(Low Quality Image Placeholder)方案能够迎合优化访问的目的。说白了就是一张图片分高低分率两种，先加载低分辨率，再加载高分辨率

先写了个python程序 压缩出一份低分辨率版本

import os
import shutil
from PIL import Image


def zip_jpg_images(input_folder, output_folder, quality=75, size_threshold_mb=2):
    """
    处理文件夹中的JPG图片：
    - 大于阈值大小的图片将被压缩。
    - 小于等于阈值大小的图片将被直接复制。
    所有处理后的图片都以原名称保存在输出文件夹中。

    :param input_folder: 存放源图片的文件夹路径。
    :param output_folder: 存放处理后图片的文件夹路径。
    :param quality: 压缩质量，范围 1-95 DEFAULT 75
    :param size_threshold_mb: 文件大小阈值（单位MB）DEFAULT 2
    """

    # 将MB转换为字节（Bytes）
    size_threshold_bytes = size_threshold_mb * 1024 * 1024

    # 1. 检查并创建输出文件夹
    if not os.path.exists(output_folder):
        print(f"输出文件夹 {output_folder} 不存在，正在创建...")
        os.makedirs(output_folder)

    print(f"开始处理... 压缩阈值设置为 {size_threshold_mb}MB")
    print("-" * 40)

    # 2. 遍历输入文件夹中的所有文件
    for filename in os.listdir(input_folder):
        # 只处理 .jpg 和 .jpeg 文件
        if filename.lower().endswith(('.jpg', '.jpeg')):
            input_path = os.path.join(input_folder, filename)
            output_path = os.path.join(output_folder, filename)

            try:
                # 获取文件大小
                file_size_bytes = os.path.getsize(input_path)
                file_size_mb = file_size_bytes / (1024 * 1024)

                # --- 根据大小决定压缩还是复制 ---

                # A. 如果文件大于阈值，则压缩
                if file_size_bytes > size_threshold_bytes:
                    print(f"压缩: {filename} ({file_size_mb:.2f}MB)")
                    with Image.open(input_path) as img:
                        if img.mode == 'CMYK':
                            img = img.convert('RGB')
                        img.save(output_path, 'JPEG', quality=quality, optimize=True)
                        compressed_size_mb = os.path.getsize(output_path) / (1024 * 1024)
                        print(f"  -> 已压缩保存，新大小: {compressed_size_mb:.2f} MB")

                # B. 如果文件小于等于阈值，则直接复制
                else:
                    print(f"复制: {filename} ({file_size_mb:.2f}MB)")
                    shutil.copy2(input_path, output_path)  # copy2会同时复制元数据
                    print(f"  -> 已直接复制到目标文件夹")

            except Exception as e:
                print(f"处理文件 {filename} 时发生错误: {e}")

    print("-" * 40)
    print("所有JPG图片处理完成！")


# --- 使用示例 ---
if __name__ == "__main__":
    # --- 请在这里修改您的设置 ---

    # 1. 指定您的源图片文件夹路径
    source_folder = "./08/08"

    # 2. 指定一个用于存放处理后图片的文件夹路径
    compressed_folder = "./08/output_08"

    # 3. 为大图片设置压缩质量 (推荐 65 到 85 之间)
    compression_quality = 70
    # 4. 设置文件大小阈值（单位：MB）
    size_threshold = 3

    # --- 开始执行 ---
    if not os.path.isdir(source_folder):
        print(f"错误：源文件夹路径 '{source_folder}' 无效或不存在。请检查后重试。")
    else:
        zip_jpg_images(source_folder, compressed_folder, compression_quality, size_threshold)

然后将压缩过后的图片进行图床替换

image

嗯嗯 一下快了好多

添加 hexo-all-minifier插件

这个插件可以压缩HTML、CSS、JavaScript、图片等代码文件，可以减少网站的加载时间。

image

要不先这样吧😁