Repository: flutter
Issue: AVIF Image doesn't work on Chrome browsers
Labels: platform-web,a: images,has reproducible steps,P2,browser: chrome-desktop,team-web,triaged-web,found in release: 3.27,found in release: 3.28

### Steps to reproduce

Try to render any AVIF in Chrome failed but works fine on Safari and Firefox

```dart
Image.network('https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif')
```
### Expected results

Image rendered

### Actual results
```
══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to decode image using the browser's ImageDecoder API.
Image source: encoded image bytes
Original browser error: InvalidStateError: Failed to retrieve track metadata.

When the exception was thrown, this was the stack

Image provider:
  NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
  scale: 1.0)
Image key:
  NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
  scale: 1.0)
```
### Code sample

```dart
import dart:math' as math;

import 'package:flutter/material.dart';

const int maxSeeds = 250;

void main() {
  runApp(const Sunflower());
}

class Sunflower extends StatefulWidget {
  const Sunflower({super.key});

  @override
  State<StatefulWidget> createState() {
    return _SunflowerState();
  }
}

class _SunflowerState extends State<Sunflower> {
  int seeds = maxSeeds ~/ 2;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark,
        appBarTheme: const AppBarTheme(elevation: 2),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Sunflower'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.network('https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif')
            ],
          ),
        ),
      ),
    );
  }
}

class SunflowerWidget extends StatelessWidget {
  static const tau = math.pi * 2;
  static const scaleFactor = 1 / 40;
  static const size = 600.0;
  static final phi = (math.sqrt(5) + 1) / 2;
  static final rng = math.Random();

  final int seeds;

  const SunflowerWidget(this.seeds, {super.key});

  @override
  Widget build(BuildContext context) {
    final seedWidgets = <Widget>[];

    for (var i = 0; i < seeds; i++) {
      final theta = i * tau / phi;
      final r = math.sqrt(i) * scaleFactor;

      seedWidgets.add(AnimatedAlign(
        key: ValueKey(i),
        duration: Duration(milliseconds: rng.nextInt(500) + 250),
        curve: Curves.easeInOut,
        alignment: Alignment(r * math.cos(theta), -1 * r * math.sin(theta)),
        child: const Dot(true),
      ));
    }

    for (var j = seeds; j < maxSeeds; j++) {
      final x = math.cos(tau * j / (maxSeeds - 1)) * 0.9;
      final y = math.sin(tau * j / (maxSeeds - 1)) * 0.9;

      seedWidgets.add(AnimatedAlign(
        key: ValueKey(j),
        duration: Duration(milliseconds: rng.nextInt(500) + 250),
        curve: Curves.easeInOut,
        alignment: Alignment(x, y),
        child: const Dot(false),
      ));
    }

    return FittedBox(
      fit: BoxFit.contain,
      child: SizedBox(
        height: size,
        width: size,
        child: Stack(children: seedWidgets),
      ),
    );
  }
}

class Dot extends StatelessWidget {
  static const size = 5.0;
  static const radius = 3.0;

  final bool lit;

  const Dot(this.lit, {super.key});

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: lit ? Colors.orange : Colors.grey.shade700,
        borderRadius: BorderRadius.circular(radius),
      ),
      child: const SizedBox(
        height: size,
        width: size,
      ),
    );
  }
}
```

### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>
Chrome:

![Untitled](https://github.com/user-attachments/assets/7cdcc7ba-49a9-4b30-8d3a-284b526e0dfc)

Safari:
![Untitled2](https://github.com/user-attachments/assets/ecde93b5-fca1-49aa-a261-e13594b32fbe)


</details>



### Logs

<details open><summary>Logs</summary>

```console
══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to decode image using the browser's ImageDecoder API.
Image source: encoded image bytes
Original browser error: InvalidStateError: Failed to retrieve track metadata.

When the exception was thrown, this was the stack

Image provider:
  NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
  scale: 1.0)
Image key:
  NetworkImage("https://raw.githubusercontent.com/link-u/avif-sample-images/refs/heads/master/kimono.avif",
  scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 15.1.1 24B91 darwin-arm64, locale en-PL)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 16.1)
    ! iOS 18.1 Simulator not installed; this may be necessary for iOS and macOS development.
      To download and install the platform, open Xcode, select Xcode > Settings > Platforms,
      and click the GET button for the required platform.

      For more information, please visit:
        https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.96.0)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 1 category.
```

</details>