Small images have low quality

[getpoucher]

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:

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.

[bes89]

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: "..."),
)

[getpoucher]

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.

[bes89]

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

[getpoucher]

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:

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

[ykkd]

I faced the same issue but this solved it.

[randaomar]

#60 (comment)
This answer worked perfectly with me!! Thank you !