Image Size and Resolution
이미지 크기 및 해상도
The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.
iOS가 콘텐츠를 화면에 배치하는 데 사용하는 좌표계는 디스플레이의 픽셀에 매핑되는 포인트 단위의 측정을 기반으로 합니다. 표준 해상도 디스플레이는 1:1 픽셀 밀도(또는 @1x)이며, 여기서 한 픽셀은 한 포인트와 같습니다. 고해상도 디스플레이는 2.0 또는 3.0의 스케일 팩터(@2x 및 @3x라고 함)를 제공하여 픽셀 밀도가 높습니다. 따라서 고해상도는 요구 영상을 더 많은 픽셀로 표시합니다.
For example, suppose you have a standard resolution (@1x) image that's 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.
예를 들어 100px x 100px인 표준 해상도(@1x) 이미지가 있다고 가정합니다. 이 이미지의 @2x 버전은 200px × 200px이고 @3x 버전은 300px × 300px입니다.
Supply high-resolution images for all artwork in your app, for all devices your app supports. Depending on the device, you accomplish this by multiplying the number of pixels in each image by a specific scale factor.
앱에서 지원하는 모든 장치에 대해 앱의 모든 아트워크에 고해상도 이미지를 제공합니다. 장치에 따라 각 이미지의 픽셀 수에 특정 배율(scale factor)을 곱하여 이 작업을 수행합니다.
DeviceScale Factor
| 12.9" iPad Pro | @2x |
| 11" iPad Pro | @2x |
| 10.5" iPad Pro | @2x |
| 9.7" iPad | @2x |
| 7.9" iPad mini 4 | @2x |
| iPhone XS Max | @3x |
| iPhone XS | @3x |
| iPhone XR | @2x |
| iPhone X | @3x |
| iPhone 8 Plus | @3x |
| iPhone 8 | @2x |
| iPhone 7 Plus | @3x |
| iPhone 7 | @2x |
| iPhone 6s Plus | @3x |
| iPhone 6s | @2x |
| iPhone SE | @2x |
Designing High-Resolution Artwork
고해상도 작품을 디자인하세요
Use an 8px-by-8px grid. A grid keeps lines sharp and ensures that content is as crisp as possible at all sizes, requiring less retouching and sharpening. Snap the image boundaries to the grid to minimize half pixels and blurry details that can occur when scaling down.
가로 8px 세로 8px 그리드를 사용합니다. 그리드는 선을 선명하게 유지하고 모든 크기에서 내용물이 최대한 선명하게 유지되도록 함으로써 리터칭과 선명화가 덜 필요합니다. 이미지 경계를 그리드에 스냅하여 축소 시 발생할 수 있는 절반 픽셀과 흐릿한 세부 정보를 최소화합니다.
Produce artwork in the appropriate format. In general, use de-interlaced PNG files for bitmap/raster artwork. PNG supports transparency and, because it's lossless, compression artifacts don't blur important details or alter colors. It's a good choice for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos. Its compression algorithm usually produces smaller sizes than lossless formats and artifacts are harder to discern in photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.
적절한 형식으로 작품을 제작하세요. 일반적으로 비트맵/래스터 아트워크에는 비인터레이스된 PNG 파일을 사용합니다. PNG는 투명도를 지원하며, 압축 아티팩트는 손실이 없기 때문에 중요한 디테일을 흐리게 하거나 색상을 변경하지 않습니다. 이것은 음영, 질감, 하이라이트 같은 효과를 필요로 하는 복잡한 예술작품에 좋은 선택입니다. 사진에는 JPEG를 사용합니다. 압축 알고리즘은 일반적으로 무손실 형식보다 작은 크기를 생성하며 사진에서 아티팩트를 식별하기가 어렵습니다. 하지만 사실적인 사진 앱 아이콘은 PNG로 가장 잘 보입니다. PDF를 사용하여 글리프 및 고해상도 스케일링이 필요한 기타 플랫 벡터 아트워크를 만들 수 있습니다.
Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality. This palette is not appropriate for photos.
전체 24비트 색상이 필요하지 않은 PNG 그래픽에는 8비트 색상 팔레트를 사용합니다. 8비트 색상표를 사용하면 이미지 품질을 저하시키지 않고 파일 크기를 줄일 수 있습니다. 이 팔레트는 사진에 적합하지 않습니다.
Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.
JPEG 파일을 최적화하여 크기와 품질의 균형을 찾습니다. 대부분의 JPEG 파일은 결과 영상의 현저한 저하 없이 압축할 수 있습니다. 적은 양의 압축으로도 상당한 디스크 공간을 절약할 수 있습니다. 각 이미지에서 압축 설정을 실험하여 허용 가능한 결과를 산출하는 최적의 값을 찾습니다.
Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual disabilities.
이미지 및 아이콘에 대한 대체 텍스트 레이블을 제공합니다. 대체 텍스트 레이블은 화면에 표시되지 않지만 VoiceOver가 화면에 표시되는 내용을 청각적으로 설명할 수 있으므로 시각 장애인이 쉽게 탐색할 수 있습니다.
※ 참고 출처
Image Size and Resolution - Icons and Images - iOS - Human Interface Guidelines - Apple Developer
Image Size and Resolution The coordinate system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point
developer.apple.com
'HIG' 카테고리의 다른 글
| [iOS / HIG] Search Bars (0) | 2022.02.05 |
|---|---|
| [iOS / HIG] Navigation Bars (0) | 2022.02.05 |
| [iOS / HIG] App Icon (0) | 2022.02.05 |
| [iOS / HIG] Adaptivity and Layout (0) | 2022.02.05 |
| [iOS / HIG] Navigation (0) | 2022.02.04 |