The application started to slow down very much (when using images on Buttons)

This problem started when I added a lot of png images to the interface. I tried to compress them using a special website, but it had no effect. The total volume of images is about 100 kilobytes

Are you trying to load them all at the same time?

Is that 100kB each or in total ?

100 kilobytes in total. Images are textures for buttons. I apologize for the inaccurate wording. There are about 20 such buttons with images on one of the virtual screens.

Size them to button sizes in pixels (or just over size) and convert them to webp format. You can batch convert with the free Irfan View:

webp offers the quality of png but is much lighter - specifically developed for the web and works well with App Inventor.

I need to maintain transparency.

.... have you tried my suggestion? webp supports transparency -but it is very unusual to require it for buttons. Why do you need transparency with texture images for buttons? Please explain in detail what you are doing - and how big are your buttons (pixels)?.

Screenshot_6
You can see the format of the buttons in the screenshot. The buttons are shaped like a checkbox and therefore I need transparency. I kept thinking that webp doesn't support transparency, so I made png textures. I will definitely use your method. Thanks for the help.

........you don't actually need transparency, just make the button image background match the arrangement colour. That will be the next thing to apply if necessary, thus making the image 24 bit max..

Nothing wrong with having transparency in buttons...

Here I show a button with image with transparency. The button is set inside a vertical arrangement, for demonstration purposes.

The blocks toggle the colour of the va

image

Note: you cannot set a background colour and an image to a button at the same time, one overrides the other.

Good afternoon, when converting png to webp, transparency disappears. In the preview window in ifranview, the images retained transparency, but after processing it disappears. I tried to set limits on the number of colors (set it to 32 bits), but that didn't help either. Could you give me some advice on how to set it up correctly? This is just an example of the shape of the buttons, I need to maintain transparency.

Please upload an example of your png files



Even with imagemagick I do not (yet) get a webp with transparency.

However, given the individual size of your image files, there really should be no issues, but it would make sense to resize the dimensions so that AI2 does not have to do that when displaying the images.

An imagemagick resize function:

convert beastman.png -resize 128x72^ -background none -gravity center -extent 128x72 beastman1.png

(beastman.png is 1280x720 2.64kb, the conversion returns a 128x72 1.2kb image)

beastman1

Read this:

https://ai2.appinventor.mit.edu/reference/other/usingImages.html

You can use the PNG format with transparency... but it turns out that the size of your images is disproportionate with the device resolution.

There is no need to use resolutions of »

1280x720
1024x768
920x720

... since the device resolution is much lower than that »

image

It is the AI2 conversion process for a coherent resolution that is making the project very time consuming.

Keep a folder with your original images saved and try the IrfanView Batch Conversion to reduce the size of your original files to 25% of their original size... and save the result into another folder.

In 'Options' to save PNG set this »

image

This will decrease the size of 100 files quickly. Then load these reduced files in the project... and you will see that there is no loss of quality and that the project will carry much faster, preserving the transparency of the PNG format.

:pray:

Lito

@>-->---

With this setting, a context window pops up with a transparent color selection. The file is saved, but loses transparency.

I'm sorry, I didn't immediately figure out what to click on the background of the image.

2 Likes

Unselect this option »

image

And process the Batch again...

:pray:

Lito

@>-->---

The requested 'click' is for you to define or change which color of the image will be transparent... but if you had already saved the PNG files with correct transparency, this step is unnecessary... and how it is tiring to do this with the 100 files it is better to cancel this step ... Deactivating the use of the Plugin will no longer be done this question.

Please tell us if this solves the AI2 project loading time once compiled.

:pray:

Lito

@>-->---

The app doesn't open immediately, but that's fine with me. Still, you need to keep in mind that all devices have different hardware capabilities. Thank you so much for your helpful advice, as a beginner in this field, the active community helps me a lot <3

1 Like

I hope the load time has improved over the previous experience.

Sometimes it is also necessary to optimize code and reduce the amount of redundant blocks...

You are welcome :pray:

Lito

@>-->---

1 Like