Flutter web cannot render high resolution images which are resolution aware

[kenNg1]

Flutter web cannot render high resolution images which are resolution aware. I am using Flutter to build web/mobile apps in one codebase for large clients at our consultancy so it's important that this issue gets fixed so that we can build a high-quality website.

Linked issues and other people facing issues:
#41328 - root cause identified
flutter/engine#17209 - hasn't fixed the issue
https://stackoverflow.com/questions/67716900/flutter-web-pictures-get-pixelated - stack overflow others facing issue (viewed 700+ times)

Root cause:
devicePixelRatio in web is always 1 which means only the lowest resolution image will be rendered.

My app and code:

Note: you need to right click the above image and open in new tab to see pixelation issue (as the image is very small on Github). If i hardcode the path to a 2x or 3x image, the image looks crisp so it's definitely a problem.

  assets:
    - assets/images/
    - assets/images/2.0x/
    - assets/images/3.0x/

Widget build(BuildContext context) {
    final MediaQueryData queryData = MediaQuery.of(context);
    double devicePixelRatio = queryData.devicePixelRatio;
    print(devicePixelRatio);  // Console prints devicePixelRatio on Web as 1

    return ...
                    Image(
                      width: 412.w,
                      fit: BoxFit.fitWidth,
                      image: const AssetImage(
                        "assets/images/splash-doctors.png",
                      ),
                    ),
                ...

[OutdatedGuy]

Yo @kenNg1, I just have one doubt.

Can you check if the same happens on Firefox browser as well.

Build the demo app for Web > Host it somewhere like on Netlify > Try it on Firefox.

Please also share the hosted demo's link.

[kenNg1]

first up - firefox also has the same problem.

we will host onto netlify shortly - thanks

[exaby73]

Hi @kenNg1, please provide a minimal, reproducible example and the output of flutter doctor -v.

[kenNg1]

1x image

2x image

3x image

Setup images like this:

main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Image(
              width: 800,
              fit: BoxFit.cover,
              image: AssetImage("assets/images/splash-doctors.png"),
            )
          ],
        ),
      ),
    );
  }
}

[kenNg1]

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-x64, locale en-HK)
    • Flutter version 3.0.5 at /Users/keng/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (4 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/keng/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /Users/keng/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.4)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 69.0.4
    • Dart plugin version 221.6008.17

[✓] VS Code (version 1.70.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[exaby73]

I can reproduce this issue on stable and master. The image indeed is pixelated. Not sure if it's coming clear in the screenshot I shared, but if you zoom in a bit, you can see the pixels.

Screenshot

flutter doctor -v (Stable)

[✓] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.22000.832], locale en-IN)
    • Flutter version 3.0.5 at C:\Users\Nabeel Parkar\fvm\versions\stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (4 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\android-sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32630.192
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[✓] VS Code (version 1.70.0)
    • VS Code at C:\Users\Nabeel Parkar\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.832]
    • Chrome (web)      • chrome  • web-javascript • unknown
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 90.0.818.66

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

flutter doctor -v (Master)

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2166, on Microsoft Windows [Version 10.0.22000.832], locale en-IN)
    • Flutter version 3.1.0-0.0.pre.2166 on channel master at C:\Users\Nabeel Parkar\fvm\versions\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 87f1684476 (3 hours ago), 2022-08-08 23:00:11 -0700
    • Engine revision b6dd604d90
    • Dart version 2.19.0 (build 2.19.0-76.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\android-sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32630.192
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[✓] VS Code (version 1.70.0)
    • VS Code at C:\Users\Nabeel Parkar\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[✓] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22000.832]
    • Chrome (web)                 • chrome        • web-javascript • unknown
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 90.0.818.66

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!