[web] `web_image_mode: center` reduce the image size by 4x

[iapicca]

Describe the bug

web_image_mode: center reduce the image size by 4x; I noticed in the web paragraph that such scaling is mentioned, but it's not clear how select the desired one

Configuration

flutter_native_splash

flutter_native_splash:
  color: "#42a5f5"
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  web_image_mode: center
  android: false
  ios: false
  web: true
  image_web: assets/splash_image.png

Devices:

• Chrome Version 128.0.6613.120
• Whichever Safari version runs on iPhone 16 Plus Simulator

To Reproduce

1. flutter create --platform web flutter_native_splash_web_issue
2. mkdir assets and paste an image of a circle with size 400x400 named splash_image.png
3. replace the content of pubspec.yaml with the one in under Additional context
4. add a flutter_native_splash.yaml provided under Configuration
5. replace the content of main.dart with the code sample below
6. run dart run flutter_native_splash:create and run the app
7. observe that the size of the asset in rendered by flutter is different from the same asset in the splash screen
8. amend the image size as below, than repeat step 6. final size = await splashImage.size / 4;
9. observe splash and rendered image are identical

code sample

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';

const splashImage = AssetImage('assets/splash_image.png');

extension SizeOfX on AssetImage {
  Future<Size> get size async {
    final data = await rootBundle.load(assetName);
    final codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    final frameInfo = await codec.getNextFrame();
    return Size(
      frameInfo.image.width.toDouble(),
      frameInfo.image.height.toDouble(),
    );
  }
}

void main() async {
  final widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  final size = await splashImage.size;
  print(size);
  runApp(
    MaterialApp(
      home: Center(
        child: Image(
          image: splashImage,
          width: size.width,
          height: size.height,
        ),
      ),
    ),
  );
  FlutterNativeSplash.remove();
}

Screenshots

Screenshots

Additional context

pubspec

name: flutter_native_splash_web_issue
description: "A new Flutter project."
publish_to: 'none' 
version: 1.0.0+1

environment:
sdk: ^3.5.4

dependencies:
flutter:
  sdk: flutter
flutter_native_splash: ^2.4.2

dev_dependencies:
flutter_test:
  sdk: flutter
flutter_lints: ^4.0.0

flutter:
uses-material-design: true
assets:
  - assets/

doctor

[✓] Flutter (Channel stable, 3.24.4, on macOS 15.0.1 24A348 darwin-arm64, locale en-US)
  • Flutter version 3.24.4 on channel stable at /Users/francesco/fvm/versions/stable
  • Upstream repository https://github.com/flutter/flutter.git
  • Framework revision 603104015d (3 days ago), 2024-10-24 08:01:25 -0700
  • Engine revision db49896cf2
  • Dart version 3.5.4
  • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
  • Android SDK at /Users/francesco/Library/Android/sdk
  • Platform android-35, build-tools 34.0.0
  • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
  • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
  • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
  • Xcode at /Applications/Xcode.app/Contents/Developer
  • Build 16A242d
  • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2022.3)
  • 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 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.94.2)
  • VS Code at /Applications/Visual Studio Code.app/Contents
  • Flutter extension version 3.98.0

[✓] Connected device (3 available)
  • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.0.1 24A348 darwin-arm64
  • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.0.1 24A348 darwin-arm64
  • Chrome (web)                    • chrome                • web-javascript • Google Chrome 128.0.6613.120

[✓] Network resources
  • All expected network resources are available.

• No issues found!

[jonbhanson]

web_image_mode: center reduce the image size by 4x; I noticed in the web paragraph that such scaling is mentioned, but it's not clear how select the desired one

It is not possible to choose the scaling of the image. Instead, the browser is responsible for choosing the appropriate image based on the pixel density of the device the browser is running on. Safari Mobile is choosing the image that it determines will render best.

[iapicca]

web_image_mode: center reduce the image size by 4x; I noticed in the web paragraph that such scaling is mentioned, but it's not clear how select the desired one

It is not possible to choose the scaling of the image. Instead, the browser is responsible for choosing the appropriate image based on the pixel density of the device the browser is running on. Safari Mobile is choosing the image that it determines will render best.

I understand this is outside of the "technical" scope of the plugin, but I feel that is very well in the "usage" of the plugin

use case

an image used as splash screen that is replaced by the same image with same size and position as widget when the the splash screen "withdraws" that can be animated, faded and such

question

what information and how can I collect them and provide to the widget-image to be identical to the image in the splash screen?

thank you