Browser Image Compression


This is a flutter plugin package that compress images using the javascript library browser_image_compression. This plugin only works on Web platform. Please see browser-image-compression repository for all image compression benefits.

Notable benifits of this plugin are:

  • Compression works on a web worker cuncurrently with your flutter app.
  • Image compression update progress.
  • Also can resize image if prefered.
  • You can limit the size of the compressed file in megabytes, (the lower you set the longer it takes to compress).


  • flutter pub add browser_image_compression
  • append inside the <head> tag on index.html
<script type="text/javascript" src=""></script>
  • import the plugin
    import 'package:browser_image_compression/browser_image_compression.dart';
  • code as the example below


final XFile? xfile =
    await ImagePicker().pickImage(source:;

if (xfile != null) {
    final initialSize = await xfile.length();

    // there's is compressImageByXFile that you can input the XFile directly but in this example it
    // uses the general method in case you're getting your image file through another way
    _imageNotifier.value = await BrowserImageCompression.compressImage(
    basename(xfile.path), // or
    await xfile.readAsBytes(),
        maxSizeMB: 1,
        maxWidthOrHeight: 2048,
        useWebWorker: true,
        onProgress: (progress) {
        _progressIndicatorNotifier.value = progress;

    _progressIndicatorNotifier.value = null;

    if (_imageNotifier.value != null) {
    final finalSize = (_imageNotifier.value!).length;

    var f = NumberFormat("####.0#", "en_US");

    comparisonSize =
        'initial size is $initialSize and final size is $finalSize. Compression of ${f.format(initialSize / finalSize)}x';


  • Implement javascript "AbortSignal" to abort compression.