Mobile phone loading optimization-2x, 3x diagram

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.