Flutter如何保存8位索引色PNG以减小图像文件体积？

问题根源 #

Flutter的ui.Image对象在加载图像时，会将原图像的像素数据转换为RGB格式的位图——不管原图像是8位索引色还是24位RGB。所以调用image.toByteData(format: ui.ImageByteFormat.png)时，只能生成24位RGB格式的PNG，无法保留原有的索引色信息，最终导致保存后的文件体积变大。

解决方案：使用第三方图像处理库 #

Flutter原生不支持索引色PNG的编码，需要借助image库（Dart社区常用的图像处理工具）来实现，它可以直接解码索引色PNG，并重新编码为8位索引色格式。

步骤1：添加依赖 #

在pubspec.yaml中添加image库的依赖：

dependencies:
  flutter:
    sdk: flutter
  image: ^4.1.3 # 建议使用最新版本

步骤2：修改代码逻辑 #

直接操作图像的原始字节，跳过ui.Image的转换流程，避免丢失索引色信息：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:io';
import 'package:image/image.dart' as img;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 加载并保存8位索引色PNG
  await loadAndSaveIndexedPng("assets/images/image_8_bit.png", "assets/images/image_8_bit__save.png");
}

Future<void> loadAndSaveIndexedPng(String assetPath, String savePath) async {
  // 从asset加载原始图像字节
  final ByteData byteData = await rootBundle.load(assetPath);
  final Uint8List imageBytes = byteData.buffer.asUint8List();

  // 用image库解码PNG
  final img.Image? decodedImage = img.decodePng(imageBytes);
  if (decodedImage == null) {
    throw Exception("无法解码目标PNG图像");
  }

  // 编码为8位索引色PNG（自动优化至最多256色）
  final Uint8List encodedPng = img.encodePng(
    decodedImage,
    format: img.PngFormat.indexed8, // 强制指定8位索引色格式
    level: 6, // 压缩级别（0-9），值越大压缩率越高，默认6兼顾速度和体积
  );

  // 将编码后的字节写入文件
  await File(savePath).writeAsBytes(encodedPng);
}

代码说明 #

• 跳过ui.Image转换，直接操作原始字节，完整保留原图像的索引色信息。
• img.encodePng的format参数指定为indexed8，强制生成8位索引色PNG，库会自动处理颜色索引表的生成。
• 可通过level参数调整压缩率，根据需求在体积和编码速度之间平衡。

验证结果 #

修改后保存的图像会是标准8位索引色PNG，体积与原图像接近（约1.0MB），同时保持100%的图像质量。

内容的提问来源于stack exchange，提问作者Alex