Vivimos en un mundo de alta definición. Y dado que la mayoría de nosotros pasamos más de ocho horas al día mirando diferentes tipos de pantallas, la calidad de las imágenes y los personajes contenidos en estas pantallas son muy importantes.

Aunque solo han estado disponibles durante unos años, las pantallas Retina son el camino del futuro. La alta densidad de píxeles en las pantallas Retina hace que las imágenes sean claras y nítidas. ¿Y a quién no le gustan las imágenes bonitas y nítidas?

Pantalla lista para retina

Aprender a crear un sitio web compatible con pantallas Retina es un activo importante para cualquier desarrollador web. Desafortunadamente, no existe una solución ideal y perfecta para hacer que su sitio web sea fácil de usar con pantallas Retina-Ready.

Entonces, mientras esperamos que alguien encuentre la solución más completa, hemos analizado algunas de las mejores opciones posibles para preparar su sitio web. De esa manera, no se desviará cuando llegue el momento en que todos los dispositivos muestren Retina de una forma u otra.

Pero antes de comenzar, tómese el tiempo para echar un vistazo a Cómo instalar un tema de WordPress¿Cuántas plugins debería instalar en WordPress.

¡Entonces manos a la obra!

Crear múltiples archivos de imagen

Empecemos con lo básico. La forma más sencilla de obtener compatibilidad con el modo Retina para su sitio web es crear múltiples variaciones de imagen en diferentes resoluciones. Esto significa que para cada tipo de resolución (es decir, 1x), debe crear una versión de alta resolución de ese clip (es decir, 2x).

Básicamente, puede crear varias versiones del mismo archivo y usar un complemento como WP Retina 2x o un script como retina.js para generar automáticamente las versiones "@ 2x" de cada tamaño de imagen o buscar imágenes "@ 2x" y mostrar el tamaño correspondiente a cada dispositivo.

Es cierto que crear varias versiones de la misma imagen puede ser un proceso que requiere mucho tiempo. Desafortunadamente, no existe un método rápido que genere automáticamente estas imágenes. Sin embargo, Hay varios complementos de Photoshop que le permiten reparar rápidamente sus imágenes.

Complementos como " Retinizarlo Que es una serie de acciones de Photoshop que le permiten optimizar fácilmente sus diseños para pantallas Retina. Si está utilizando una versión anterior de Photoshop (pre-CC), puede utilizar algo como " Las cuatro Que básicamente hace todo lo que hace la herramienta actual del Generador de Photoshop, pero para versiones anteriores de Photoshop.

Gráficos vectoriales escalables (SVG)

La forma más fácil de seguir adelante con el modo Retina es utilizar Scalable Vector Graphics (SVG) en su sitio web. SVG es un formato de imagen vectorial basado en XML. Como sugiere el nombre, una imagen SVG es escalable, lo que significa que las imágenes se pueden estirar tanto (o tan poco) como sea necesario, sin dejar de ser nítidas y claras. Puede ser una forma rápida y sencilla de implementar el modo Retina sin mucho esfuerzo.

Lea también: Cómo proporcionar imágenes WebP en lugar de PNG y JPG tradicionales

Retina vector vs raster

Sin embargo, hay dos desventajas de usar SVG en WordPress. La primera es que, dado que es un formato vectorial, SVG no es adecuado para todas las imágenes. Por lo tanto, puede usar SVG para logotipos e íconos, pero no para archivos como fotos (lo cual es un poco doloroso si te gusta usar imágenes de alta resolución para tu sitio web). Pero si desea utilizar íconos, animaciones o ilustraciones simples, los archivos SVG ciertamente pueden ser una opción para un sitio web compatible con Retina.

La segunda desventaja de usar SVG en WordPress es que no es un formato oficialmente compatible con WordPress debido a problemas de seguridad. Dado que un archivo SVG es esencialmente un archivo XML, esto lo abre a todas las vulnerabilidades conocidas asociadas con el formato de archivo XML, como análisis coercitivo, ataques de entidad externa XML (XEE), ataques de ataque de denegación de servicio XML (XDoS), etc.

Sin embargo, hay una forma de habilitar la compatibilidad con SVG para su sitio web que hará que sus archivos SVG sean seguros.

Cómo habilitar SVG de forma segura en WordPress

SVG seguro es un complemento que le permite habilitar de forma segura la compatibilidad con archivos SVG en su sitio web. Este complemento garantiza que sus archivos SVG estén desinfectados para evitar posibles vulnerabilidades XML que afecten a su sitio web.

Manténgase alejado de los complementos que permiten el tipo MIME para permitir la carga desde SVG a la biblioteca de medios de WordPress, ya que son peligrosos y potencialmente dañinos para su sitio web. Entonces, si está realmente tentado a usar el formato SVG en WordPress, asegúrese de hacerlo de manera segura y no descargue el primer complemento SVG que vea.

