Las tecnologías modernas han alcanzado alturas sin precedentes. Al mismo tiempo, están en constante desarrollo y mejora. Por lo tanto, las matrices modernas se distinguen por la más alta calidad de imagen, que no estaba disponible hace 5 a 10 años. Un excelente ejemplo de los avances modernos en la tecnología de pantallas son las pantallas Retina. Tienen una alta densidad de píxeles, gracias a la cual una persona ve una imagen impecable. Pero, a pesar de que estas tecnologías ya se han convertido en parte de la vida cotidiana de la gente moderna, muchos se preguntan: pantalla Retina LCD, ¿qué es?

1. ¿Qué es la matriz de Retina?

Por primera vez, Apple utilizó el concepto "Retina" en la presentación de un nuevo teléfono inteligente llamado iPhone 4. Un verdadero genio en el mundo de la tecnología moderna, Steve Jobs, prestó mucha atención a la nueva tecnología matricial en la presentación de su nueva creación. Sin embargo, muchos se hacen una pregunta completamente lógica: ¿no es "Retina" una estrategia de marketing común? ¿Se trata realmente de un nuevo descubrimiento del que el fabricante de productos Apple puede estar orgulloso?

Respondiendo a la pregunta de qué es una pantalla LCD Retina, en primer lugar vale la pena señalar que la propia palabra "Retina" traducida del inglés significa "retina". La tecnología recibió este nombre por una razón. El hecho es que hoy en día el nombre pantalla Retina se utiliza en descripciones generales de matrices de cristal líquido convencionales, que tienen una mayor densidad de píxeles por pulgada cuadrada y se utilizan en los dispositivos Apple.

En otras palabras, respondiendo a la pregunta de qué es una pantalla Retina LCD, podemos decir con total confianza que se trata de pantallas LCD normales fabricadas con tecnología IPS, con una alta densidad de píxeles de 220 ppp y superiores. También existe un nombre no oficial para esta tecnología: Super Fine TFT (SFT). Hoy en día, se utilizan matrices similares en todos los teléfonos inteligentes, tabletas, MacBooks y otros productos modernos de Apple.

Vale la pena señalar que debido a la alta densidad de píxeles, los puntos en la pantalla no se pueden ver a simple vista, lo que lleva al hecho de que la imagen se acerca lo más posible a las imágenes de las páginas de revistas de moda en términos de Calidad y percepción.

1.1. Dispositivo de matriz de retina

No tiene sentido hablar durante mucho tiempo sobre cómo están diseñadas las pantallas Retina, porque, como ya sabes, se trata de una matriz IPS normal. La única diferencia es la mayor densidad de píxeles. En consecuencia, el diseño de dichas matrices es absolutamente idéntico al del dispositivo IPS. Podemos decir que la pantalla Retina es una especie de subtipo de matriz IPS.

De particular interés es el hecho de que un grupo de científicos que trabajan en Apple logró separar píxeles y subpíxeles, lo que permitió reducir significativamente la distancia entre ellos. Ésta es la característica principal de esta tecnología.

1.2. Beneficios de las pantallas Retina

Ya conoces la pantalla Retina y qué es, ahora podemos comentar sus ventajas. Estas pantallas tienen una serie de ventajas innegables, entre las que merece especial atención la calidad de la imagen. Esta tecnología para construir matrices puede reducir significativamente la distancia entre píxeles. Gracias a esto, la imagen en la pantalla Retina tiene un aspecto tal que el ojo humano simplemente no puede distinguir la cuadrícula ni los puntos. La imagen parece lo más realista posible.

Teniendo en cuenta que Retina en realidad se basa en una matriz IPS, no es sorprendente que hoy en día estas pantallas tengan los mejores ángulos de visión. Al mismo tiempo, la velocidad de recuperación no es inferior a la de otras matrices modernas. Además, las ventajas incluyen un alto nivel de contraste, que es de 900:1. Debe entenderse que solo algunos tipos de las mejores pantallas, como Super Amoled y los últimos tipos de matrices IPS, una de las cuales es Retina, pudieron alcanzar tales indicadores.

