Actualización: Lea nuestra nueva guía definitiva sobre las resoluciones del iPhone
Hace unos días, Apple presentó el iPhone 6 Plus. El nuevo iPhone cambia sustancialmente la forma en que los gráficos se representan en la pantalla. Hemos hecho una infografía para desmitificarlo.
320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3,5″ 4,7″ 5,5″ El iPhone 6 Plus tiene una pantalla con una resolución de píxeles inferior a la de la imagen renderizada en el paso anterior.Antes de que la imagen pueda mostrarse en la pantalla, debe reducirse su tamaño (redimensionarse) a una resolución de píxeles inferior. Píxeles físicos Al principio, las coordenadas de todos los dibujos se especifican en Los puntos son unidades abstractas, sólo tienen sentido en este espacio matemático de coordenadas.En el iPhone original, los puntos se correspondían perfectamente con los píxeles reales de la pantalla, pero esto ya no es así. Puntos Los dibujos basados en puntos se convierten en píxeles. Las coordenadas de los puntos se multiplican por un factor de escala para obtener las coordenadas de los píxeles. Los factores de escala más elevados dan lugar a un mayor nivel de detalle: los factores de escala típicos son 1×, 2× y 3×. Píxeles renderizados El último paso es mostrar los píxeles calculados en la pantalla física.Cada pantalla tiene una característica de píxeles por pulgada (PPI). Este número indica cuántos píxeles caben en una pulgada y, por tanto, el tamaño de los píxeles en el mundo real. Dispositivo físico renderizar a 1× downsampling / 1,15 mostrar en el dispositivo mostrar en el dispositivo mostrar en el dispositivo (píxeles) (píxeles) (puntos) (píxeles del dispositivo) (puntos) (puntos) iPhone original iPhone 6 iPhone 6 Plus 3,5″ 4,7″ 5,5″ 163 PPI 326 PPI 401 PPI puntos. renderizar a 3× renderizar a 2× un iPhone 6 Plus downsamplea la imagen renderizada antes de mostrarla en pantalla. Píxeles físicos El contenido se define matemáticamente mediante coordenadas de puntos. Puntos El contenido se renderiza en píxeles utilizando un factor de escala. Este proceso se llama rasterización. Píxeles renderizados Los dibujos rasterizados se muestran en los dispositivos físicos. Dispositivo físico renderizar 2× downsampling / 1,15 mostrar en el dispositivo mostrar en el dispositivo mostrar en el dispositivo iPhone original iPhone 6 iPhone 6 Plus 3,5″ 4,7″ 5,5″ renderizar 3× renderizar 1× a a
Renderización de líneas
Para demostrar la diferente renderización de píxeles en varios dispositivos, comparamos cómo se renderiza una línea de 1 punto de ancho en
- Iphone original – sin pantalla retina. El factor de escala es 1.
- iPhone 5 – con pantalla Retina, el factor de escala es 2.
- iPhone 6 Plus – con pantalla Retina HD. El factor de escala es 3 y la imagen se reduce posteriormente de 2208 × 1242 píxeles renderizados a 1920 × 1080 píxeles.
La relación de reducción de escala es 1920 / 2208 = 1080 / 1242 = 20 / 23. Eso significa que cada 23 píxeles del render original tienen que ser mapeados a 20 píxeles físicos. En otras palabras, la imagen se reduce a aproximadamente el 87% de su tamaño original.
23 píxeles 20 píxeles Original iPhone 3.5″ iPhone 5 4″ iPhone 6 Plus 5.5″ HypotheticalPerfect 3× Display ???
