วิธีจัดการขนาดภาพในความละเอียด iPhone ทั้งหมดที่มี


99

ขนาดใดที่จะใช้กับรูปภาพได้ดีที่สุด: background.png, background@2x.png และ background@3x.png หากเราต้องการใช้รูปภาพนี้เพื่อครอบคลุมความกว้างเต็มและความสูงครึ่งหนึ่งของหน้าจอสำหรับความละเอียดทั้งหมดสำหรับ แอพแนว iPhone?

นี่คือสิ่งที่เรามีในตอนนี้:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

ความละเอียด iPhone

บางคนบอกว่าสำหรับภาพ edge to edge (เช่นแบนเนอร์ที่ด้านล่างจากขอบซ้ายไปขวาของหน้าจอ) สำหรับ iPhone 6 Plus พวกเขาจะเตรียม back@3x.png ที่มีความกว้าง 1242 และสำหรับ iPhone 6 back@2x.png ด้วย กว้าง 750 เพื่อให้เข้ากับขนาดหน้าจอ iPhone 6 แต่ฉันไม่คิดว่านี่เป็นความคิดที่ดีเพราะ 1242/3 = 414 และ 750/2 = 375 ดังนั้นการตั้งชื่อเป็น @ 2x และ @ 3x จึงไม่สมเหตุสมผล แล้ว back.png - 375 หรือ 414 ควรมีความกว้างเท่าไหร่?

ชื่อกราฟิกใช้คำต่อท้าย @ 2x และ @ 3x ดังนั้นหากตัวอย่างเช่น image@3x.png มีความละเอียด 30x30 การคิดเชิงตรรกะ image@2x.png ควรมีความละเอียด 20x20 และ image.png ควรเป็น 10x10 ซึ่งหมายความว่าหากเราต้องการให้ภาพเต็มความกว้างคมชัดสำหรับแต่ละหน้าจอเราควรสร้าง back@3x.png ด้วย width 414 3 = 1242px, back@2x.png ด้วย width 414 2 = 828px และ back.png ที่มีความกว้าง 414px . อย่างไรก็ตามนี่หมายความว่าใน iPhone ทุกเครื่องยกเว้น iPhone 6 Plus คุณจะต้องตั้งค่า uiimages เพื่อใช้เช่นโหมดเนื้อหาที่พอดีกับภาพและพวกเขาจะถูกลดขนาดลงดังนั้นนี่จึงไม่ใช่วิธีแก้ปัญหาโดยเฉพาะและอาจทำให้แอปพลิเคชันช้าลงอย่างแท้จริงหาก เราใช้อุปกรณ์รุ่นเก่าจำนวนมาก

แล้วคุณคิดว่าอะไรเป็นทางออกที่ดีที่สุดในการแก้ปัญหานี้


1
หน้าจอ iPhone 6 ลิงก์ Demystified: bit.ly/1qHEBKkลิงก์ Ultimate Guide to iPhone Resolutions: bit.ly/1paVXLd
King-Wizard

iPhone 6 Plus 414 x 736 คะแนน 1242 x 2208 พิกเซลขนาด 3x 1080 x 1920 พิกเซลทางกายภาพ 401 ppi ทางกายภาพ 5.5 "iPhone 6 375 x 667 จุด 750 x 1334 พิกเซลขนาด 2x 750 x 1334 พิกเซลทางกายภาพ 326 ppi ทางกายภาพ 4.7" iPhone 5 320 x 568 จุด 640 x 1136 พิกเซลขนาด 2x 640 x 1136 พิกเซลทางกายภาพ 326 กายภาพ ppi 4.0 "
King-Wizard

iPhone 4 320 x 480 จุด 640 x 960 พิกเซลขนาด 2x 640 x 960 พิกเซลทางกายภาพ 326 ppi ทางกายภาพ 3.5 "iPhone 3GS 320 x 480 จุด 320 x 480 พิกเซล 1x ขนาด 320 x 480 พิกเซลทางกายภาพ 163 ppi ทางกายภาพ 3.5"
King-Wizard

คำตอบ:


49

คุณไม่จำเป็นต้องมีแต่ละภาพในสเกลทั้งหมดหากไม่ได้ใช้ สร้างเฉพาะขนาดที่คุณต้องการและตั้งชื่อตามความกว้าง สำหรับภาพแนวตั้งเต็มอุปกรณ์คุณต้องกว้าง 320px ที่ 1x และ 2x, กว้าง 375px ที่ 2x และ 414px กว้างที่ 3x

4 "อุปกรณ์ที่ใช้" -568h "ต่อท้ายสำหรับการตั้งชื่อภาพเปิดตัวดังนั้นฉันขอแนะนำรูปแบบการตั้งชื่อที่คล้ายกัน:

  • ImageName-320w (@ 1x & @ 2x)
  • ImageName-375w (@ 2x)
  • ImageName-414w (@ 3x)

