optimized_cached_image icon indicating copy to clipboard operation
optimized_cached_image copied to clipboard

Small images have low quality

Open getpoucher opened this issue 2 years ago • 6 comments

Hello,

I really liked this package, it improved a lot the time for image display on my app. However, I'm having an issue when the images are small. As you can see the quality is extremely low:

Screenshot_20220603-161101 Screenshot_20220603-161142

I tried using the filterQuality param for the OptimizedCacheImage widget and manually setting the width and height to be higher than its parent size, but none of these worked.

Is there a way to control the quality on those cases?

Thanks in advance.

getpoucher avatar Jun 03 '22 14:06 getpoucher

A workaround is to not set width & height on OptimizedCacheImage but put OptimizedCacheImage into a SizedBox and set the width & height there:

from:

OptimizedCacheImage(
  imageUrl: "...",
  height: 240,
  width: 320,
),

to:

SizedBox(
  height: 240,
  width: 320,
  child: OptimizedCacheImage(imageUrl: "..."),
)

bes89 avatar Jun 04 '22 16:06 bes89

It didn't work, I still have the same problem :( I did some tests and I think the issue might be that I'm using fit: BoxFit.cover: the image is resized to a smaller size without taking into consideration the BoxFit parameter. Then, when I use fit, the image scales up with low quality.

getpoucher avatar Jun 05 '22 00:06 getpoucher

I use BoxFit.cover too and it works fine. Be sure to clear the cache (or just reinstall the app).

bes89 avatar Jun 05 '22 08:06 bes89

Thanks for your answer. I did that, but I'm still facing the problem. Here's the code I'm using:

SizedBox(
  height: 100.0,
  width: 60.0,
  child: OptimizedCacheImage(
    imageUrl: 'https://www.spain.info/.content/imagenes/cabeceras-grandes/madrid/plaza-cervantes-alcala-henares-s476644078.jpg',
    placeholder: (context, url) => const Center(
      child: SizedBox(
        width: 24.0,
        height: 24.0,
        child: CircularProgressIndicator(),
      ),
    ),
    errorWidget: (context, url, error) => const Icon(Icons.error),
    fit: BoxFit.cover,
    filterQuality: FilterQuality.high,
  ),
);

Here are the results first with Image.network and then with OptimizedCachedImage:

Screenshot_20220605-202103 Screenshot_20220605-202356

And that's the original image I'm using to test:

getpoucher avatar Jun 05 '22 18:06 getpoucher

I faced the same issue but this solved it.

ykkd avatar Aug 12 '22 08:08 ykkd

https://github.com/humblerookie/optimized_cached_image/issues/60#issuecomment-1146645050 This answer worked perfectly with me!! Thank you !

randaomar avatar Mar 10 '23 12:03 randaomar