Las imágenes de WordPress son borrosas: esto explica por qué

Se supone que las imágenes embellecen su sitio web. Las imágenes borrosas hacen lo contrario.

Cuando las imágenes de WordPress están borrosas, es necesario encontrar una solución, y rápido. Hasta que lo haga, sus usuarios desaparecerán en masa.

Numerosos casos pueden dar como resultado imágenes borrosas, pero rara vez se trata solo de la configuración predeterminada en WordPress.



A menudo, se debe a que el tamaño de la imagen original era más pequeño de lo que debería ser.

En cualquier sistema de administración de contenido en línea, los tamaños de las imágenes se cambian para que coincidan con el tamaño de la pantalla del usuario.

El problema de la calidad de la imagen ocurre más en el escritorio que en el móvil.

La razón es que los tamaños de pantalla más grandes en la vista de escritorio permiten que las imágenes más pequeñas se amplíen al tamaño completo de la pantalla.

Cuando note que sus imágenes están borrosas, cambie a la vista móvil y probablemente verá que no están tan borrosas. Es la desventaja del diseño web receptivo.
 

Las imágenes de WordPress están borrosas

Dos causas comunes de imágenes de baja calidad en WP son la carga de archivos multimedia que no han sido editados por calidad o la carga de un tamaño diferente al que puede mostrar su tema. Sin la edición de imágenes, la más mínima discrepancia se amplifica cuando la imagen se estira para adaptarse a pantallas más grandes.
 

Encuentra los tamaños predeterminados de tu tema

Cada tema de WordPress tiene reglas de tamaño predeterminadas codificadas en el archivo functions.php.

Vaya a su editor de temas, abra el archivo functions.php y busque el código para tamaños de imagen personalizados.

El código a buscar es 'agregar tamaño de imagen'.

se verá así

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'gridme-1222w-autoh-image', 1222, 9999, false );
add_image_size( 'gridme-922w-autoh-image', 922, 9999, false );
add_image_size( 'gridme-480w-360h-image', 480, 360, true );
}

En el código de muestra anterior, muestra tres tamaños de imagen, dos de los cuales están configurados como falsos y el último configurado como '480, 360, verdadero'.

Tener los tamaños de imagen configurados como 'falsos' significa que esos tamaños no se aplicarán. Establecer los tamaños de imagen en 'verdadero' aplicará las reglas de cambio de tamaño.

Cuando las reglas de tamaño se establecen para estirar la altura o el ancho, el resultado es borrosidad.

Si su tema amplía automáticamente el tamaño de las imágenes, cambie 'verdadero' a 'falso' en el archivo functions.php de su tema para deshabilitar esa acción.

La gran mayoría de los temas de WP ya no hacen esto debido al diseño web receptivo.

En la era anterior a 2012, antes de que el diseño web móvil se volviera algo común, estas reglas de tamaño automático quedaron obsoletas en la comunidad de desarrolladores de WP.

Aún así, en temas más antiguos, es posible que el código de su tema esté desactualizado para los estándares actuales de desarrollo web. Cuando ese sea el caso, establezca las reglas de tamaño automático en 'falso'.
 

mejor consejo

Evita las imágenes borrosas subiendo el tamaño exacto. Si eso no es posible, cargue el archivo de imagen más grande y deje que WordPress lo reduzca.

La borrosidad ocurre cuando las imágenes cargadas son más pequeñas que el tamaño en el que se muestran. Es mejor reducir una imagen que ampliarla.

Cuando amplía un archivo de imagen pequeño, es cuando las imágenes se vuelven borrosas en WordPress. Hace que la pixelación a pequeña escala sea más grande. Así, más evidente.
 

Las imágenes de WordPress ahora están borrosas después de cambiar el tema

Todos los temas de WordPress están codificados de manera diferente. Cada uno tiene varios puntos de interrupción para las imágenes. Lo que establece en la configuración de su galería de imágenes no siempre se refleja en un archivo functions.php de WordPress.

Como nota al margen: un punto de interrupción es un tamaño de imagen más allá del ancho o alto máximo que se puede mostrar en la pantalla de un usuario.

Cuando cambias de tema, los tamaños máximos de imagen (generalmente) cambiarán.

Por ejemplo, en el tema del blog del propietario, el tamaño máximo para las imágenes de tamaño completo es de 1210 px por 642 px. En el tema de WordPress Twenty-Twenty One, las imágenes se mostrarán con el tamaño en que se cargaron, a menos que establezca reglas de tamaño usando HTML.

Sin embargo, el valor predeterminado para 'post-miniaturas' es enorme. Están configurados en 1568, 9999… en otras palabras, tan grandes como la imagen que subes.

Esto es intencional porque el tema Twenty-Twenty-One es un tema minimalista de WordPress.

La miniatura se muestra como si fuera el encabezado de la publicación del blog, seguido del contenido del cuerpo usando un diseño de una sola columna sin una barra lateral de navegación.

Las imágenes insertadas en las publicaciones se mostrarán con los tamaños que cargue o cambiarán de tamaño utilizando los valores predeterminados de WordPress, que se establecen en su biblioteca de medios.
 