จากนั้นหาภาพที่คุณต้องการในรันไทม์:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

สิ่งนี้อาจแตกหักหากมีการเพิ่มความกว้างอื่น ๆ ในอนาคต แต่จนถึงขณะนี้ Apple จำเป็นต้องสร้างแอปใหม่เสมอเพื่อรองรับการแสดงผลใหม่ดังนั้นฉันคิดว่ามันค่อนข้างปลอดภัยที่จะคิดว่าพวกเขาจะทำเช่นนั้น


นั่นเป็นหนึ่งในเหตุผลที่ Apple ไม่แนะนำรุ่น 32 GB ของ iPhone รุ่นใหม่รุ่น 16 GB เป็นอุปกรณ์ทดสอบและ 64 สำหรับการใช้งานขนาดแอปพลิเคชันจะเพิ่มขึ้นอย่างมากเนื่องจากกราฟิก
Ilker Baltaci

1
@IlkerBaltaci ฉันเข้าใจว่าพวกเขาปล่อยให้นักพัฒนาซื้อเวอร์ชัน 16 GB เท่านั้น แต่ด้วยวิธีนี้จะมีหลายคนที่ไม่สามารถอัปเกรดระบบปฏิบัติการของตนได้เนื่องจากไม่มีพื้นที่ว่างบนดิสก์
Filip Radelic

นั่นเป็นความจริงแม้จะมี 32 GB ฉันต้องรอหนึ่งสัปดาห์เพื่อทำความสะอาดและเพิ่มพื้นที่ 5 GB สำหรับ IOS 8
Ilker Baltaci

2
จะใช้สิ่งเหล่านี้ใน IB ได้อย่างไร?
Khawar

@FilipRadelic แล้ว iPhone5 ล่ะ? ความกว้างคือ 640 แต่ความสูงแตกต่างจากที่ใช้สำหรับ iPhone 4
MeV

41

ฉันเองจะทำ:

ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

เหตุผลที่อยู่เบื้องหลังนี้คือมันแสดงความแตกต่างระหว่างอุปกรณ์ทั้งหมดในขณะที่ความกว้างใช้ค่าเดียวกันบน iPhone 5s และ iPhone 4

แก้ไข:

นี่เป็นเพียงหลักการตั้งชื่อที่ฉันใช้สำหรับทรัพยากรที่ขึ้นอยู่กับอุปกรณ์เช่นภาพพื้นหลังที่ใช้ทั้งหน้าจอโดยส่วนใหญ่แล้วสิ่งที่คุณต้องการคือ:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / โหมดซูม


1
แล้ว "โหมดซูม" ใน iPhone 6 plus ล่ะ? เราไม่จำเป็นต้องให้ ImageName-667h @ 3x ด้วยหรือ?
François Verry

@thewormsterror ฉันคิดว่ารูปแบบสุดท้ายของการตั้งชื่อภาพของคุณคือ worng
Hades

@thewormsterror คำตอบที่ดีคุณสามารถเพิ่มวิธีตั้งชื่อภาพ iPad ได้
Lukas

ถ้ารูปภาพที่มาจาก api คือ 1024 x 768 หมายความว่าขนาดสูงสุดที่ฉันสามารถใช้ได้คือ 256 @ 3x หรือไม่
Mirko

8

สำหรับการสนทนา @ 2x และ @ 3x คุณไม่จำเป็นต้องสนใจเรื่องนั้น ดูแลขนาดจุดของหน้าจอและตรวจสอบให้แน่ใจว่ามีเนื้อหา @ 2x ที่มีขนาดจุดสองเท่าและเนื้อหา @ 3x ที่มีขนาดจุดสามเท่าเป็นพิกเซล อุปกรณ์จะเลือกอุปกรณ์ที่เหมาะสมโดยอัตโนมัติ แต่อ่านโพสต์ของคุณฉันเดาว่าคุณคงรู้เรื่องนี้แล้ว

สำหรับภาพ edge-to-edge น่าเสียดายที่คุณต้องทำมันสำหรับความละเอียดหน้าจอทั้งหมด ดังนั้นสำหรับ iPhone แนวตั้งจะเป็น 320 คะแนน 375 คะแนนและ 414 คะแนนโดยที่ 414 คะแนนจะต้องเป็น @ 3x ทางออกที่ดีกว่าอาจทำให้รูปภาพของคุณปรับขนาดได้โดยการตั้งค่าการแบ่งส่วนในตัวสร้างอินเทอร์เฟซ (ถ้าคุณใช้แค็ตตาล็อกรูปภาพนั่นคือ) แต่ขึ้นอยู่กับภาพซึ่งอาจเป็นตัวเลือกหรือไม่ก็ได้ขึ้นอยู่กับว่าภาพนั้นมีส่วนที่ทำซ้ำได้หรือยืดได้ ภาพที่ปรับขนาดได้ซึ่งตั้งค่าไว้เช่นนี้มีผลกระทบต่อประสิทธิภาพน้อยมาก


