[Interest] What image format and size should I use in my QML app?

Gianluca gmaxera at gmail.com
Sun Sep 25 23:33:00 CEST 2016


> Il giorno 25 set 2016, alle ore 22:24, Артур Истомин <art.istom at yandex.ru> ha scritto:
> 
> On Sun, Sep 25, 2016 at 09:54:59PM +0100, Gianluca wrote:
>> I use SVG format.
>> No matter what resolution and pixel density, they always look great because they can be resized at any scale without any loss.
>> They are a bit slower than other formats, but with the power of the average device user won’t notice it.
>> On the other hand you save a lot of space for your app.
> 
> I'm thinking in the same direction. But there are several sizes: 18dp, 24dp, 36dp and 48dp. So what should I use to cover
> as many devices as possible?

You don’t have to think about that. That’s the wonderful aspect of SVG.
Because they are a vectorial representation … they are essentially mathematical curves and the image is generated directly at runtime on the device.
In fact, SVG are dimensionless. It doesn’t exists an SVG of 600x600 pixel … or 6x6 cm … or whatever because doesn’t make sense in the SVG format.

You just need to use sourceSize property of Image to scale it properly to the correct size of your device.
For example in my code, if I want to display an image of 2x2 cm, I calculate at runtime a constant representing the number of pixel into 1 millimeter (reading the physical screen information) and then I do the following:

Image {
   source: "my.svg"
   width: 20*mm
   height: 20*mm
   sourceSize.width: 2*20*mm
   sourceSize.height: 2*20*mm
   smooth: true
}

In that case Qt will generate (and cache) and image of 4x4 cm from the SVG format and it will display at 2x2 cm size using Image.
In my experience, I found that you get better quality results if you set the sourceSize to double of the size on which you need to display the image.


> 
>> 
>> Ciao,
>> Gianluca.
>> 
>> 
>>> Il giorno 25 set 2016, alle ore 21:21, Артур Истомин <art.istom at yandex.ru> ha scritto:
>>> 
>>> I want to use images for icons from google's icons set. 
>>> For example https://design.google.com/icons/#ic_search
>>> 
>>> So I have options: 18dp, 24dp, 36dp, 48dp PNGs or SVGs. Moreover
>>> if I choose PNG format, there are 5 different images for different
>>> screens: hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi.
>>> 
>>> My software targets Android and Windows (desktop) devices with different
>>> screens and resolution and will have Material and Universal UI respectively. 
>>> The app is writen with Qt Quick.
>>> 
>>> What should I use? 
>>> 
>>> Thank you!
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>> 
>> 
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest




More information about the Interest mailing list