Images being Compressed?

Hi,
I'm developing an app that loads images from web to my local storage and then displays the images, and i've come across a curious issue. I'm using Colintree's AsyncImageLoader to load the images as it keep my app operating at a good speed when I scroll through the images.

Files over a certain megapixel count seem to be compressing. To test this I've created a stand-alone app that has two buttons, a horizontal arrangement and an image placeholder:

The code for each button is:


The image WA.png is a 750x750 pixel png of about 79kb size.
The image AUS.png is a 750x645 pixel png of about 90kb size.

The AUS image loads fine and fills the screen and is readable.

However, the WA.png image only partially fills the screen and is unreadable. If I set the image to fill parent, the WA.png file scales-up, but its really grainy.

Now, I chopped the bottom of the WA.png file off so it was only 750x645 pixels. This version loads fine and is perfectly clear (except for part of the image being chopped off).

What is going on? Is it the aspect ratio? Is it the pixel count? Something with AsyncImageLoader?

Further to this, please see attached aia that demonstrates the issue. It turns out that it doesn't appear to be a problem with ASyncImageLoader. The problem also occurs using the standard set.picture routine.

These are two screen grabs the first here is a grab that I have loaded a 750x750 png. If you look closely, particularly the thin lines - they become jagged to the point that they appear dashed.

This next image is the 750x645 png. Same type of image, created exactly the same way, just a different total pixel dimension and aspect ratio. The lines are well formed and the shape edges are smooth.

Here is the .aia to see if does the same for you on your phones:

imagetest.aia (131.5 KB)

Sort of solved. The issue comes with setting the screen sizing to "Responsive". If I revert the sizing to "Fixed", the system does not compress the image and it appears as it should.

image

Not sure how it's going to affect the final outcome of my app, but it will do for now.

This is all to do with ScreenSizing ( - responsive design, as you have found), actual image size/dimensions, Image Sizing, Component Sizing (pixels vs percentage etc.)

Fixed sizing may introduce other problems on different devices.

A good read:

http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html

Thanks. It's a bit frustrating.

I'm yet to fully understand how it may affect the app appearance on other devices. In any case, my plan was to design the app layout through code to try and make the appearance work across multiple screens. I'm somehow thinking i'll end up having issues, but will deal with them when I get to it.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.