{"id":19615,"date":"2016-11-21T14:24:13","date_gmt":"2016-11-21T12:24:13","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=19615"},"modified":"2020-03-06T13:13:37","modified_gmt":"2020-03-06T11:13:37","slug":"wordpress-retina-wp-retina-2x","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/wordpress\/plugins\/wordpress-retina-wp-retina-2x\/","title":{"rendered":"WordPress \u00abRetina\u00bb con WP Retina 2x"},"content":{"rendered":"
<\/div>

\n\t\"wp\n<\/p>\n

\n\tDesde hace algunos años, la resolución de las pantallas de nuestros dispositivos<\/strong> está aumentando a niveles impresionantes.\n<\/p>\n

\n\tTeléfonos móviles, tablets y monitores de ordenador llevan los PPI<\/a><\/strong> (píxeles por pulgada)<\/em> a niveles asombrosos y se consigue no ver ningún píxel en ningún momento.\n<\/p>\n

\n\tEsto plantea un problema, ya que a mayor resolución de las imágenes mayor peso tienen y más tardarán en cargar los sitios web, además de consumir más recursos de nuestro hosting, además, no todos los dispositivos tienen resoluciones altas<\/strong> y no necesitan de esas imágenes a gran resolución.\n<\/p>\n

\n\tLa solución está muy clara, mostrar las imágenes de gran resolución<\/strong> a los dispositivos que las acepten y mostrar las mismas imágenes con menos resolución<\/strong> a los dispositivos que no sean capaces de visualizar PPI muy altos.\n<\/p>\n

\n\tDe esta manera mostraremos las imágenes a la resolución perfecta dependiendo del dispositivo con el que se vea el sitio web. Es decir que tendremos un diseño adaptable<\/strong>.\n<\/p>\n

\n\t√ ¿Necesitas un hosting rápido y de confianza para tu WordPress? CLICK AQUÍ <\/span><\/a><\/span><\/strong>\n<\/p>\n

\n

\"Hosting<\/a><\/p>\n

\n

\n\tPlugin WP Retina 2x
\n<\/h2>\n

\n\t\"wp\n<\/p>\n

\n\tPara poder gestionar que imágenes mostrar tenemos un plugin muy interesante que nos ayudará con este proceso llamado WP Retina 2x<\/strong>.\n<\/p>\n

\n\tLo de retina<\/em> viene por el nombre comercial que Apple le dio a la pantalla de su iPhone 4 <\/em>allá por el 2012. Se definía como retina<\/em>a la resolución necesaria para no ver ningún píxel usando el dispositivo a una distancia normal.\n<\/p>\n

\n\tDesde entonces el término retina<\/em> se ha popularizado bastante y en este plugin hace uso de la misma palabra para dar a entender que se trata de la gestión de imágenes en alta resolución.\n<\/p>\n

\n\tEl plugin lo podemos encontrar en el repositorio de plugins de nuestro WordPress, o podemos descargarlo desde aquí<\/a><\/strong>.\n<\/p>\n

\n\tUna vez activo veremos que en la sección de Medios<\/strong> tenemos una nueva opción llamada Retina<\/strong> .\n<\/p>\n

\n\t\"retina\n<\/p>\n

\n\tSi entramos en esta opción veremos que nos muestra todas las imágenes que hemos subido a nuestro WordPress.\n<\/p>\n

\n\tEn cada imagen veremos que tenemos varias opciones seguidas de unas casillas con letras en colores naranjas y rojos.\n<\/p>\n

\n\t\"retina\n<\/p>\n

\n\tCada una de las letras corresponde a una resolución, si alguna aparece en rojo significa que la imagen que hay subida es demasiado pequeña como para generar dicha resolución<\/strong> y la única opción que tenemos es subir la imagen con más resolución.\n<\/p>\n

\n\tPor cada imagen que tengamos, el plugin generará 8 más con distintas resoluciones <\/strong>para poder mostrar las imágenes adecuadas en cualquier dispositivo.\n<\/p>\n

\n\tEn los botones de la derecha de la pantalla tenemos:\n<\/p>\n