Genere más conversiones en su blog leyendo nuestro 15 tipos de contenido que generan más visitantes a tu blog

Algunos complementos para integrar la compatibilidad Retina en WordPress

Existen varios scripts y complementos para la compatibilidad con Retina que pueden hacer su vida mucho más fácil al intentar configurar un sitio web compatible con Retina Mode. Sin embargo, como se mencionó anteriormente, la mayoría de los complementos y scripts disponibles reemplazan sus imágenes con imágenes de alta resolución solo para pantallas de alta resolución. No se estiran como un SVG: aún necesita crear varias imágenes de diferentes resoluciones.

1 - retina.js

retina.js es uno de los scripts más utilizados para servir imágenes de alta resolución. Se trata de un script de código abierto que facilita el envío de imágenes de alta resolución a dispositivos con pantallas Retina.

El script comprueba cada imagen en la página para ver si hay una versión de alta resolución de esa imagen en el servidor. Si existe una variante de alta resolución, el script intercambia la resolución estándar con la imagen de alta resolución. Esta es una de las formas más comunes de publicar imágenes para pantallas Retina en su sitio web.

Ver tambien GIF, Emojis o Memes: ¿una buena idea para los sitios web de WordPress?

2 - Denso

Similar a retina.js, Denso es un complemento de jQuery que ofrece una manera fácil de servir imágenes en formato de proporción de píxeles. El script llama al método $ .fn.dense () de inicialización, que apunta a las etiquetas "img" que servirán como imágenes compatibles con el modo Retina según sea necesario.

Por lo tanto, reemplaza todas las imágenes con la versión de alta resolución respectiva, al igual que el script retina.js.

3 - WP Retina 2x

Este último se puede comparar con un generador de imágenes Retina mágico.

WP Retina 2x es un complemento que crea archivos de imagen requeridos por dispositivos de alta resolución y los muestra a sus visitantes en consecuencia. A diferencia de los dos scripts anteriores, genera imágenes de diferente resolución a partir de una imagen inicial. Entonces, si no está muy satisfecho con la creación manual de diferentes imágenes con diferentes resoluciones, esta opción es para usted.

Eso es todo por este tutorial, espero que te permita convertir tus imágenes a imagen Retina Ready.

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Una lista de autores de fantasía de WordPress

Como sugiere el nombre, el complemento Lista de autores de WordPress de lujo muestra la lista de autores para su sitio web en un widget. Tiene una interfaz de usuario simple que permite mostrar la información de cualquier autor en la barra lateral. Todo lo que tiene que hacer es arrastrar el widget del autor a la barra lateral y el complemento hará el trabajo.

Complemento de wordpress para lista de autores de wordpress

Sus principales características son entre otras: la posibilidad para mostrar los autores del blog de una manera divertida para atraer nuevos visitantes, la capacidad de mostrar una lista de autores en la barra lateral o en la página, la capacidad de comenzar una competencia entre los autores de tu blog, un diseño receptivo, soporte para códigos cortos y mucho más.

Descargar | Demoalojamiento web

2. Tabla de contenido fácil

Ce Plugin de WordPress fácil de usar le permite insertar una tabla de contenido en sus publicaciones, páginas y tipos de publicaciones personalizadas. Tiene muchas características, siendo las principales:Tabla de contenidos sencilla tabla de plugins de wordpress matieres

gestión automática de una tabla de contenido, soporte para la etiqueta , Compatibilidad con el complemento Rankin Math, compatibilidad con varios editores de páginas como Gutenberg, Divi, Elementor, WPBakery Page Builder y otros, la posibilidad de elegir en qué páginas desea mostrar sus publicaciones, la inserción automática del índice en determinadas páginas, y muchas otras.

Valiente es un Plugin de WordPress software gratuito que tiene todo lo que necesita para mostrar su tabla de contenido, así que siéntase libre de elegirlo como su primera opción.

Descargar | Demoalojamiento web

3. WooCommerce Advanced Bulk Edit

¿Editas regularmente tu catálogo de productos? Ya sea que tenga 100 productos o 10.000, este Plugin de WordPress premium es en mi humilde opinión “A must have”: (Esa es la primera palabra que me viene a la mente).Complemento de WordPress de edición masiva avanzada de Woocommerce

Por solo unos pocos dólares, el complemento Edición masiva avanzada de WooCommerce te facilitará la vida y te ahorrará un tiempo monstruoso. No hay dudas de que es una bomba.

Descargar Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

Conclusión

Listo ! Eso es todo por este tutorial, espero que le permita crear imágenes Retina-Ready para su sitio web. No dude en comparte con tus amigos en tus redes sociales favoritas

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.

...