Las matrices Retina modernas no solo tienen una alta resolución, que supera el Full HD (1920x1080). Además, se distinguen por una excelente reproducción cromática, lo que hace que la imagen sea lo más realista posible. Los desarrolladores lograron acercarse lo más posible a la creación de una pantalla que los órganos visuales humanos perciben de manera óptima. Esto significa que la imagen mostrada por tales matrices es percibida de manera más fácil y agradable por los ojos.

Otra ventaja importante de esta tecnología de pantalla es que tiene un efecto antideslumbrante. El hecho es que la matriz utiliza un filtro especial que no permite que la pantalla se desvanezca ni se desvanezca incluso bajo la luz solar directa.

1.3. Desventajas de una pantalla Retina

No hay nada perfecto en el mundo. Como cualquier otra tecnología, las matrices Retina también tienen sus desventajas. La función de ajuste automático del brillo, disponible en cualquier dispositivo moderno, no siempre funciona a la perfección. En algunos casos tendrás que configurar el nivel de brillo manualmente. Sin embargo, este es un problema común con la pantalla, el sistema operativo del dispositivo y también con los sensores de luz.

Otra desventaja es que estas pantallas tienen un consumo de energía bastante alto, que incluso supera a la matriz Amoled. Sin embargo, para compensar esta deficiencia, el fabricante equipa los dispositivos Apple con baterías más grandes y potentes.

2. Pantallas retina en tablets

¿Qué es una pantalla Retina en tablets? Como regla general, antes de comprar una tableta, los compradores leen su descripción. Uno de los parámetros importantes al que debes prestar atención es la pantalla. Muy a menudo, cuando las personas ven la palabra "Retina", no entienden de qué estamos hablando. Ya sabes lo que significa una pantalla Retina LCD, por lo que no deberías tener dificultades a la hora de comprar una Tablet PC. Una pantalla Retina en una tableta significa que el dispositivo tiene una mayor densidad de píxeles y una pantalla de alta resolución.

Vale la pena señalar que los científicos lograron aumentar aún más la resolución de la pantalla de la tableta. Ahora es superior a la resolución Full HD, que es de 1920x1080 píxeles. Por ejemplo, iPad4 tiene un tamaño de pantalla de 2048x1536 píxeles. La densidad de píxeles es de 264 ppp (264 píxeles por pulgada cuadrada). Por supuesto, esto conduce a un mayor consumo de electricidad. Pero al mismo tiempo, esta resolución significa una calidad de imagen aún mayor.

3. Review del iPad mini con pantalla Retina: Vídeo

Por supuesto, hoy en día esta ya no es la resolución más alta, ya que las empresas más grandes compiten constantemente entre sí, lanzando dispositivos más modernos con parámetros más altos. Entonces, Google respondió al iPad4 lanzando el Nexus, que tiene una resolución de 2560x1600. Por supuesto, esta no es una pantalla retina, aunque en términos de parámetros no es inferior a ella.

4. Pantallas retina en monitores

Esta tecnología se utiliza no sólo en la fabricación de pantallas para dispositivos móviles. Esta pantalla también se utiliza en los nuevos modelos de portátiles. El primer modelo fue un dispositivo de Apple llamado MacBook Pro. Utiliza una pantalla de 15 pulgadas con una resolución de 2880x1800 píxeles. Por supuesto, la densidad de píxeles en este tipo de pantallas es de 220 ppp.

Gracias a esto, los usuarios tienen la oportunidad de procesar imágenes en formato Full HD sin reducir la escala de la imagen.

Las matrices de retina son una palabra nueva en la tecnología moderna que abre un nuevo nivel de calidad de imagen. Con la llegada de esta tecnología, los dispositivos móviles como tabletas, teléfonos inteligentes, computadoras portátiles, etc., se han acercado un paso más a las computadoras de escritorio con monitores de alta calidad.

