Las imágenes de WordPress están borrosas, por eso

Las imágenes deben embellecer su sitio web. Las fotos borrosas son todo lo contrario.

Cuando sus imágenes de WordPress están borrosas, necesita encontrar una solución rápidamente. Hasta entonces, sus usuarios desaparecerán en masa.

Las imágenes borrosas pueden ser causadas por muchos casos, pero pocos están relacionados solo con la configuración predeterminada en WordPress.

Esto suele deberse a que el tamaño de la imagen original es más pequeño de lo que debería ser.

Con cada sistema de administración de contenido en línea, el tamaño de la imagen cambia de tamaño para adaptarse al tamaño de la pantalla del usuario.

Los problemas de calidad de imagen son más comunes en las computadoras de escritorio que en los dispositivos móviles.

La razón es que el tamaño de pantalla más grande en la vista de escritorio permite que incluso la imagen más pequeña se amplíe al tamaño de pantalla completa.

Cuando note que la imagen está borrosa, cambie a la vista móvil y es posible que no esté tan borrosa. Esta es la desventaja del diseño web receptivo.

Las imágenes de WordPress están borrosas

Dos causas comunes de mala calidad de imagen en WP son cargar archivos multimedia sin edición de calidad o cargar un tamaño diferente al que puede mostrar el tema. Sin la edición de imágenes, incluso las diferencias más pequeñas aumentan a medida que la imagen se estira para adaptarse a la pantalla más grande.

Encuentra el tamaño predeterminado del tema

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

Vaya al editor de temas, abra el archivo functions.php y busque el código para personalizar el tamaño de la imagen.

El código que debe buscar es "Agregar tamaño de imagen".

se parece a eso

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 en falso y el último está configurado en "480, 360, verdadero".

Establecer el tamaño de la imagen en "falso" significa que estas dimensiones no se aplicarán. Establecer el tamaño de la 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 se ve borroso.

Si su tema debe aumentar automáticamente el tamaño de la imagen, cambie "verdadero" a "falso" en el archivo functions.php de su tema para deshabilitar esta acción.

Debido al diseño web receptivo, la mayoría de los temas de WP ya no hacen esto.

En la era anterior a 2012, antes de que el diseño web móvil se generalizara, estas reglas de tamaño automático estaban obsoletas en la comunidad de desarrolladores de WP.

Sin embargo, para temas más antiguos, el código de su tema puede estar desactualizado para los estándares actuales de desarrollo web. En este caso, establezca la regla de tamaño automático en "falso".

Mejor consejo

Evite imágenes borrosas cargando dimensiones precisas. Si esto no es posible, cargue el archivo de imagen más grande posible y deje que WordPress lo reduzca.

La borrosidad ocurre cuando las imágenes cargadas son más pequeñas que las dimensiones que muestran. Es mejor reducir la imagen que ampliarla.

Cuando amplía un archivo de imagen pequeño, la imagen se vuelve borrosa en WordPress. Esto hace que la pequeña pixelación sea más grande. De esta manera es más evidente.

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

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

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

El tamaño máximo de la imagen (normalmente) cambia al cambiar de tema.

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

El valor predeterminado para "Publicar miniatura" es alto. Están configurados en 1568, 9999... en otras palabras, tan grandes como la imagen que subes.

Esto es intencional, ya que el tema Twenty One Twenty One es un tema minimalista de WordPress.

Las miniaturas parecen títulos de publicaciones de blog, seguidas de contenido básico con un diseño de una sola columna sin una barra lateral para la navegación.

Las imágenes insertadas en las publicaciones se mostrarán en el tamaño que cargó o cambió de tamaño utilizando la configuración predeterminada de WordPress establecida en su biblioteca de medios.

Un truco puro de WP para anular la configuración predeterminada de los archivos adjuntos

WordPress tiene una página oculta que no aparece en la barra lateral de administración. Se puede encontrar visitando yoursite.com/wp-admin/options.php.

Debe iniciar sesión como administrador del sitio para obtener acceso a esta página. Una vez que se carga la página, un mensaje le indicará

"Advertencia: esta página permite el acceso directo a la configuración de su sitio. Puede romper cosas aquí. ¡Cuidado!"

Esto es verdad. cauteloso. Los únicos ajustes que cambian la imagen aquí son los siguientes:

Cambiar el tamaño de la imagen predeterminada a "tamaño completo" hará que cada imagen que cargues en tu biblioteca de medios aparezca en tamaño completo en tus publicaciones.

Habrá otras opciones disponibles, pero no tendrá que configurarlas manualmente para cada imagen que inserte en una publicación o página. ¡Sin encoger ni estirar la imagen para que se ajuste a la pantalla!

error fotográfico

Las imágenes pueden estar borrosas antes de subirlas a WordPress.

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

El problema con las cámaras de los teléfonos inteligentes es que la imagen se ve bien en una pantalla pequeña, pero cuando se coloca en WordPress y se muestra en tamaño completo en una pantalla grande, las desventajas se vuelven obvias.

Para todos los bloggers de comida, las velocidades de obturación lentas causan desenfoque cuando se mueven, lo que resulta en fotos borrosas. Aumenta la velocidad de obturación y edita las fotos antes de subirlas a WordPress.

WordPress CMS se usa solo para mostrar imágenes. Los complementos están disponibles para agregar capacidades de edición de imágenes.

Si te metes en esta madriguera de conejo, ten en cuenta los problemas de velocidad del sitio. Pueden ralentizar su sitio web.

Cuando se trata de complementos de imagen de WordPress, lo único que importa es el complemento de compresión de imagen. La compresión de imágenes ahorra ancho de banda independientemente del tamaño del archivo.

Por otro lado, si vende o distribuye materiales impresos desde su sitio de WordPress, la compresión puede reducir la calidad de la imagen.

¿Cuál es el tamaño de imagen correcto para subir a WordPress para evitar el desenfoque?

El tamaño de la imagen depende del ancho del contenido de la página y de la publicación.

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

Busque secciones de código etiquetadas como "Contenido del cuerpo" o similar. Al hacer clic en una sección en el inspector, se subraya el elemento de la página.

En su página web, en modo de verificación, aparecerán dos números en la parte superior de la página. El primero es el ancho y el segundo es la altura. No prestes atención a la altura, ya que será enorme. Es por eso que necesita desplazarse hacia abajo en la página web.

Su ancho es limitado. Sobre este tema, el ancho de la página es de 990px. Recuerda que esto es para áreas de contenido que no incluyen barras laterales.

Si tiene una página personalizada sin barra lateral, 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 el 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 Fotos o Paint. En los sistemas Mac, puede usar Vista previa o Fotos para cambiar el tamaño de las fotos. Los usuarios de Chromebook pueden usar Google Photos para cambiar el tamaño de las imágenes.

Si está limitado a un teléfono inteligente, las herramientas de edición de imágenes en línea son su salvador. Algunas opciones populares son pic monkey, cambio de tamaño de imagen y, por supuesto, Canva.

Canva es la mejor opción porque puede crear una cuenta gratuita, tomar imágenes de tamaño personalizado, la configuración se guardará en su cuenta, luego puede cargar su contenido multimedia en su nube, colocarlo en una imagen de tamaño personalizado y luego arrástrelo para cambiar el tamaño para que encaje perfectamente.

Descarga jpg o png y súbelo a WordPress.

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

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

Elimine imágenes borrosas, edite el original para aumentar la claridad, ajuste al ancho máximo que su sujeto puede mostrar o aumente el ancho máximo de su foto sin perder calidad.

Sube la imagen editada y el desenfoque desaparecerá.