Strange behaviour with image on Android

[huberte]

Hi,

I'm working on an educational project where teachers could plublish various documents. Thing is, those documents are often full of formulas. I need png file or better : svg (wich are not correctly displayed on various devices)

Try : http://www.sciences-physiques.eu/appli/carimage/

I use minimum 1536*xxx images for an optimal display on various phones.

On iOS, the only limits is the number of pixel : 3*1024*1024 : I did cut my images in several peaces. Images are well displayed

On Android, the stock browser shows awful images. Better on chrome, but not so good (and I know Android has good results when scaling images. I did go native with imageview on eclipse and the result was fine).
Why ? Look at those 2 screens : http://tof.canardpc.com/show/9144d04...91112f9fc.html and http://tof.canardpc.com/show/36008198-e6ef-4b02-820b-fe2ca8b8df1c.html

Thing is, I need to go on webapp for this project. (I tried to build an apk : awful images too !)

Do not hesitate to blame me if I did something wrong. What should I do to have a better rendering ?

My code is very easy. I added img { width: 100%;} in index.html (it's worse with max-width)

Main.js is

Ext.define('resimage.view.Main', {    extend: 'Ext.navigation.View',
    xtype: 'main',
    
    config: {
        tabBarPosition: 'bottom',


        items: [
        {
            xtype: 'tabpanel',
               tabBar: {
                    docked: 'bottom',
                    ui: 'light'
                },
            items: [
                    {
                        
                        title: 'Image',
                        iconCls: 'home',
                        html: '<div><img src=./resources/images/1.png /><img src=./resources/images/2.png /></div>',
                        scrollable: 'vertical'
                    },


                    {                       
                        title: 'Carimage',
                        iconCls: 'more',   
                         layout: {
                                    type: 'card'
                                },  


                        items: [
                        {
                            xtype:'carousel',
                            
                   


                            
                            items: [
                                {xtype: 'container', 
                                    scrollable : {
                                        direction     : 'vertical',
                                        directionLock : true
                                    },
                                    items:[
                                        { xtype: 'image',  
                                        html: '<img src=./resources/images/1.png />'}
                                    ]                            
                                },
                                {xtype: 'container', 
                                    scrollable : {
                                        direction     : 'vertical',
                                        directionLock : true
                                    },
                                    items:[
                                        { xtype: 'image',  
                                        html: '<img src=./resources/images/2.png />'}
                                    ]                            
                                },
                                {xtype: 'container', 
                                layout: {
                                    type: 'vbox'
                                },  
                                    scrollable : {
                                        direction     : 'vertical',
                                        directionLock : true
                                    },
                                    items:[
                                        { xtype: 'image',  
                                        html: '<div><img src=./resources/images/1.png /><img src=./resources/images/2.png /></div>'}
                                    ]                            
                                }                            
                                
                            ]
                        }
                        ]
                    }






            ]
        }
        ]
    }
});

[mitchellsimoens]

for mobile devices, you should be using small images, if an image is a few hundred KB you may want to look at optimizing the image as perf will suffer.

[huberte]

mitchellsimoens , please look at http://www.sciences-physiques.eu/appli/oneimage/

It's one and only one image, size ie only 102 Ko, looking awful on Android, not on iOS

In my previous example (carimage), you had 3 images in a carousel (220 Ko, 78 Ko, 398 Ko). Each of them are looking awful ! So even with small images, I have a very bad result on Android

EDIT : switched to svg