Specifying cacheWidth / cacheHeight can degrade the image quality #56239

Activity

1. nioncode

   changed the title [-]`cacheWidth` / `cacheHeight` degrading image quality[/-] [+]cacheWidth / cacheHeight degrade image quality[/+] on May 3, 2020
2. iskakaushik

   added

   a: imagesLoading, displaying, rendering imagesLoading, displaying, rendering images

   engineflutter/engine related. See also e: labels.flutter/engine related. See also e: labels.

   on May 3, 2020
3. iskakaushik

   changed the title [-]cacheWidth / cacheHeight degrade image quality[/-] [+]Specifying cacheWidth / cacheHeight can degrade the image quality[/+] on May 3, 2020
4. davidmartos96 commented on May 8, 2020

   

   davidmartos96

   on May 8, 2020

   Last edited by davidmartos96

   Contributor

   More actions

   I'd like to share a sample with a more detailed image as I think is much more noticeable than the provided one.

   Source image from Unsplash

   I have also tried multiplying the cache dimension by the devicePixelRatio and it looks much better, but I don't know if that is really the issue.
   Here is the comparison (Flutter 1.17.0)

   Without devicePixelRatio

     @override
     Widget build(BuildContext context) {
       final url =
           "https://images.unsplash.com/photo-1550613097-fe6c2c321cd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1351&q=80";
       return Scaffold(
         appBar: AppBar(),
         body: SingleChildScrollView(
             child: Column(
           children: <Widget>[
             Image.network(
               url,
               width: 300,
               fit: BoxFit.cover,
             ),
             Image.network(
               url,
               width: 300,
               fit: BoxFit.cover,
               cacheWidth: 300,
             )
           ],
         )),
       );
     }

   

   With devicePixelRatio

     @override
     Widget build(BuildContext context) {
       final url =
           "https://images.unsplash.com/photo-1550613097-fe6c2c321cd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1351&q=80";
       
       final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
       return Scaffold(
         appBar: AppBar(),
         body: SingleChildScrollView(
             child: Column(
           children: <Widget>[
             Image.network(
               url,
               width: 300,
               fit: BoxFit.cover,
             ),
             Image.network(
               url,
               width: 300,
               fit: BoxFit.cover,
               cacheWidth: (300 * devicePixelRatio).round(),
             )
           ],
         )),
       );
     }

   

   👍React with 👍23Reacted by Nicolas Schneider, jarmywang, r-kishimoto, Riza Nafis, chaochaox1990, TrungJamin, Marcin Pawłowski, Linspirit98, Albert Mañosa, ykiran and 13 more

   🎉React with 🎉2Reacted by Rz Tutul and Rodolphe Lemasquerier

   ❤️React with ❤️7Reacted by Linspirit98, Albert Mañosa, Duc Thang, ykiran, Prateek Jain, Anatoliy Siryi and Aggelos
