Image Size and Resolution

The coordinates system iOS uses to place content onscreen is based on measurements in points, which map to pixels in the display. On a standard-resolution screen, one point is equal to one pixel. High-resolution screens have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.

iOS가 화면에 콘텐츠를 배치하는 데 사용하는 좌표 시스템은 점의 측정 값을 기반으로하며,이 값은 화면의 픽셀에 매핑됩니다. 표준 해상도 화면에서 한 점은 한 픽셀과 같습니다. 고해상도 화면의 픽셀 밀도가 높습니다. 같은 양의 물리적 공간에 더 많은 픽셀이 있기 때문에 점 당 더 많은 픽셀이 있습니다. 결과적으로, 고해상도 디스플레이는 더 많은 픽셀을 갖는 이미지를 필요로합니다.

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. A standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that’s 100px × 100px, for example. The @2x version of this image would be 200px × 200px. The @3x version would be 300px × 300px.

앱에서 지원하는 모든 기기를 위해 모든 아트웍에 고해상도 이미지를 제공하십시오. 기기에 따라 각 이미지의 픽셀 수에 특정 배율을 곱하여이를 수행합니다. 표준 해상도 이미지의 배율은 1.0이며 @ 1x 이미지라고합니다. 고해상도 이미지의 배율은 2.0 또는 3.0이며 @ 2x 및 @ 3x 이미지라고합니다. 예를 들어 100px × 100px의 표준 해상도 @ 1x 이미지가 있다고 가정 해 보겠습니다. 이 이미지의 @ 2x 버전은 200px × 200px입니다. @ 3x 버전은 300px × 300px입니다.

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.

8 x 8 픽셀 그리드를 사용하십시오. 그리드는 선을 날카롭게 유지하고 모든 크기에서 가능한 한 콘텐츠가 선명하도록 하여 retouching 및 sharpening가 덜 필요합니다. 이미지 경계를 그리드에 스냅하여 축소할 때 발생할 수 있는 절반 픽셀과 흐릿한 세부 정보를 최소화합니다.

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.

적절한 포맷으로 아트웍를 생성하십시오. 일반적으로 bitmap/raster 아트웍를 위해 de-interlaced 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 impairments.

이미지 및 아이콘에 대한 대체 텍스트 레이블을 제공하십시오. 대체 텍스트 라벨은 화면에 표시되지 않지만, VoiceOver를 통해 화면 상의 내용을 청각적으로 설명할 수 있으므로 시각적 장애가 있는 사람이 쉽게 탐색할 수 있습니다.

Image Size and Resolution - Icons and Images - iOS - Human Interface Guidelines - Apple Developer