Con el reciente lanzamiento del Retina MacBook Pro y el nuevo iPad, las pantallas con mayor densidad de píxeles han comenzado a entrar activamente en nuestras vidas. ¿Qué significa esto para los desarrolladores web?

Primero, comprendamos la terminología.

Píxeles físicos

Píxeles físicos(píxel del dispositivo o píxel físico): los píxeles a los que estamos acostumbrados: los elementos más pequeños de cualquier pantalla, cada uno de los cuales tiene su propio color y brillo.

Densidad de la pantalla La densidad de la pantalla es la cantidad de píxeles físicos en la pantalla. Normalmente se mide en píxeles por pulgada (PPI: píxeles por pulgada). Apple, que ha desarrollado pantallas Retina con doble densidad de píxeles, afirma que el ojo humano no es capaz de distinguir una densidad mayor.

Píxeles CSS

Píxeles CSS(píxeles CSS): un valor abstracto utilizado por los navegadores para mostrar con precisión el contenido de las páginas, independientemente de la pantalla (DIP: píxeles independientes del dispositivo). Ejemplo:

La relación entre los píxeles físicos y CSS se puede establecer así:
relación-píxeles-dispositivo, -o-relación-píxeles-dispositivo, -relación-píxeles-dispositivo-moz, -relación-píxeles-dispositivo-Webkit (…)

O así:
relación de píxeles del dispositivo, -o-min-relación de píxeles del dispositivo, min--moz-relación de píxeles del dispositivo, -Webkit-min-relación de píxeles del dispositivo (…)

En Javascript puedes lograr esto usando
ventana.dispositivoPixelRatio

Píxeles rasterizados

Además de la resolución rasterizada, las imágenes en Internet tienen dimensiones abstractas en píxeles CSS. El navegador comprime o estira la imagen según su ancho y largo CSS. Cuando se muestra en una pantalla normal, un píxel rasterizado corresponde a un píxel CSS. En las pantallas Retina, cada píxel rasterizado se multiplica por 4 veces:

Mejoramiento

Escalado HTML y CSS

Y esto en Retina:

Hay varias formas de implementar el escalado HTML y CSS:

HTML

Dónde utilizar: en sitios de una sola página con pocas imágenes.

JavaScript

Dónde utilizar: en sitios con múltiples imágenes en el contenido.

CSS (SCSS)

Puedes utilizar pseudoelementos:antes o:después
.contenedor de imagen: antes (imagen de fondo: URL ( [correo electrónico protegido]); tamaño de fondo: 200px 300px; contenido:""; bloqueo de pantalla; altura: 300 píxeles; ancho: 200px; )

La técnica también funciona cuando se usan sprites:
.icono (imagen de fondo: URL ( [correo electrónico protegido]); tamaño de fondo: 200px 300px; altura: 25 píxeles; ancho: 25 píxeles; &.trash (posición-fondo: 25px 0;) &.edit (posición-fondo: 25px 25px;))

Dónde utilizar: en sitios con un número limitado de imágenes de fondo (por ejemplo, una como sprite).

Escalado de HTML y CSS: ventajas

• Facilidad de implementación
• Compatibilidad entre navegadores

Escalado de HTML y CSS: desventajas

• Los dispositivos con pantallas normales descargarán megabytes adicionales
• En pantallas normales, la claridad de la imagen puede verse afectada debido a los algoritmos de compresión.
• La opción de tamaño de fondo no es compatible con IE 7 y 8.

Determinar la densidad de píxeles de la pantalla

CSS

Dónde utilizar: en sitios o aplicaciones que utilizan imágenes de fondo para elementos de diseño. No apto para imágenes dentro del contenido.

pros

• Compatibilidad entre navegadores

Desventajas

• Es agotador implementarlo, especialmente en sitios grandes.
• Usar una imagen de contenido como fondo es semánticamente incorrecto

JavaScript

