1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    43
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default Unanswered: High quality images/icons in ST2 apps

    Unanswered: High quality images/icons in ST2 apps


    Hello,

    I trying to get sharp, high quality images in my ST2 app. However, while the images appear sharp in my graphics software, when they load into my app, they appear slightly blurred.

    To create these images, I started with large images and then used Fireworks to resize them down to approximately 40x25 or 60x30 sized images. These are in the 1.5k-3k size range. I dont want images bigger than these. These look fine on my desktop but low quality on my iPhone 4S. I am just using html <img src... tags placed inside a list to display these images.

    I am trying to replicate something simple: it already appears in the iPhone Settings section, as shown below.

    Any ideas on how to get high quality images to show up in my list, while keeping the image size down? Do I have to use the ST2 img object?

    Any help is greatly apprecaited.

    Thanks.
    Mohammad


    This is what I am ending up with:

    photo 1.PNG



    This is what I am trying to replicate:

    photo 2.PNG


    Below is the list code that I'm using to display the items:

    Code:
    Ext.define('qxtapp.view.accounts.ManageAccounts', {
        extend: 'Ext.List',
        xtype: 'manageaccounts',
    
        config: {
            title: 'Accounts',
            ui: 'accounts',
            itemTpl: '{account_name}',
            data: [
                { account_name: '<img src="/qxt/qxtapp/resources/images/facebook-icon.png" >', account_type: 'facebook' },
                { account_name: '<img src="/qxt/qxtapp/resources/images/gmail-icon.png" >', account_type: 'gmail' }
            ]
        }
    });

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    322
    Vote Rating
    4
    Scorpie is on a distinguished road

      0  

    Default


    Are the explicit width and height of the images set?
    I`m from Holland!

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    43
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default


    Hey scorpie,

    Actually, I have not explicitly set the dimensions. One is 94x25 and the other is 102x45. Do I need to set this in the img tag, the div or should I use a ST2 img object with defined height and width?

    Thanks.

    Mohammad

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    2
    Vote Rating
    1
    vitconbonmat is on a distinguished road

      0  

    Default


    Look like you have a Retina screen. Increasing the image resolution to 300 pixels/inch or save your images in 80x50 and in your code set their size back to 40x25.

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    43
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default


    Great, thanks. Increasing the original dimensions by 2x seems to have fixed the problem. Thanks a lot!

Thread Participants: 2

Tags for this Thread