Tutorial WordPress: Redimensionar el logo del sitio en pantallas retina con CSS

Introducción: por qué hay que redimensionar el logo en pantallas Retina (HiDPI)

Las pantallas Retina o HiDPI tienen una densidad de píxeles por pulgada muy superior a las pantallas clásicas. Esto provoca que imágenes con la misma resolución física se vean pequeñas o borrosas si no se usan recursos adaptados. Para el logo de un sitio WordPress conviene servir una imagen de mayor resolución y luego escalarla con CSS para que se vea nítida en pantallas con devicePixelRatio ≥ 2. A continuación se describe con todo lujo de detalles cómo implementar esto correctamente y de forma compatible con WordPress.

Estrategias generales

Usar SVG: la mejor opción si el logo es vectorial. Escala perfectamente y evita problemas de densidad.
Servir una imagen raster 2x (o 3x) y escalar con CSS: subir el logo al doble de la dimensión visual y aplicar CSS que lo muestre al tamaño normal físico.
Usar srcset/sizes: dejar que el navegador elija la mejor versión para la densidad y el tamaño.
Usar background-image con background-size: útil para logos en contenedores CSS, permitiendo controlar exacto el tamaño visual.

Comparativa rápida

Método	Ventajas	Inconvenientes
SVG	Perfecto para íconos y logotipos vectoriales sin pérdida de nitidez	No aplica si el logo es foto algunos CMS/themes necesitan ajustes para usar SVG
Imagen 2x CSS	Sencillo, control total, compatible con cualquier imagen	Mayor peso (x2) hay que subir tamaño extra y ajustar CSS
srcset/sizes	Navegadores eligen la mejor versión eficiente	Requiere generar varias versiones configuración en WordPress (suele ser automática para imágenes)
background-image	Flexibilidad con posición y recorte	No beneficia de srcset en hay que gestionar manualmente

Cómo identificar el HTML del logo en tu tema WordPress

La mayoría de temas usan la función custom logo. El HTML suele contener la clase .custom-logo o una estructura con img.custom-logo o .site-logo img. En el inspector de tu navegador busca el elemento del logo y apunta la clase y la ruta de la imagen.

Guía paso a paso: opción recomendada (imagen 2x CSS)

Diseña/exporta el logo a una versión de alta resolución. Si visualmente quieres que el logo tenga 150px de ancho en pantalla normal, exporta una imagen con 300px de ancho (2x). Para pantallas 3x, exporta 450px.
Sube la imagen 2x al Media Library de WordPress y asígnala como logo mediante Apariencia → Personalizar → Identidad del sitio (o mediante la opción de logo del tema).
Aplica CSS que obligue al logo a mostrarse al ancho físico deseado (mitad del ancho real de la imagen 2x). Por ejemplo, si subiste 300px para mostrar 150px:

/ Selector típico: img.custom-logo o .site-logo img - ajústalo a tu tema /
img.custom-logo {
  width: 150px   / tamaño visual en CSS (mitad de la anchura real si la imagen es 2x) /
  height: auto
  max-width: 100% / evitar problemas en móviles /
  display: block
}

Con esto, en pantallas Retina la imagen 300px se renderiza con más detalle que una imagen de 150px nativa.

Mejorar con media queries para detectar densidades altas

Si quieres aplicar reglas específicas en dispositivos HiDPI (por ejemplo, usar una versión 3x o ajustar tamaño), usa media queries:

/ Detectar pantallas con devicePixelRatio >= 2 /
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  img.custom-logo {
    / si tu imagen es 2x, mantén width fijo si tienes 3x puedes reducir aún más /
    width: 150px
  }
}

/ Ejemplo para 3x /
@media only screen and (-webkit-min-device-pixel-ratio: 3),
       only screen and (min-resolution: 288dpi) {
  img.custom-logo {
    width: 150px
  }
}

Uso de srcset y sizes (método moderno)

