Image Size and Resolution
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が画面上にコンテンツを配置するために使用する座標系は、ディスプレイ内のピクセルにマップされる点の測定に基づいています。 標準解像度のスクリーンでは、1点は1ピクセルに等しくなります。 高解像度スクリーンは、より高い画素密度を有します。 同じ量の物理空間にはさらに多くのピクセルが存在するため、ポイントあたりのピクセル数が増えます。 結果として、高解像度ディスプレイはより多くのピクセルを有する画像を必要とします。
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.
8px x 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 impairments.
画像とアイコンの代替テキストラベルを提供する。 代わりのテキストラベルは画面上には表示されませんが、VoiceOverは画面上に表示されているものを音声で表現できるため、視覚障害のある人にとってナビゲーションしやすくなります。