1
ฉันต้องการให้พอดีกับความกว้างของหน้าจอกับรูปภาพภายใน uicollectionviewcell (เห็นได้ชัดว่าอยู่ใน uicollectionview ที่พอดีกับหน้าจอทั้งหมด) สำหรับ iphone 6 plus ฉันแก้ให้ใส่ 3x a (414x3 = 1242 px) 2x ต้องใช้ขนาดไหน มันต้องพอดีกับ iphone4s / 5 / 5s และ 6 screen ด้วย ...
jerrygdm

1
ฉันมีไอคอนขนาด 222px x 260px ซึ่งดูพอดีกับหน้าจอ iPhone5 / 5s ตอนนี้ในขณะที่ทำให้แอพเข้ากันได้กับหน้าจอ iPhone6 ​​และ 6plus 1) ไอคอนควรมีขนาดเท่าไหร่? ตามกฎสามประการควรเป็น 333px x 390px หรือไม่ 2) ฉันควรใช้การปรับขนาดอัตโนมัติให้กับภาพใน xib หรือไม่
ตอบ

@ jerrygdm ฉันมีสถานการณ์เกือบเหมือนของคุณ คุณทำอะไรในตอนท้ายของวัน? คุณช่วยแบ่งปันกับฉันได้ไหม
Tulon

@ คุณเคยใช้ไอคอน 3x สำหรับ iphone6 ​​และ iphone6Plus
JiteshW

@ Jitesh ฉันกำลังถามคำถามเดียวกัน ... ฉันควรสร้างไอคอน x3x ขนาดเท่าไหร่? อยากเพิ่ม แต่ขนาดเท่าไหร่ ... นี่คือคำถามของฉัน ..
ตอบ

2

@ 2 และ @ 3 ไม่ใช่การปรับขนาดภาพจริง แต่เป็นเพียงตัวแทนของพิกเซลจริงที่แสดงพิกเซลเสมือนหนึ่งพิกเซลบนหน้าจอ hdpi / xhdpi / xxhdpi / blabla บางประเภทจากจักรวาล Android ระบบจะแสดงเฉพาะภาพที่ควรใช้สำหรับหน้าจออุปกรณ์บางอย่าง

ดังนั้นหากคุณจำเป็นต้องใช้ภาพหน้าจอทั้งหมดให้เตรียมโดยขึ้นอยู่กับขนาดหน้าจอจริง


2

ขึ้นอยู่กับกราฟิกในบางกรณีอาจใช้งานได้ดีเมื่อเราใช้เพียงภาพเดียวเช่นแบนเนอร์ที่มีขนาดกว้าง 414 จุด x สูง 100 จุด (กว้างที่สุดเท่าที่จะเป็นไปได้และความสูงคงที่) และวางไว้ใน UIImageView ที่ตรึงไว้ ขอบด้านซ้ายและขวาของหน้าจอมีความสูงคงที่ 100 และตั้งค่าโหมดเติมภาพสำหรับ UIImageView นั้น จากนั้นบนอุปกรณ์ขนาดเล็กด้านซ้ายและขวาของภาพจะถูกตัดออกและเราจะเห็นเฉพาะส่วนตรงกลางของภาพ


2

ฉันได้สร้างหมวดหมู่สำหรับสิ่งนี้:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

คุณสามารถใช้รหัสเต็มได้ที่นี่: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5


0

ฉันคิดว่าทางออกที่ดีที่สุดสำหรับภาพแบบขอบถึงขอบหรือแบบเต็มหน้าจอคือการดูแลขนาดหน้าจอจริงเป็นพิกเซล (ไม่ใช่จุด) และคุณต้องตรวจสอบที่รันไทม์รุ่นของอุปกรณ์และเลือกภาพที่เหมาะสมเช่น:

image-iphone4-4s.png (640x960/2) for 1/2 screen height, image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height, image-iphone6-6s.png (750x1334/2) for 1/2 screen height, image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,

ไม่จำเป็นต้องมี @? x ในสถานการณ์ของผู้ถามนี้


0

ฉันคิดว่าเราควรใช้ภาพพื้นหลังขนาดต่างกันสำหรับอุปกรณ์ต่างๆ เพียงใช้ภาพขนาด @ 3x สำหรับพื้นหลัง

คุณสามารถตรวจจับอุปกรณ์ที่มีเส้นด้านล่าง

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0) 
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.