Existe un complemento especial de Javascript, Retina.js, que puede hacer todo lo descrito anteriormente, pero con funciones adicionales, como omitir imágenes externas y omitir copias internas, pero no de retina.

Dónde utilizar: en cualquier sitio con imágenes en el contenido.

pros

• Facilidad de implementación
• Los dispositivos no descargan imágenes innecesarias
• Controlar la densidad de píxeles en un sitio web

Desventajas

• Los dispositivos Retina descargan ambas versiones de cada imagen
• La manipulación de imágenes se nota en los dispositivos retina
• No funciona en algunos navegadores populares (IE y Firefox)

Gráficas vectoriales escalables

En este ejemplo, una imagen SVG simple se puede escalar como se desee:

Lo mismo sucederá usando CSS:
/* Usando una imagen de fondo */ .image ( imagen-fondo: url(ejemplo.svg); tamaño-fondo: 200px 300px; altura: 200px; ancho: 300px; ) /* Usando contenido:url() */ .image - contenedor:antes (contenido: url(ejemplo.svg); /* el ancho y el alto no funcionan con contenido:url() */ )

La compatibilidad con IE 7 u 8 y Android 2.x requerirá el uso de imágenes PNG de reemplazo. Esto se puede hacer fácilmente usando Modernizr:
.image (imagen de fondo: url(ejemplo.png); tamaño de fondo: 200px 300px; ) .svg ( .image (imagen de fondo: url(ejemplo.svg); ) )

Para una mejor compatibilidad entre navegadores y evitar problemas de rasterización en Firefox y Opera, debes hacer que cada imagen SVG coincida con su elemento HTML principal.

En HTML, puedes implementar algo similar usando los datos deseados en la etiqueta a:

Usando jQuery y Modernizr:
$(documento).ready(función())( if(!Modernizr.svg) ( var imágenes = $("img"); imágenes.cada(función(i) ( $(this).attr("src", $ (this).data("png-fallback")); )); ) ));

Dónde utilizar: en cualquier sitio web, adecuado para iconos, logotipos e ilustraciones vectoriales simples.

pros

• Un único conjunto de imágenes para todos los dispositivos
• Facilidad de implementación
• Escala infinita

Desventajas

• Sin suavizado preciso de píxel a píxel
• No apto para gráficos complejos debido al gran tamaño de los archivos.
• No hay soporte nativo en IE 7, 8 y versiones anteriores de Android

Fuentes de iconos

Las pantallas Retina y las pantallas Retina HD recientemente introducidas se mencionan a menudo cuando se habla de productos Apple. En este artículo intentaremos determinar las diferencias entre este tipo de pantallas y si valen el dinero que piden.

¿Qué es la pantalla Retina? ¿O qué definición es precisa para las pantallas con este nombre?

La pantalla Retina es más una estrategia de marketing que un término técnico, pero el concepto se puede definir: es una pantalla utilizada en un dispositivo informático que tiene una alta densidad de píxeles, en la que el ojo humano no puede ver los píxeles individuales. En otras palabras, se supone que una persona no podrá distinguir entre una fotografía de una pintura mostrada en una pantalla Retina y la pintura misma. Pero esto es sólo en teoría.

Retina es propiedad de Apple. Otras empresas pueden producir pantallas con las mismas características técnicas, pero no pueden llamarlas Retina. Esta es una marca registrada.

¿Qué resolución tiene la pantalla Retina?

Las resoluciones de pantalla se dan en el formato "número de píxeles" X "número de píxeles". Pero la clave para las pantallas Retina es la densidad de píxeles (el número de píxeles por pulgada). Con las mismas resoluciones de pantalla (en píxeles) pero diferentes tamaños (en pulgadas), la densidad de píxeles será diferente.

Pero, incluso en términos de densidad de píxeles, no existe un número único que califique una pantalla como Retina, ya que al determinar las pantallas Retina se tiene en cuenta la distancia de la pantalla a los ojos.

