Image resolution

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Samuele
Posts: 282
Joined: Mon Oct 11, 2021 7:05 pm
Location: Italy

Image resolution

Post by Samuele » Thu Sep 29, 2022 12:17 pm

Hi, in my stack i have imported some images (png) with the "import as control" option and on livecode the image has a really good resolution and it looks great, but once i download the standalone on my mobile the resolution of the image drops drastically and it looks really bad (very "pixelated"), I tried to change the "resize quality" to "best" but it only makes it worse, how can I maintain the quality of the images also on standalones? Thanks!
Samuele.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Image resolution

Post by richmond62 » Thu Sep 29, 2022 12:19 pm

That may be something about the graphic capabilities of your mobile phone compared with your
computer than anything about LiveCode.

Why not consider converting your PNG images to SVG (vector) images?

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Thu Sep 29, 2022 5:15 pm

You may need to create an image with a higher resolution (dots per inch.) Or you can create a larger image size and scale it down in the app. For example, make the image twice as large before importing it and display it in the app at 50% scale.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Samuele
Posts: 282
Joined: Mon Oct 11, 2021 7:05 pm
Location: Italy

Re: Image resolution

Post by Samuele » Sat Oct 01, 2022 10:40 pm

richmond62 wrote:
Thu Sep 29, 2022 12:19 pm
That may be something about the graphic capabilities of your mobile phone compared with your
computer than anything about LiveCode.

Why not consider converting your PNG images to SVG (vector) images?
When i upload my SVG image in LC it's shown as a big transparent image :?
And I don't think that's the problem because my mobile is a pretty good one especially on graphics...
Last edited by Samuele on Sat Oct 01, 2022 10:44 pm, edited 1 time in total.
Samuele.

Samuele
Posts: 282
Joined: Mon Oct 11, 2021 7:05 pm
Location: Italy

Re: Image resolution

Post by Samuele » Sat Oct 01, 2022 10:43 pm

jacque wrote:
Thu Sep 29, 2022 5:15 pm
You may need to create an image with a higher resolution (dots per inch.) Or you can create a larger image size and scale it down in the app. For example, make the image twice as large before importing it and display it in the app at 50% scale.
I enlarged the image by 300% and it looks better on mobile but the problem is that now the image size is 5MB and it is a lot since i have to put a lot of them in the app :roll:
Samuele.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Sun Oct 02, 2022 5:43 pm

Do all the images require transparency? JPG is a good option if some don't require it. LC is very good about managing memory after JPGs are expanded. Even if all of them are PNG, LC can still handle it.

Did you try increasing the size by 200%? Maybe that would be enough? How many images do you have?

The size you posted in the screenshot includes the whole LC IDE, your standalone will probably be less.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Image resolution

Post by richmond62 » Sun Oct 02, 2022 5:48 pm

The size you posted in the screenshot includes the whole LC IDE, your standalone will probably be less.
Where's that screenshot?

Samuele
Posts: 282
Joined: Mon Oct 11, 2021 7:05 pm
Location: Italy

Re: Image resolution

Post by Samuele » Mon Oct 03, 2022 10:42 am

Today I tried increasing by 200% as jpg and it's a little better and the size is 1,5 MB that is not that crazy, but if anyone has other ideas, please tell!
Thanks!
Samuele.

stam
Posts: 2635
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Image resolution

Post by stam » Mon Oct 03, 2022 4:02 pm

Not sure what these images are, but if they part of the UI then it’s very likely you can convert to SVG which is small size and infinitely scalable (as it’s a vector image rather than a bitmap). Wherever possible (ie practically always) I use vector graphics for UI elements for this reason..

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Mon Oct 03, 2022 5:50 pm

Can you post a sample image so we can see what you're working with?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Samuele
Posts: 282
Joined: Mon Oct 11, 2021 7:05 pm
Location: Italy

Re: Image resolution

Post by Samuele » Mon Oct 03, 2022 9:27 pm

stam wrote:
Mon Oct 03, 2022 4:02 pm
Not sure what these images are, but if they part of the UI then it’s very likely you can convert to SVG which is small size and infinitely scalable (as it’s a vector image rather than a bitmap). Wherever possible (ie practically always) I use vector graphics for UI elements for this reason..
the SVG won't show on livecode, do you know how can it be shown?
Samuele.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Image resolution

Post by jacque » Mon Oct 03, 2022 10:40 pm

Samuele wrote:
Mon Oct 03, 2022 9:27 pm
the SVG won't show on livecode, do you know how can it be shown?
Choose "Import as control/image file..." from the File menu, choose the svg file, and LC will convert it.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 2635
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Image resolution

Post by stam » Tue Oct 04, 2022 12:40 am

There are a number of ways: as Jacque says, import control/image - or alternatively if you have the path data of an SVG you can assign it to the iconPath of an SVG; or alternatively if you have the XML of an SVG you can assign the output of drawingSvgCompile to the text of an image control. Search the liveCode lessons and the forum for more on this...
But as Jacque says, easiest may be to just import image as control...

S.

jmk_phd
Posts: 213
Joined: Sat Apr 15, 2017 8:29 pm

Re: Image resolution

Post by jmk_phd » Tue Oct 04, 2022 5:33 am

Samuele --

Stepping back to your original post, it's my understanding that you began by working with .png images -- which, being of fixed resolution, can result in ugly artifacts when scaled either up or down.

As other forum members have noted, .svg (scaled vector graphic) images are resolution-independent and so tend to display much better irrespective of the device.

Pardon me if I misunderstand, but it's not entirely clear from your subsequent posts that you have converted your .png images to .svg format. Not mentioned by anyone here -- although there are some fine discussions about this recently elsewhere in these forums -- is that a third-party app (e.g., Adobe Illustrator or the freeware Inkscape) is needed to trace and convert a .png bitmap image to .svg vector paths.

Once jacque alerted me that .svg files could be imported via "import image as control" I was able to import well over 300 .svg files into my app, at a fraction of the size of the original bitmapped (.png) images.

If I'm mistaken and you did indeed trace and convert your .png files to .svg, here's what I did: I created a substack "Images" and for each .svg imported it into a single card. Then when I need to display image x elsewhere I referred to it as "image 1 of card x of stack 'Images'".

There are other (perhaps better) ways of doing this, but this has worked for me. Because a .svg image scales to whatever (proportional) dimensions are specified for the targeted image object, it looks just fine. (However, I don't develop for mobile apps, so I can't confirm what happens in that case.)

Hope this helps a bit.

jeff k

stam
Posts: 2635
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Image resolution

Post by stam » Tue Oct 04, 2022 12:24 pm

Not to mention that for UI elements, these are often identical from layout to layout - and if that's the case you can turn them into a background group, so there's just the one instance of the graphic, saving even more space.

For example, I have a number of toolbars for example depending on whether the person accessing my apps has admin privileges or not - these are all background groups that are shown/hidden depending on context, but it it means i only need 1 instance of each.

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”