Share
Hacer que su sitio web esté listo para la pantalla Retina no tiene por qué ser una molestia. Ya sea que esté creando un nuevo sitio web o actualizando uno existente, esta guía está diseñada para ayudarlo a realizar el trabajo sin problemas..
Por cierto, si está buscando una solución rápida, consulte los temas listos para la retina en Envato Market, como Rebound - Responsive Multipurpose Retina Theme.
Rebote - Tema de retina multiusos sensible La forma más fácil y rápida de agregar compatibilidad con Retina es crear una imagen que esté optimizada para dispositivos Retina y servirla también a dispositivos que no sean Retina..
Por ahora, todos los navegadores modernos utilizan el remuestreo bicúbico y hacen un gran trabajo con el remuestreo de imágenes. A continuación, se muestra una comparación de la reducción de resolución de resolución en Photoshop frente a Google Chrome, utilizando una imagen de nuestro sitio web Growth Engineering 101..
Hay dos formas de dejar que el navegador muestre las imágenes a su medida: img Etiquetas o imágenes de fondo CSS.
Tu puedes tener img las etiquetas sirven a la imagen optimizada para Retina y establecen los atributos de ancho y alto a la mitad de la resolución de la imagen real (por ejemplo,. 400x300 si las dimensiones de la imagen son 800x600).
Si usa imágenes como fondos CSS, puede usar el CSS3 tamaño de fondo Propiedad para submuestrear la imagen para dispositivos no Retina..
.foto imagen de fondo: url (Retina-image-800x600-2x.png); tamaño de fondo: 400px 300px; repetición de fondo: no repetición; bloqueo de pantalla; ancho: 400px; altura: 300px;
En ambos casos, asegúrese de usar números pares en ambas dimensiones para evitar el desplazamiento de píxeles cuando la imagen está siendo degradada por el navegador.
Por lo general, la reducción de resolución del navegador debería funcionar bastante bien. Dicho esto, hay algunas situaciones en las que un submuestreo en el navegador puede hacer que las imágenes salgan borrosas.
Aquí tenemos un montón de 32px iconos sociales.
Y aquí es cómo aparecerán, cuando se remuestrean a 16px por Photoshop y el filtro bicúbico de Google Chrome. Parece que obtenemos mejores resultados de Photoshop en este caso..
Para obtener los mejores resultados para nuestros usuarios, podemos crear dos versiones de la misma imagen: una para dispositivos Retina y otra que ha sido modificada por Photoshop para dispositivos que no son Retina..
Ahora, puede utilizar las consultas de medios CSS para servir imágenes Retina o no Retina, dependiendo de la densidad de píxeles del dispositivo.
/ * CSS para dispositivos con pantallas normales * / .icons background-image: url (icon-sprite.png); repetición de fondo: no repetición;
/ * CSS para dispositivos de alta resolución * / @media solo pantalla y (-Webkit-min-device-pixel-ratio: 1.5), solo pantalla y (-moz-min-device-pixel-ratio: 1.5), solo screen y (-o-min-dispositivo-pixel-ratio: 3/2), solo pantalla y (min-device-pixel-ratio: 1.5) .icons background-image: url (icon-sprite-2x.png) ; tamaño de fondo: 200px 100px; repetición de fondo: no repetición;
Por otro lado, si usa un color de fondo para los íconos pequeños, la reducción de la resolución del navegador funciona bastante bien. Aquí está el mismo ejemplo de reducción de resolución con un fondo blanco.
Si aún no está satisfecho con los resultados de la reducción de resolución de Photoshop, puede hacer un esfuerzo adicional y optimizar a mano La versión no Retina para obtener resultados súper nítidos..
A continuación se muestran algunos ejemplos de imágenes del sitio web del producto Blossom que optimizado a mano para aquellos que todavía están en dispositivos no Retina.
Aquí hay un ejemplo de problemas de reducción de resolución con líneas de luz, donde vuelvo a dibujar las líneas de la imagen de reducción de muestra..
Ver la versión de Retina de esta imagen en Dribbble.
A continuación, llegamos a un ejemplo de problemas de reducción de resolución con el texto. En este caso, reescribí manualmente el texto "Característica de canalización" para que el resultado sea lo más nítido posible..
Cuando los detalles, las fuentes nítidas y las líneas finas limpias son importantes, es posible que desee hacer un esfuerzo adicional..
Las principales desventajas de las imágenes rasterizadas son su considerable tamaño de archivo y el hecho de que no se ajustan bien a diferentes tamaños sin afectar la calidad de la imagen. Las mejores alternativas a los gráficos rasterizados son CSS, gráficos vectoriales escalables (SVG) y fuentes de iconos..
Si tiene alguna oportunidad de construir los elementos gráficos para su sitio web en CSS, hágalo. Se puede usar para agregar degradados, bordes, esquinas redondeadas, sombras, flechas, rotar elementos y mucho más.
Aquí hay algunos ejemplos de elementos de interacción en Blossom que están implementados en CSS. El gradiente sutil funciona con gradientes de CSS, y la fuente personalizada que se usa en este botón es Kievit, que se sirve a través de Typekit. Sin imágenes.
En la siguiente captura de pantalla, las dos únicas imágenes utilizadas son el avatar del usuario y el sello azul. Todo lo demás: el signo de interrogación en un círculo, la flecha gris oscuro que se encuentra a su lado, la ventana emergente, su sombra y la flecha que se encuentra en la parte superior, es HTML y CSS puros..
Aquí puedes ver cómo aparecen los proyectos en Blossom. Es una captura de pantalla del sitio web de un proyecto que se usa como cubierta en una pila de hojas de papel. Las hojas de papel se implementan con divs que se rotan utilizando CSS.
Además, la flecha circulada en el lado derecho de la siguiente captura de pantalla es CSS puro.
Aquí hay algunas herramientas increíbles que ayudarán a ahorrar tiempo al crear efectos con CSS.
La principal ventaja de SVG es que, a diferencia de los gráficos rasterizados, se escalan razonablemente bien a varios tamaños. Si estás trabajando con formas simples, normalmente son más pequeñas que las PNG. A menudo, se utilizan para cosas como tablas.
Las fuentes de iconos se utilizan con frecuencia como un reemplazo para sprites de imagen. Al igual que los SVG, se pueden ampliar infinitamente sin pérdida de calidad y, por lo general, son más pequeños en comparación con los sprites de imagen. Además de eso, puede usar CSS para cambiar su tamaño, color e incluso agregar efectos, como sombras.
Tanto las fuentes SVG como las fuentes de iconos son compatibles con los navegadores modernos.
Los favicons son realmente importantes para los usuarios que necesitan una forma fácil de recordar qué sitio web pertenece a qué pestaña del navegador. Un Favicon listo para la Retina no solo será más fácil de identificar, sino que también se destacará entre una multitud de Favicones pixelados que aún no se han optimizado.
Para que su Favicon Retina esté lista, le recomiendo encarecidamente X-Icon Editor. Puede cargar una sola imagen y dejar que el editor la redimensione para diferentes dimensiones, o puede cargar imágenes separadas optimizadas para cada tamaño para obtener los mejores resultados..
Si desea actualizar un sitio web con imágenes existentes, se requiere un poco más de trabajo, ya que tendrá que volver a crear todas las imágenes para que estén listas para la retina, pero esto no tiene que perder demasiado tiempo..
Primero, intente identificar las imágenes que puede evitar usando alternativas como CSS, SVG y Fuentes de imagen, como se señaló anteriormente. Los botones, íconos y otros widgets de UI comunes generalmente se pueden reemplazar con soluciones modernas que no requieren imágenes.
En caso de que realmente necesite volver a crear imágenes rasterizadas, por supuesto querrá volver a los archivos de origen. Como puede suponer, simplemente cambiando el tamaño de sus imágenes de mapa de bits rasterizadas para que sean el doble de grandes no se realiza el trabajo, porque todos los detalles y los bordes se pixelarán.
No hay que desesperarse: las composiciones de imágenes que en su mayoría contienen vectores (es decir, en Adobe Photoshop o Illustrator) son bastante fáciles de ampliar. Dicho esto, no olvide verificar si los efectos de Photoshop en las opciones de fusión, como los trazos, las sombras y los biselados, siguen apareciendo como se esperaba..
En general, hacer composiciones de Photoshop directamente de vectores (formas) y de Photoshop. Objetos inteligentes Te ahorrará mucho tiempo en el futuro.
Por último, pero no menos importante, la optimización del tamaño de archivo de todas las imágenes en una aplicación o sitio web podría ahorrar efectivamente hasta el 90% de los tiempos de carga de imágenes. Cuando se trata de imágenes Retina, la reducción del tamaño del archivo se vuelve aún más importante, ya que tienen una mayor densidad de píxeles que aumentará el tamaño de sus respectivos archivos..
En Photoshop, puede optimizar el tamaño del archivo de imagen, a través de la función "Guardar para Web". Además, existe una excelente herramienta gratuita, llamada ImageAlpha, que puede reducir aún más el tamaño de sus imágenes con solo una pequeña pérdida de calidad..
A diferencia de Photoshop, ImageApha puede convertir PNG de canal alfa de 24 bits a PNG de 8 bits con soporte de canal alfa. La guinda del pastel es que estas imágenes optimizadas son compatibles con todos los navegadores e incluso funcionan para IE6!
Puedes jugar con diferentes configuraciones en ImageAlpha para obtener la compensación adecuada entre la calidad y el tamaño del archivo. En el caso a continuación, podemos reducir el tamaño del archivo en casi un 80%..
Cuando haya terminado de configurar los niveles de compresión deseados, el cuadro de diálogo para guardar de ImageAlpha también ofrece "Optimizar con ImageOptim", otra herramienta excelente y gratuita..
ImageOptim elige automáticamente las mejores opciones de compresión para su imagen y elimina la metainformación y los perfiles de color innecesarios. En el caso de nuestro archivo de sello, ImageOptim pudo reducir el tamaño del archivo en otro 34%..
Después de actualizar todos los recursos en Blossom.io para pantallas de alta resolución y usar ImageAlpha e ImageOptim para optimizar el tamaño del archivo, en realidad terminamos ahorrando algunos kilobytes en comparación con los recursos que teníamos antes.
Si desea obtener más información sobre cómo preparar sus aplicaciones y sitios web para las pantallas Retina, le recomiendo "Retinafy sus sitios web y aplicaciones", por Thomas Fuchs. Es una guía paso a paso que me ahorró mucho tiempo y nervios..
¡Gracias por leer! Alguna pregunta?
Accentsconagua