De hecho, a menudo puedes encontrar los siguientes indicadores de densidad de píxeles para varios tipos de dispositivos:

• 326ppi - teléfonos inteligentes
• 264ppi - tabletas
• 220ppi - portátiles

¿Existen pantallas con mejor rendimiento que las pantallas Retina?

Comer. Hay pantallas que tienen mayor densidad de píxeles. La propia Apple, desde el lanzamiento del iPhone 6, ofrece el uso de una pantalla Retina HD mejorada. Pero muchos dispositivos Android superan a los dispositivos Apple en este indicador, por ejemplo el LG G3: 534 píxeles por pulgada.

Pero, si recordamos nuestra definición anterior de Retina, entonces aumentar la densidad de píxeles es una tarea bastante controvertida, porque el ojo humano ya no ve la diferencia con valores de ppi tan altos. La propia Apple habló de esto. Pero el lanzamiento del iPhone 6 puede considerarse como un reconocimiento de que la diferencia todavía se puede sentir.

Diferencia entre Retina y Retina HD.

El término Retina HD se refiere únicamente a las pantallas de los nuevos smartphones de Apple. Entonces, ¿qué es superior a Retina HD sobre su predecesor?

• Resolución más alta
• Mayor contraste
• Ángulo de visión más amplio gracias a la tecnología de píxeles de doble dominio
• Además, si miras la pantalla con gafas, la imagen en la pantalla será más brillante que en los modelos anteriores.

En 2010, Apple cambió nuestra comprensión de las pantallas móviles: el iPhone 4 recibió una pantalla con tecnología Retina, única en ese momento. Seis años más tarde, el equipo de Cupertino presentó otro desarrollo completamente nuevo para pantallas: . ¿En qué se diferencian entre sí y qué deberíamos elegir nosotros, los usuarios comunes?

En contacto con

¿Qué es una pantalla Retina?

Retina es un término de marketing de Apple traducido del inglés como “retina”. Significa lo siguiente: la densidad de los puntos de píxeles en la pantalla es tan alta que el ojo humano no puede distinguir los píxeles individuales de la imagen. Además, detrás del nombre “Retina” Las características específicas no están ocultas.– por ejemplo, una determinada cantidad de píxeles o la resolución exacta de la pantalla.

El primer teléfono inteligente con pantalla Retina fue el iPhone 4. Tenía una resolución de 960 × 640 píxeles, más que suficiente para una pantalla de 3,5 pulgadas; al fin y al cabo, tenía 326 píxeles por pulgada (PPI, píxel por pulgada). .

Por cierto, de hecho, las pantallas de Apple no se desarrollaron basándose en PPI, sino en el parámetro píxel por grado (PPD, píxel por grado). Mide mejor la capacidad del ojo humano para discernir detalles a cierta distancia. Al crear este indicador, se tienen en cuenta la resolución de la pantalla y el ángulo de visión. El iPhone 4 obtuvo una puntuación PPD de 57.

Cuando se lanzó el primer MacBook Pro con pantalla Retina en 2012, tenía una resolución récord de 2.880 x 1.800 píxeles en una pantalla de 15,4 pulgadas. El indicador PPI era incluso más bajo que el del iPhone 4 (220 frente a 326), pero el PPD era mayor: 79.

Comparación visual de la resolución del iPhone 3G (pantalla normal) y del iPhone 4s (pantalla retina):

Hoy en día, casi todos los dispositivos Apple tienen pantalla Retina. Esto no le dice al consumidor absolutamente nada sobre exactamente cuántos píxeles por pulgada (o grados) recibirá; después de todo, la pantalla del Apple Watch es muy diferente del monitor del iMac. Pero eso no importa, porque "Retina" significa que no podrás ver los píxeles en la pantalla, es decir. Disfrutarás de una imagen de alta calidad bajo cualquier circunstancia. ¿Cuántas personas necesitan más?

Más detalles sobre la tecnología.

¿Qué es la pantalla True Tone?

