Image resolution
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Image resolution
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.
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Image resolution
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?
computer than anything about LiveCode.
Why not consider converting your PNG images to SVG (vector) images?
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
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
HyperActive Software | http://www.hyperactivesw.com
Re: Image resolution
When i upload my SVG image in LC it's shown as a big transparent imagerichmond62 wrote: ↑Thu Sep 29, 2022 12:19 pmThat 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?
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.
Re: Image resolution
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
Samuele.
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
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.
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
HyperActive Software | http://www.hyperactivesw.com
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Image resolution
Where's that screenshot?The size you posted in the screenshot includes the whole LC IDE, your standalone will probably be less.
Re: Image resolution
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!
Thanks!
Samuele.
Re: Image resolution
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..
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
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
HyperActive Software | http://www.hyperactivesw.com
Re: Image resolution
the SVG won't show on livecode, do you know how can it be shown?stam wrote: ↑Mon Oct 03, 2022 4:02 pmNot 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..
Samuele.
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
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
HyperActive Software | http://www.hyperactivesw.com
Re: Image resolution
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.
But as Jacque says, easiest may be to just import image as control...
S.
Re: Image resolution
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
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
Re: Image resolution
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.
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.