Un buen truco de WP para anular los valores predeterminados de los archivos adjuntos de imágenes

WordPress tiene una página oculta que no se muestra en la barra lateral de administración. Se encuentra yendo a yoursite.com/wp-admin/options.php.

Debe iniciar sesión como administrador del sitio para acceder a la página. Una vez que se carga la página, aparece un mensaje que le indica

“Advertencia: esta página permite el acceso directo a la configuración de su sitio. Puedes romper cosas aquí. ¡Por favor, tenga cuidado!”

Eso es correcto. Ten cuidado. La única configuración para cambiar aquí para las imágenes son las siguientes configuraciones:

Cambiar el tamaño predeterminado de la imagen a 'tamaño completo' hará que cada imagen que cargue en su biblioteca de medios se muestre en sus publicaciones en tamaño completo.

Habrá otras opciones disponibles, pero no tendrá que configurarlas manualmente para cada imagen que inserte en publicaciones o páginas. ¡Sin encoger ni estirar las imágenes para que quepan en las pantallas!
 

Error de fotografía

Es posible que las imágenes estuvieran borrosas antes de subirlas a WordPress.

Por lo general, es mejor cargar una foto original desde un teléfono inteligente a un editor en línea o una computadora de escritorio, limpiar el archivo de imagen y luego cargarlo en WordPress.

El problema con las cámaras de los teléfonos inteligentes es que las imágenes se ven decentes en pantallas pequeñas, pero al poner WordPress y mostrarlas a tamaño completo en una pantalla más grande, las imperfecciones se vuelven obvias.

Para todos los bloggers de comida, las velocidades de obturación lentas causan desenfoque de movimiento y eso conduce a imágenes borrosas. Aumente la velocidad de obturación y edite las fotos antes de subirlas a WordPress.

El CMS de WordPress es solo para mostrar imágenes. Hay complementos disponibles para agregar la funcionalidad de edición de imágenes.

Si caes en ese agujero de conejo, ten en cuenta los problemas de velocidad del sitio. Pueden ralentizar su sitio web.

En el tema de los complementos de WordPress para imágenes, lo único esencial es un complemento de compresión de imágenes. Independientemente del tamaño de su archivo, la compresión de imágenes ahorra ancho de banda.

Por otra parte, si está vendiendo o regalando imprimibles de un sitio web de WordPress, la compresión disminuirá la calidad de la imagen.
 

¿Cuál es el tamaño de imagen correcto para subir a WordPress para evitar que se vea borroso?

El tamaño de la imagen depende del ancho del contenido de sus páginas y publicaciones.

Para averiguar qué usa su tema WP, use la herramienta de inspección de su navegador. La mayoría funciona de manera similar: haga clic con el botón derecho y luego seleccione inspeccionar.

Busque la parte del código etiquetada como 'contenido del cuerpo principal' o algo similar. Al hacer clic en las secciones del inspector, se resalta el elemento en la página.

En su página web, mientras está en modo de inspección, la parte superior de la página mostrará dos números. El primero es el ancho, el segundo es la altura. No prestes atención a la altura, ya que será enorme. Es por eso que tienes que desplazarte hacia abajo en una página web.

Su ancho es limitado. En este tema, el ancho de la página es de 990 px. Tenga en cuenta que esto es para el área de contenido sin incluir la barra lateral.

Si tiene páginas personalizadas sin barras laterales, el área de contenido será más amplia.

Cuando sepa el ancho máximo de la página más ancha que tiene su tema, use ese ancho como su tamaño máximo de imagen antes de cargar.
 

Cómo cambiar el tamaño de las imágenes para que se ajusten a su tema

En los sistemas Windows, puede usar la aplicación de fotos o Paint. En los sistemas Mac, puede cambiar el tamaño de las fotos usando Vista previa o Fotos. Los usuarios de Chromebook pueden cambiar el tamaño de las imágenes con Google Photos.

Si está limitado a un teléfono inteligente, las herramientas de edición de imágenes en línea son su gracia salvadora. Algunas opciones populares son pic monkey, image resizer y, por supuesto, Canva.

Canva es la mejor opción porque puede crear una cuenta gratuita, hacer una imagen de tamaño personalizado, la configuración se guardará en su cuenta, luego puede cargar sus medios en su nube, colocarlos en una imagen de tamaño personalizado y arrastrarlos. para cambiar el tamaño para que quede perfecto.

Descargue el jpg o png, luego súbalo a WordPress.

Si la imagen está borrosa en un editor de imágenes en su escritorio o en un editor en línea, estará borrosa en WordPress. Corrija la borrosidad editando la imagen antes de cargarla.

Una vez que una imagen borrosa está en su servidor, es inútil.

Elimine la imagen borrosa, edite el original para aumentar la nitidez, cambie el tamaño al ancho máximo que su tema puede mostrar, o al ancho máximo que aumentará su foto sin degradar la calidad.

Cargue la imagen editada y la borrosidad desaparecerá.