A diferencia de términos como HD, 4K, Retina, etc., “True Tone” no tiene nada que ver con la cantidad de píxeles de la pantalla. Su área de responsabilidad es colores y contraste. La tarea principal es garantizar que el blanco ideal siga siendo siempre el blanco ideal en cualquier iluminación exterior. Y cuanto más “blanca” sea la pantalla, más contraste tendrá.

¿Has notado que la luz tiene un tinte ligeramente rojizo por la mañana y un tinte amarillento a mitad del día? ¿No? Es lógico: después de todo, nuestro cerebro "filtra" específicamente las sombras.

Las pantallas modernas reflejan bien la luz, pero nuestro cerebro no lo nota y aun así intenta filtrar lo que no está allí. Como resultado, nuestra percepción de los colores en la pantalla se ve afectada. True Tone compensa esto agregando tonos cálidos a la pantalla. El cerebro filtra felizmente la imagen y obtenemos un blanco "real", "como una hoja de papel A4".

Hablamos con más detalle sobre la tecnología True Tone.

Icono de pantalla Retina

Retina(traducido de lat.- “Retina”) es el nombre comercial genérico de las pantallas LCD y OLED utilizadas en los dispositivos Apple desde 2010. Se caracterizan por una mayor densidad de píxeles, de modo que el ojo humano no puede distinguir los píxeles individuales que componen la imagen. Y al mismo tiempo, se prohíbe el uso del nombre Retina en productos de otras marcas para pantallas con la misma o incluso mayor densidad de píxeles.

No existe un estándar establecido para la densidad de píxeles de esta tecnología: Apple determina diferentes densidades para diferentes dispositivos y de acuerdo con la distancia de visualización típica para una determinada clase de dispositivos: cuanto mayor sea la distancia típica, menor será la densidad de píxeles. indistinguible. Según una investigación de que el ojo humano no puede distinguir más de 300 ppp a una distancia de la pantalla al ojo de 10 a 12 pulgadas (aproximadamente 25 a 30 cm), el fabricante afirma que en tales pantallas la pixelación de la imagen es indistinguible. al ojo.

Las pantallas Retina, al igual que otras pantallas para dispositivos Apple, son fabricadas por Samsung, LG Display y Sharp.

Información técnica

La pantalla Retina utiliza tecnología IPS (excepto el iPod touch de cuarta generación, que utiliza esta tecnología), que proporciona un amplio ángulo de visión, u OLED (Iphone X). Vidrio gorila [ ] . A menudo, la pantalla está cubierta con una capa oleofóbica.

• Apple ha lanzado los siguientes dispositivos con pantallas Retina:

Retina en dispositivos

Las palabras de Steve Jobs: “Todo es Retina que tiene más de 300 ppp”. Así, el iPad 3/4/5(Air) utiliza una pantalla tipo Retina (264 ppp). Además, se utiliza una pantalla tipo Retina en el MacBook Pro 13 (tercera generación, 227 ppp), MacBook Pro 15 (tercera generación, 220 ppp).

Full Retina se utiliza únicamente: desde iPods hasta iPod 4/5. En iPhone, en iPhone 4/4S/5/5C/5S/6/6s/SE, 326 ppp (en todos los dispositivos), y en iPhone 6 Plus y iPhone 6s Plus, 401 ppp. Desde iPads hasta iPad mini con pantalla Retina: 324 ppp (en todos los dispositivos). El iPhone 6 Plus y el iPhone 6s Plus utilizan Retina. Con el lanzamiento del iPhone 6 y 6+, Apple anunció el uso de pantallas Retina HD con una densidad de píxeles aún mayor. Sin embargo, en la práctica, la densidad de píxeles aumentó solo en el modelo 6+ y es de 401 ppp, mientras que la densidad de píxeles del iPhone 6 se mantuvo igual: 326 ppp.

A finales de 2014 se lanzó al mercado el iMac de 27" con pantalla Retina 5k, cuya resolución es de 5120x2880 (218 ppp).