5. pedromassangocode commented on Dec 8, 2020

   

   pedromassangocode

   on Dec 8, 2020

   More actions

   Reproducible on latest stable channel.

   

   Code

   import 'package:flutter/material.dart';
   
   void main() => runApp(MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final url =
           "https://images.unsplash.com/photo-1550613097-fe6c2c321cd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1351&q=80";
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(),
           body: SingleChildScrollView(
               child: Column(
                 children: <Widget>[
                   Image.network(
                     url,
                     width: 300,
                     fit: BoxFit.cover,
                   ),
                   Image.network(
                     url,
                     width: 300,
                     fit: BoxFit.cover,
                     cacheWidth: 300,
                   )
                 ],
               )),
         ),
       );
     }
   }

   flutter doctor -v

   [✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
       • Flutter version 1.22.4 at /Users/pedromassango/dev/SDKs/flutter_stable
       • Framework revision 1aafb3a8b9 (4 weeks ago), 2020-11-13 09:59:28 -0800
       • Engine revision 2c956a31c0
       • Dart version 2.10.4
   
   [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
       • Android SDK at /Users/pedromassango/Library/Android/sdk
       • Platform android-30, build-tools 30.0.2
       • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
       • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
       • All Android licenses accepted.
   
   [✓] Xcode - develop for iOS and macOS (Xcode 12.1)
       • Xcode at /Applications/Xcode.app/Contents/Developer
       • Xcode 12.1, Build version 12A7403
       • CocoaPods version 1.9.3
   
   [!] Android Studio (version 4.1)
       • Android Studio at /Applications/Android Studio.app/Contents
       ✗ Flutter plugin not installed; this adds Flutter specific functionality.
       ✗ Dart plugin not installed; this adds Dart specific functionality.
       • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
   
   [✓] IntelliJ IDEA Community Edition (version 2020.2.4)
       • IntelliJ at /Applications/IntelliJ IDEA CE.app
       • Flutter plugin installed
       • Dart plugin version 202.8070
   
   [✓] VS Code (version 1.51.1)
       • VS Code at /Applications/Visual Studio Code.app/Contents
       • Flutter extension version 3.16.0
   
   [✓] Connected device (1 available)
       • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
   
   ! Doctor found issues in 1 category.
   Process finished with exit code 0
   
6. pedromassangocode

   added

   a: qualityA truly polished experienceA truly polished experience

   found in release: 1.22Found to occur in 1.22Found to occur in 1.22

   has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work on

   on Dec 8, 2020
7. kf6gpe

   added

   P2Important issues not at the top of the work listImportant issues not at the top of the work list

   on Dec 10, 2020
8. sensuikan1973

   added 2 commits that reference this issue on Feb 7, 2021

   off cacheHeight of Image.asset. See: flutter/flutter#56239

   64b1172

   Board UI, first (#21)

   ...

   90a0087
9. RossHS

   added a commit that references this issue on Jan 3, 2022

   Оптимизировал виджет аватара. Теперь можно использовать его без объек…

   ...

   f2ca975
10. lucascardo12 commented on May 13, 2022

    

    lucascardo12

    on May 13, 2022

    More actions

    I have the same problem on some phones the quality is perfect but on some phones it is pixelated
11. maRci002 commented on Feb 9, 2023

    

    maRci002

    on Feb 9, 2023

    Contributor

    More actions

    Flutter's (3.7.2) current documentation for Image:

    The Image.asset, Image.network, Image.file, and Image.memory constructors allow a custom decode size to be specified through cacheWidth and cacheHeight parameters. The engine will decode the image to the specified size, which is primarily intended to reduce the memory usage of ImageCache.

    Flutter documentation should be updated since Image.width / Image.height uses logical pixels while Image.cacheWidth / Image.cacheHeight uses physical pixels.

    See @davidmartos96 #56239 (comment) example.

    👍React with 👍1Reacted by ameen-hbox
12. 8 remaining items

    Load more

13. maRci002 commented on Jun 28, 2023

    

    maRci002

    on Jun 28, 2023

    Last edited by maRci002

    Contributor

    More actions

    final widgetWidth = (constraint.maxWidth * devicePixelRatio).round();

    This solution can be dangerous because if the widget changes its size, for instance, if the user resizes the window, you would ask the image provider to decode the image every frame and cache it.

    I think the best solution is generate multiple resolutions of the image, then you choose the best image:

    abstract class SizeInterface {
      Size get size;
    }
    
    class AppImage implements SizeInterface {
      final String url;
      final int width;
      final int height;
    
      @override
      Size get size => Size(width.toDouble(), height.toDouble());
    }
    
    static T? findClosestByAxis<T extends SizeInterface>({
      required List<T> items,
      required Axis axis,
      required double targetSize,
    }) {
      T? bestItem;
      var bestDelta = double.infinity;
    
      for (final item in items) {
        final size = axis == Axis.horizontal ? item.size.width : item.size.height;
        final delta = (size - targetSize).abs();
    
        if (delta < bestDelta) {
          bestItem = item;
          bestDelta = delta;
        }
      }
    
      return bestItem;
    }

    Then call it

    final widgetWidth = (constraint.maxWidth * devicePixelRatio).round();
    
    final landscapeImage = findClosestByAxis(
      items: landscapeImages,
      axis: Axis.horizontal,
      targetSize: widgetWidth,
    );
    
    // use `landscapeImage` without any memCacheWidth / memCacheHeight
14. ranulfo commented on Jun 28, 2023

    

    ranulfo

    on Jun 28, 2023

    More actions

    landscapeImages

    this time it was not very clear to me. how can i set the initial values ​​for landscapeImages?, i did it like this:

    final landscapeImageW = findClosestByAxis(
            items: [AppImage(width: imageWidth, height: imageHeight)],
            axis: Axis.horizontal,
            targetSize: widgetWidth,
          );
    

    and it didn't work
15. maRci002 commented on Jun 28, 2023

    

    maRci002

    on Jun 28, 2023

    Last edited by maRci002

    Contributor

    More actions

    this time it was not very clear to me. how can i set the initial values ​​for landscapeImages?

    Example code

    YouTube API is very similar

    import 'dart:convert';
    
    import 'package:equatable/equatable.dart';
    import 'package:flutter/painting.dart';
    
    void main() {
      const myCar = CarModel(
        name: 'Hyundai',
        image: ImageGroupModel(
          images: [
            ImageModel(url: 'https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=568', width: 652, height: 936),
            ImageModel(url: 'https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480', width: 480, height: 791),
            ImageModel(url: 'https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320', width: 320, height: 527),
          ],
        ),
      );
    
      final myCarJson = json.encode(myCar.toMap());
      print(myCarJson);
    
      final myCarFromJson = CarModel.fromMap(json.decode(myCarJson) as Map<String, dynamic>);
      print('Equals: ${myCar == myCarFromJson}');
    
      const screenWidthList = <double>[100, 360, 500, 500, 1080];
    
      for (final screenWidth in screenWidthList) {
        final bestImage = SizeProximityUtil.findClosestByAxis(items: myCarFromJson.image.images, axis: Axis.horizontal, targetSize: screenWidth);
        print('screenWidth: $screenWidth, bestImage: $bestImage');
      }
    }
    
    abstract class SizeInterface {
      Size get size;
    }
    
    class SizeProximityUtil {
      const SizeProximityUtil._();
    
      static T? findClosestByAxis<T extends SizeInterface>({
        required List<T> items,
        required Axis axis,
        required double targetSize,
      }) {
        T? bestItem;
        var bestDelta = double.infinity;
    
        for (final item in items) {
          final size = axis == Axis.horizontal ? item.size.width : item.size.height;
          final delta = (size - targetSize).abs();
    
          if (delta < bestDelta) {
            bestItem = item;
            bestDelta = delta;
          }
        }
    
        return bestItem;
      }
    }
    
    class CarModel extends Equatable {
      const CarModel({
        required this.name,
        required this.image,
      });
    
      factory CarModel.fromMap(Map<String, dynamic> map) {
        final image = map['image'] as Map<String, dynamic>;
    
        return CarModel(
          name: map['name'] as String,
          image: ImageGroupModel.fromMap(image),
        );
      }
    
      final String name;
      final ImageGroupModel image;
    
      Map<String, dynamic> toMap() {
        return {
          'name': name,
          'image': image.toMap(),
        };
      }
    
      @override
      List<Object> get props => [name, image];
    }
    
    class ImageGroupModel extends Equatable {
      const ImageGroupModel({required this.images});
    
      factory ImageGroupModel.fromMap(Map<String, dynamic> map) {
        final images = map['images'] as List<dynamic>;
    
        return ImageGroupModel(
          images: images.map((e) => ImageModel.fromMap(e as Map<String, dynamic>)).toList(),
        );
      }
    
      final List<ImageModel> images;
    
      Map<String, dynamic> toMap() {
        return {
          'images': images.map((e) => e.toMap()).toList(),
        };
      }
    
      @override
      List<Object> get props => [images];
    }
    
    class ImageModel extends Equatable implements SizeInterface {
      const ImageModel({
        required this.url,
        required this.width,
        required this.height,
      });
    
      factory ImageModel.fromMap(Map<String, dynamic> map) {
        return ImageModel(
          url: map['url'] as String,
          width: map['width'] as int,
          height: map['height'] as int,
        );
      }
    
      final String url;
      final int width;
      final int height;
    
      @override
      Size get size => Size(width.toDouble(), height.toDouble());
    
      @override
      List<Object> get props => [url, width, height];
    
      Map<String, dynamic> toMap() {
        return {
          'url': url,
          'width': width,
          'height': height,
        };
      }
    }
    

    Output:

    {"name":"Hyundai","image":{"images":[{"url":"https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=568","width":652,"height":936},{"url":"https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480","width":480,"height":791},{"url":"https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320","width":320,"height":527}]}}
    Equals: true
    screenWidth: 100, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320, 320, 527)
    screenWidth: 360, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320, 320, 527)
    screenWidth: 500, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480, 480, 791)
    screenWidth: 500, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480, 480, 791)
    screenWidth: 1080, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=568, 652, 936)
    
