4 maneras para adaptar su sitio a Retina
Una nueva generación de pantallas con la funcion Retina de alta densidad de píxeles esta ahora en el mercado. Por desgracia, eso significa que las imágenes de su sitio web podría ser feo o pixeladas si no se toman medidas.
Con la introducción del iPhone 4 en 2010, Apple ya no mide sus pantallas en píxeles, pero en puntos. El factor de escala de la pantalla cambia, lo que determina la forma en un punto se refiere a un píxel. Una pantalla Retina tiene ahora una escala de dos, así que un punto es igual a dos píxeles – si usted dibuja una línea de un punto, se muestra como dos píxeles de ancho. Si usted es imaginario no está optimizado para dar cuenta de esto, el producto no va a hacer una gran impresión.
Las pantallas de escritorio estándar de la mayoría se sitúan entre 96 y 100 ppp, con los gráficos listos para la Web normalmente son de 72 ppp. Sin embargo, las pantallas Retina tienen un DPI mucho mayor (reconocido generalmente a 200 píxeles por pulgada, o más), por lo que las imágenes se verán borrosas si no se realizan ajustes. Es por lo tanto esencial para asegurar que sus imágenes de sitios web están optimizados para escalarlas adecuadamente.
Vamos a cubrir cuatro enfoques para convertir su sitio para Retina, garantizando al mismo tiempo que las imágenes lucen increíble en todos los dispositivos.
Si ha encontrado soluciones alternativas para imágenes Retina, por favor comparta sus recomendaciones con los lectores en los comentarios.
1. CSS Sprites
Un método para utilizar las imágenes Retina es utilizar Sprites CSS. Para satisfacer las pantallas de alta resolución, se necesitan dos imágenes: una imagen en alta resolución (@ 2x) Resolución normal (@ 1x) y, lo que significa duplicar el número de archivos, selectores y referencias en el CSS.
Sin embargo, si utiliza un CSS Sprite , sólo tiene que anular el enlace al archivo y utilizar sprites para todos los selectores que incluyen imagenes de alta resolución. Esta técnica reduce las solicitudes por medio de la red y la hoja de estilo, lo cual se convierte en un proceso eficiente para la creación de sitios Retina.
La solución CSS Sprite, sin embargo, es sólo para los elementos que se declaran en el CSS. Para las imágenes en su página, Imulus ha desarrollado Retina.js, un plugin muy útil que comprueba su servidor para ver si usted tiene cualquier fuente de imagen con @2x al final. Por ejemplo, si usted tiene una imagen en su página que se ve así: img src = «/ images / my_image.png, el script comprobará el servidor para ver si existe una imagen alternativa en esta ruta: / images / [email protected]. luego se reemplaza automáticamente las imágenes de la página con las variantes de alta resolución. Para usarlo, basta con colocar el archivo Retina.js en su servidor e incluir el script en su página en la parte inferior de su plantilla, antes del cierre </ body>.
Si bien a menudo puede tomar más tiempo para producir múltiples gráficos, el resultado final produce un tamaño de archivo óptimo y es un enfoque para el desarrollo.
2. Retina Images
Retina Images es una solución de servidor, que sirve para utilizar imágenes de alta resolución de forma automática y sin recursos dobles que generan una carga adicional. Se basa en PHP, un. Htaccess modificado, cookies habilitadas y JavaScript. Una vez instalado en su página web, todo lo que tienes que hacer es crear una versión de alta resolución de cada imagen que desea optimizar para Retina. Si usted tiene el alto y el ancho de los atributos especificados, por lo cual no tenga que cambiar los atributos en <img>. Si una imagen de @2x no está disponible, o si JavaScript, CSS y cookies están desactivadas, se vuelve a la imagen normal.
La principal ventaja de este enfoque es la vista, sólo se descarga una imagen, y todas las imágenes de trama estándar (.png, .jpg, .gif y .bmp) puede servir de alta resolución. Si utilizas WordPress, hay un plugin disponible para hacer la instalación más fácil.
3. Scalable Vector Graphics (SVG)
Otro enfoque es utilizar SVGs, que como su nombre indica, son escalables. A pesar de que han estado por años, los SVGs se pasan por alto. Sin embargo este formato es una verdadera herramienta de ayuda al utilizarlos para asegurar su compatibilidad con Retina. No importa el tamaño que se amplíen, porque son vectores (con líneas y formas, en lugar de píxeles), la imagen siempre se verá nítida. Debido a sus habilidades de escala infinitas y la independencia de resolución, en realidad son considerados como «la prueba del futuro».
SVG no es apropiado para todos los tipos de imagen (no es práctico para las fotografías), pero es ideal para los iconos, texturas, logotipos, gráficos, mapas, navegación y repetición de fondos. Hay varias maneras de utilizar SVG, como <embed>, <object>, <iframe>, y el uso de la etiqueta <img>. Un método particular es el uso «en línea» de SVG (un estándar HTML5 emergentes), que le da un mayor control sobre su aspecto (ya que están sujetos a los selectores CSS), que le permite controlar los elementos individuales utilizando SVG especial CSS. Para ello basta con tomar el código XML del SVG e insertarlo en el documento HTML, lo que también se reduzcan las solicitudes HTTP adicionales.
Este método SVG en particular tiene sus desventajas, sin embargo, uno de los cuales es el abultamiento. Para combatir esto, utilizar un optimizador de SVG o una herramienta de SVG NodeJS basado.
Al utilizar SVGs, conciencia de la ayuda navegador es esencial. Utilizando una herramienta como Modernizr significa que usted puede probar la detección de características y proporcionar una opción de reserva, tales como PNG. Esto hará cambiar todo. «Svg» en la página con. «Png», para los navegadores más antiguos, como Internet Explorer 8 o menos. Usted puede tomar el enfoque SVG incluso más allá y crear un sprite de SVG, el cual contiene todos los gráficos y ayuda a reducir el número de peticiones HTTP.
Al utilizar SVGs, ayuda conciencia navegador es esencial. Utilizando una herramienta como Modernizr significa que usted puede probar la detección de características y proporcionar una opción alternativa, tal como PNG. Esto hará cambiar todo. «Svg» en la página con. «Png», para los navegadores más antiguos, como Internet Explorer 8 o menos. Usted puede tomar el enfoque SVG incluso más allá y crear un sprite de SVG, el cual contiene todos los gráficos y ayuda a reducir el número de peticiones HTTP.
SVG no es necesariamente la mejor solución para todas las situaciones, sin embargo, su pequeño tamaño y la independencia de la resolución significa que sean candidatos viables al adaptar su sitio para pantallas de Retina.
4. Icono Fonts
Un enfoque consiste en utilizar Icon Fonts, que son fácilmente escalables, editableso y de facil mantenimiento. En lugar de utilizar los archivos de imagen de los iconos, cree un archivo de fuentes de iconos vectoriales.
Un icono fuente será un tamaño de archivo mucho más pequeño que una imagen. Además, el icono vuelve al instante una vez que la fuente se ha cargado, sin necesidad de esperar en una imagen para descargarlo. También hay una sola solicitud HTTP para cualquier conjunto tamaño de los iconos, que significa menos uso de ancho de banda. Una vez incrustado utilizando «@font-face» en el CSS, se escala a cualquier tamaño y aún permanecen nítidas y claras, y pueden ser de estilo y animados usando CSS. También puede aplicar efectos de texto, como sombras, estados de rollover y colores. La compatibilidad con los navegadores es excelente; Icon Fonts son compatibles con todos los navegadores modernos e incluso navegadores antiguos, como IE6.
Para crear un icono de fuente necesitará una aplicación de creación fuente dedicado como glyphs, o un servicio en línea como Shifticons. Una vez que su fuente personalizada se ha creado, expórtelo como SVG y hacer referencia a ella en su CSS, crear su marcado y luego crear las propiedades de los iconos (como el color, el tamaño y el relleno).Si no desea crear su propio icono de fuente, hay un montón de fuentes disponibles para utilizar, incluyendo el impresionantemente popular Font, Fontello, Entypo y Pictos Server. Incluso hay servicios de código abierto gratuito que le permite alojar sus fuentes de iconos.
Hay muchos casos de uso de Icon Fuentes, y con muy pocos inconvenientes, que vale la pena explorar como una solución viable para Retina ciertas imágenes.
El futuro es móvil, a medida que más y más usuarios llegan a sus smartphones o tablets primera hora de navegar por la web. Tiene sentido tomar algunas medidas sencillas para hacer que su sitio sea más útil y atractivo a la vista, al asegurar que está listo para pantallas de alta resolución de hoy. Incluso se puede utilizar una combinación de estos enfoques para diseñar una solución que funcione para su sitio.