Mobile phone loading optimization-2x, 3x diagram

People often say that the current flow is not valuable, the bigger the better!

I want to say that, although the browser is not valuable, but the speed is slightly faster!

Article from: UI sister son

Icon_alipay.png→iphone 1-3-generation phone (no longer considered)

[email PROTECTED]→IPHONE4/4S/5/5S/6/6S/7 corresponds to size, which is what we usually call twice times the figure

[Email protected]→iphone6p/6sp/7p uses the size, which is 3 times times the graph

commented by:

A, exactly which resources need to cut graphs, which do not need to cut graph?

① as long as the code can not be implemented and expressed, you need to cut the diagram

② if it is not clear whether you want to cut diagrams, more and develop communication, he will tell you what you need to cut pictures

B, how many sets of cut diagram need to cut? (I only use iOS as standard, Android next time)

① Theoretically, we need to cut 3 sets of graphs for a better fit.

② in practical work, iOS only need to cut 2 sets of graphs, respectively: @2x and @3x

<img src= "https://pic2.zhimg.com/50/v2-7d300d81b4ef950928b6d32690df6fb8_hd.jpg" data-caption= "" Data-size= "Normal" data-rawwidth= "232" data-rawheight= "381" class= "Content_image" width= "232" >

C, how to name the diagram, do not name what to do?

Before I wrote a special article on the interface transduction naming conventions, please poke in:

UI designer must know interface transduction naming specification (upgraded version)

Note: Transduction is a few points to note:

① output format must be png24 bit, Png8 bit, JPG 3 format

② the size of the graph should be consistent within the same module

③ output size must remain an even number

④ in order to reduce the size of the package, all transduction as much as possible to compress after the development (the smaller the package, the happier your boss, said it will give you more points year-end award ha)

More detailed specifications You can click to view the iOS interface design specification, thank you

D. Implementation (Solution available):

[Email protected] (load different styles)

2. Using the plugin: http://imulus.github.io/retinajs/

Mobile phone loading optimization-2x, 3x diagram