16. ranulfo commented on Jun 28, 2023

    

    ranulfo

    on Jun 28, 2023

    More actions

    this time it was not very clear to me. how can i set the initial values ​​for landscapeImages?

    Example code
    Output:

    {"name":"Hyundai","image":{"images":[{"url":"https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=568","width":652,"height":936},{"url":"https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480","width":480,"height":791},{"url":"https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320","width":320,"height":527}]}}
    Equals: true
    screenWidth: 100, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320, 320, 527)
    screenWidth: 360, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=320, 320, 527)
    screenWidth: 500, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480, 480, 791)
    screenWidth: 500, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=480, 480, 791)
    screenWidth: 1080, bestImage: ImageModel(https://images.unsplash.com/photo-1662010021854-e67c538ea7a9?w=568, 652, 936)
    

    thank you for everything. this solution will be more work because I will have to resize and record new images on the server side. while the distortion generated that i mentioned in the previous comment, do you have any suggestion how to solve it?
17. maRci002 commented on Jun 29, 2023

    

    maRci002

    on Jun 29, 2023

    Last edited by maRci002

    Contributor

    More actions

    the distortion generated that i mentioned in the previous comment, do you have any suggestion how to solve it?

    Maybe by finding the closest image and not resizing it (for example, not passing memCacheWidth), you can solve your issue. Perhaps passing imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet to CachedNetworkImage will also solve the problem.

    distortion maybe caused by #122541

    👍React with 👍1Reacted by ranulfo
18. flutter-triage-bot

    added

    team-engineOwned by Engine teamOwned by Engine team

    triaged-engineTriaged by Engine teamTriaged by Engine team

    on Jul 8, 2023
19. Xim-ya commented on Nov 14, 2023

    

    Xim-ya

    on Nov 14, 2023

    More actions

    I have referenced this issue and organized related content for a blog post titled "Save Your Memory Usage By Optimizing Network Image in Flutter."

    The post includes concepts of resizing images and methods for dynamically setting cache values based on the image layout.

    For anyone who is interested, please take a look.

    👍React with 👍2Reacted by Sudeep Shetty and Bram Musters
20. ebwood commented on Jan 8, 2024

    

    ebwood

    on Jan 8, 2024

    Last edited by ebwood

    More actions

    @Xim-ya Does any solution to solve the problem like issue #52802?
    Says the original image size is 1000*1500, image widget size is 100 * 100,

    Image.network(
        'imageUrl',
        width: 100,
        height: 100,
    	fit: BoxFit.cover,
        cacheWidth: 100 * MediaQuery.of(context).devicePixelRatio.round(),
    );
    

    the resize image size will be 100 * 150, debugInvertOversizedImages will complain about oversize.
    add `cacheWidth: 100 * MediaQuery.of(context).devicePixelRatio.round()' will distort image.

    Is there any solution to crop image from 100*150 to 100 * 100 in memory to avoid the oversize complain?
21. AndreiMisiukevich commented on May 13, 2025

    

    AndreiMisiukevich

    on May 13, 2025

    More actions

    devicePixelRatio works incorrectly on mac retina
    it returns 2, and image looks degraded
22. gaganyadav80 commented on Aug 20, 2025

    

    gaganyadav80

    on Aug 20, 2025

    Last edited by gaganyadav80

    Contributor

    More actions

    If anyone facing issue where providing both cacheHeight and cacheWidth does not respect boxFit, then you can fix it using the below code:

    Image(
      image: ResizeImage(
        imageProvider,
        height: context.cacheSize(height),
        width: context.cacheSize(width),
        policy: ResizeImagePolicy.fit, // <-- use this
      ),
      fit: BoxFit.cover,
    );

    👍React with 👍1Reacted by Chien
23. auto-submit

    closed this as completedin #184549on Aug 19, 2026
24. robert-ancell

    added a commit that references this issue on Aug 19, 2026

    Add useLogicalPixels to ResizeImage for logical pixel cache sizing (f…

    ...

    9f2f8a4
25. github-actions commented on Sep 2, 2026

    

    github-actionsBot

    on Sep 2, 2026 – with GitHub Actions

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
26. github-actions

    locked as resolved and limited conversation to collaborators on Sep 2, 2026