[Interest] How to render small Images decently on non retina displays with QtQuick?

[Shantanu Tushar]

On 6 March 2018 at 22:15, Xavier Bigand <flamaros.xavier at gmail.com> wrote:

> Hi,
>
> If your sample picture is relevant I can suggest you to convert it as SVG
> (vectoring it) or using distance field technique.
>

I had this question for a while now - if we can use SVGs for showing
application icons (which will then look good with any dimensions / DPI),
why is it common to use images instead? There's obviously some benefit to
images as people take pains to bundle multiple versions for different DPIs,
I wanted to know what they are. Most of the stuff I can find online is
always talking about websites and "web apps" which might not all apply to
desktop applications.

I see that Uwe has pointed out a performance issue which can happen because
of multiple renderings due to size changes. Is that it? Or are there other
reasons behind preferring PNG icons over SVG?


> 2018-03-06 17:06 GMT+01:00 Jason H <jhihn at gmx.com>:
>
>> Maybe this has something to do with with mipMapping/smooth? It looks like
>> it's not anti-aliasing?
>>
>> *Sent:* Tuesday, March 06, 2018 at 10:50 AM
>> *From:* "Nuno Santos" <nunosantos at imaginando.pt>
>> *To:* "Mitch Curtis" <mitch.curtis at qt.io>
>> *Cc:* "Qt Project MailingList" <interest at qt-project.org>
>> *Subject:* Re: [Interest] How to render small Images decently on non
>> retina displays with QtQuick?
>> Mitch,
>>
>> Thanks for your reply.
>>
>> You are right. I’m not playing all the cards…
>>
>> Original image attached (it is white over transparent so you will not see
>> it in the email body. The file is called isotope.png)
>>
>> The item who renders this is the following:
>>
>> import QtQuick 2.4
>>
>> Item {
>>     id: root
>>     implicitWidth: 100
>>     implicitHeight: 100
>>
>>     property real padding: 0
>>     property alias imageSource: icon.source
>>     property color imageColor: controller.settings.foregroundColor
>>
>>     Image {
>>         id: icon
>>         anchors.fill: parent
>>         anchors.margins: root.padding
>>         fillMode: Image.PreserveAspectFit
>>     }
>>
>>     ColorOverlay {
>>         id: overlay
>>         source: icon
>>         anchors.fill: icon
>>         color: root.imageColor
>>     }
>> }
>>
>>
>>
>>
>>
>> On 6 Mar 2018, at 15:41, Mitch Curtis <mitch.curtis at qt.io> wrote:
>>
>> Can you elaborate on “really bad”, and also share a screenshot?
>>
>> *From:* Interest [mailto:interest-bounces+mitch
>> .curtis=qt.io at qt-project.org
>> <interest-bounces+mitch.curtis=qt.io at qt-project.org>] *On Behalf Of *Nuno
>> Santos
>> *Sent:* Tuesday, 6 March 2018 4:27 PM
>> *To:* Qt Project MailingList <interest at qt-project.org>
>> *Subject:* [Interest] How to render small Images decently on non retina
>> displays with QtQuick?
>>
>> Hi,
>>
>> I have a simple question.
>>
>> *How to render small Images decently on non retina displays with QtQuick?*
>>
>> In my apps, I use images for icons and logos. They are all big enough to
>> be displayed correctly.
>>
>> However, on non Retina displays they get really bad! And on retine
>> display they appear perfectly.
>>
>> What is the rule of thumb to use QtQuick Image element on on retina
>> displays?
>>
>> Thx!
>>
>> Regards,
>>
>> Nuno
>>
>> _______________________________________________ Interest mailing list
>> Interest at qt-project.org http://lists.qt-project.org/ma
>> ilman/listinfo/interest
>>
>> _______________________________________________
>> Interest mailing list
>> Interest at qt-project.org
>> http://lists.qt-project.org/mailman/listinfo/interest
>>
>>
>
>
> --
> Xavier
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>


-- 
Shantanu Tushar    (UTC +0530)
shantanu.io
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180315/f11baba1/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 6481 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180315/f11baba1/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 37907 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180315/f11baba1/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 1888 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20180315/f11baba1/attachment-0002.png>