Images getting pixelated


#1

Hi all, on using resize trigger my images are getting pixelated. Any suggestion how to avoid this?


#2

Hello Ishan

I guess it depends of the original image size/quality and also what kind of resize you’re doing, making it bigger, smaller ?

Feel free to share a sample.


#3

Hi alex,

The original image quality is excellent as they all are licensed images from getty (same reason for not sharing sample). In my transition i am starting from a smaller size and then making it bigger to give a growing effect.


#4

I just tested your scenario by importing a high res image in a page and binding the Y coordinate of an ellipse to the height of the image. As I move up and down the ellipse, the image becomes smaller and larger.
Looks like that if you make the high res image small and then you are progressively expanding it, you’ll experience pixelation during the expansion. Only when you stop the expansion for a fraction of a second, Intuiface catches up and refreshes the image, putting it back into high res.
I’m not sure if there is a simple workaround, other than possibly expanding the image in stages


#5

Thanx tosolini. Looks like i found a way. When we use visibility trigger just change the effect to zoom out and it gives a similar transition without pixelation. Not sure it will work in every case but, in mine it worked. I appreciate your effort. Thank you so much.


#6

Just some information about what’s behind the scenes here :slight_smile:
IntuiFace embeds an engine which optimizes the image sizes when large files are loaded to be displayed in a small area. A smaller version of the image is created and loaded in memory, to reduce the memory consumption.
Ex: loading a 16 megapixels image (= 4614 x 3464 pixels) is completely useless if displayed in a grid of 400 x 300 pixels.
When this image is in a Free container, meaning a user can resize it and make it bigger, IntuiFace replaces on the fly the “small” image with a “bigger one”, depending on the new size of the Image asset, up to the original file quality. This replacement is indeed made when the manipulation has been done, to avoid lag while the user is touching it.
Using a trigger/action to make an image bigger will override this mechanism and the large image will be loaded before doing the size increase animation.


#7

Hey seb,
Thanks for this explanation. I got most of it, but didn’t quite understand that loading bigger image before animation will always lead to pixelation ? and so we have no solution for this and it will always happen ?


#8

@ishan.dubey, you might want to start a discussion with our support team to explain your use case and see what solution they can propose you.


#9

Okay…thanx…:grinning: