Flutter优化：降低HTTP请求获取的网络图片质量以提升加载速度

针对你遇到的高分辨率图片在弱网下加载失败的问题，推荐几个实用的Flutter包来实现图片质量压缩/尺寸调整，优化加载体验：

1. cached_network_image #

这个包自带缓存功能，同时支持加载时调整图片渲染质量、指定尺寸，上手简单：

CachedNetworkImage(
  imageUrl: "${widget.jsonData["articles"][index]["urlToImage"]}",
  fit: BoxFit.fill,
  imageBuilder: (context, imageProvider) => Image(
    image: imageProvider,
    fit: BoxFit.fill,
    filterQuality: FilterQuality.low, // 降低图片渲染质量
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

你还可以直接通过width/height参数指定加载的图片尺寸，从源头减少传输的文件体积。

2. flutter_image_compress #

如果需要更精细的压缩控制，可以先下载原图再压缩后显示：

import 'package:flutter_image_compress/flutter_image_compress.dart';
import 'package:http/http.dart' as http;
import 'dart:typed_data';

// 自定义方法获取压缩后的图片字节
Future<Uint8List?> getCompressedImage(String url) async {
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final compressedBytes = await FlutterImageCompress.compressWithList(
      response.bodyBytes,
      quality: 50, // 质量范围0-100，数值越小压缩率越高
      minWidth: 600, // 指定最小宽度，图片会按比例缩小
    );
    return compressedBytes;
  }
  return null;
}

// 页面中使用
FutureBuilder<Uint8List?>(
  future: getCompressedImage("${widget.jsonData["articles"][index]["urlToImage"]}"),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Image.memory(
        snapshot.data!,
        fit: BoxFit.fill,
      );
    } else if (snapshot.hasError) {
      return Icon(Icons.error);
    }
    return CircularProgressIndicator();
  },
)

3. image（纯Dart库） #

这是一个轻量的纯Dart图片处理库，支持调整尺寸和压缩质量：

import 'package:image/image.dart' as img;
import 'package:http/http.dart' as http;

Future<img.Image?> getResizedImage(String url) async {
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final image = img.decodeImage(response.bodyBytes);
    if (image != null) {
      // 缩小到原尺寸的50%
      final resizedImage = img.copyResize(image, width: image.width ~/ 2);
      return resizedImage;
    }
  }
  return null;
}

// 页面中使用
FutureBuilder<img.Image?>(
  future: getResizedImage("${widget.jsonData["articles"][index]["urlToImage"]}"),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Image.memory(
        img.encodeJpg(snapshot.data!, quality: 60),
        fit: BoxFit.fill,
      );
    }
    return CircularProgressIndicator();
  },
)

额外小技巧：可以检查图片来源的URL是否支持参数调整（比如很多图床支持?w=xxx或?quality=xx这类参数直接返回压缩后的图片），这种方式不需要额外依赖包，加载效率更高。

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