[Interest] QML Image size vs sourceSize strange things

[Nuno Santos]

I had the same problem with blurry images on retina displays. I ended up creating a image component that inside was by default setting source size for twice the width and height of the item size to have good results on iOS screens.

However......

I have recently found that replacing the pngs for svgs has accelerated the UI loading time from seconds to a snap!!! 

I have found this because I was not finding acceptable the time it took to resize a window.

I had to replace years of pngs into svgs but in the end it payed off.

You should definitely consider moving to svgs.

Best,

--
Nuno Santos

> No dia 27/03/2021, às 03:17, Alexander Dyagilev <alervdvcw at gmail.com> escreveu:
> 
> 
> This all is not about my question in any matter. I do not care about SVG at all. And SVG are not used in this example.
> 
> Please learn to read question before answering....
> 
> On 3/23/2021 4:16 PM, Jérôme Godbout wrote:
>> Do you really need to same memory by reducing the source size? I think you should left the source size alone and sample the image from the full source. Source size for SVG doesn’t make any sense, it’s vectoriel, doesn’t have any size, it can scale to any dimension. When playing with the image size (not the source) it will sample the source for each pixel, not sure about the algorithm but you might need an higher source resolution to get a proper image without artifact. I would at least take the Screen.devicePixelRatio into the source size into account and even add a x2 to ensure proper sampling, but I don’t see any real advantage to play with the source size unless you really are consuming way too much memory.
>> 
>> This might slow you down if the same image is using different sourceSize:
>> 
>> Note: Changing this property dynamically causes the image source to be reloaded, potentially even from the network, if it is not in the disk cache.
>> 
>> 
>>> On Mar 23, 2021, at 3:31 AM, Alexander Dyagilev <alervdvcw at gmail.com> wrote:
>>> 
>>> Hello,
>>> 
>>> We had a strange problem with blurred images under Retina displays. Left part of the image - before, right one - after the fix.
>>> 
>>> <pjcgokflkeakcklh.png>
>>> 
>>> Our QML code was using with to show images:
>>> 
>>> Image {
>>>         anchors.verticalCenter: parent.verticalCenter
>>>         sourceSize.width: 25
>>>         sourceSize.height: 25
>>>         source: preview.url
>>>     }
>>> 
>>> I've tried to multiply sourceSize by Screen.devicePixelRatio - images became bigger so they did not fit their places. 
>>> 
>>> Then I've replaced sourceSize.width with just width and the same for height. And it works fine now. 
>>> 
>>> My questions is:
>>> 
>>> 1) Is it required to multiply sourceSize by devicePixelRatio? Or is it managed automatically? It seems that it is managed automatically for PNG and NOT managed for SVG. 
>>> 
>>> 2) If it is already managed automatically for PNG (these images preview.url are PNGs) then why was it blurred? The original PNG image is of size 64x64 pixels under Retina displays.
>>> 
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> https://lists.qt-project.org/listinfo/interest
>> 
>> Jerome Godbout
>> Software/Firmare Lead Amotus
>> 
>> C: (581) 777-0050 
>> O: (418) 800-1073 ext.: 114   
>> godboutj at amotus.ca
>> 
>> <image007.png>
>> 
>> 
>> dimonoff.com   |    amotus.ca
>>  
>> We have moved!
>> 1015 Avenue Wilfrid-Pelletier, Québec, QC G1W 0C4, 4e étage
>> 
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> https://lists.qt-project.org/listinfo/interest
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20210327/7e395b19/attachment.html>