WordPress genera automáticamente atributos srcset para imágenes subidas si se usan funciones de imágenes de WordPress. Si el logo se insertó mediante la API de logo (get_custom_logo / the_custom_logo), normalmente ya obtendrás srcset. Si necesitas control manual, puedes imprimir el logo con srcset y sizes así:


}
?>

En este ejemplo el atributo sizes=150px indica al navegador que la imagen se mostrará a 150px en la ventana, por lo que el navegador escogerá la resolución adecuada del srcset para la densidad y tamaño de pantalla.

Si tu logo está como background-image

Cuando el logo es un background del contenedor, usa una imagen 2x y controla el tamaño con background-size:

/ .site-logo es un contenedor de 150x50 píxeles visuales /
.site-logo {
  width: 150px
  height: 50px
  background-image: url(/wp-content/uploads/logo-300x100.png) / imagen 2x /
  background-size: 150px 50px / escala la imagen 2x al tamaño visual /
  background-repeat: no-repeat
  background-position: center center
}

Uso de SVG para logos

Si tienes el logo en SVG, es la opción recomendada porque evita tener que gestionar variantes 2x. Subir directament el SVG (habilitar si tu WordPress lo bloquea) y usarlo como logo o inyectarlo inline para poder estilizarlo con CSS.

Registrar tamaños retina en functions.php (opcional)

Si deseas generar automáticamente una versión con dimensiones 2x para usarla en el logo o crear un tamaño específico, puedes registrar una nueva imagen y pedir al usuario que suba un archivo del doble de tamaño:

/ Añadir en functions.php /
function tema_registrar_tamaños_logo() {
    / Ejemplo: tamaño de logo 150x50 y su versión retina 300x100 /
    add_image_size( logo-standard, 150, 50, false )
    add_image_size( logo-retina, 300, 100, false )
}
add_action( after_setup_theme, tema_registrar_tamaños_logo )

Después puedes obtener la URL de la versión retina con wp_get_attachment_image_url( id, logo-retina ) y aplicarla en tu HTML/CSS según convenga.

Consideraciones de rendimiento

Comprimir las imágenes 2x con herramientas como ImageOptim, pngquant o servicios de CDN/responsive images para no penalizar la carga.
Usar formatos modernos (WebP) si tu servidor/CDN y navegador objetivo lo permiten.
Si el logo se usa en muchas páginas, considera servirlo desde un CDN con cache TTL largo.

Pruebas y verificación

En Chrome: abre DevTools → Toggle device toolbar → selecciona un dispositivo con devicePixelRatio 2 o 3 para ver el resultado.
Comprueba la ruta de la imagen en el inspector y que el navegador está usando la versión correcta (srcset) o que la imagen 2x se está escalando según CSS.
Prueba en dispositivos físicos (iPhone, iPad, algunos portátiles macOS) para verificar nitidez real.

Ejemplos prácticos completos

1) HTML srcset (manual)

2) CSS para imagen 2x

/ Imagen subida 300px para mostrarse a 150px visual /
img.custom-logo {
  width: 150px
  height: auto
  display: block
}

3) Background-image 2x

.site-logo {
  width: 150px
  height: 50px
  background-image: url(/wp-content/uploads/logo-300x100.png) / 2x /
  background-size: 150px 50px
  background-position: center center
  background-repeat: no-repeat
}

Errores comunes y cómo evitarlos

Subir solo la versión pequeña: no sirve para HiDPI sube al menos versión 2x.
No fijar el ancho en CSS: si la imagen 2x se deja con su anchura real el logo saldrá demasiado grande.
No usar srcset cuando hay múltiples versiones: desperdicia ancho de banda y puede dar baja calidad.
Olvidar comprimir: las imágenes 2x pesan más optimízalas.

Resumen final

Para redimensionar correctamente el logo en pantallas Retina en WordPress, la solución más práctica y compatible es subir una versión del logo al doble (o triple) de la dimensión visual y controlar su tamaño con CSS (o bien usar srcset/sizes para dejar que el navegador elija). Si el logo es vectorial, usar SVG evita todos estos pasos. Asegúrate de optimizar las imágenes y comprobar el resultado en dispositivos o emuladores HiDPI.

SushiHost