La optimización de imágenes es uno de los temas candentes en WordPress desde una perspectiva de SEO. Las imágenes grandes ralentizarán su sitio, especialmente en dispositivos móviles que utilizan una conexión a Internet lenta. Puede usar un complemento de optimización de imágenes para comprimir la imagen reduciendo su calidad. Aunque esto aumentará la velocidad de carga de la página, las imágenes se verán borrosas dependiendo del nivel de compresión. Muchas veces es posible que desee mostrar imágenes claras como las imágenes de productos en su tienda WooCommerce. También puede tener un sitio web de fotografía y desea mostrar imágenes de alta calidad.Si tiene problemas con las imágenes borrosas en WordPress, estas son las cosas que debe buscar para solucionar el problema.
Imagen destacada frente a otras imágenes
Antes de continuar, debe comprender la diferencia entre las imágenes destacadas y otras imágenes. Su tema muestra las imágenes destacadas cargadas en el editor de publicaciones en todas las páginas de archivo, como el índice del blog, el archivo del autor, las categorías, las etiquetas, etc. Aunque no siempre es necesario presentar imágenes en artículos individuales, son importantes para que las páginas de productos muestren su producto.
Las imágenes normales que cargue en el editor de publicaciones o mediante la sección Medios > Agregar nuevo no aparecerán en las páginas de archivo. Se adjuntarán a publicaciones individuales y solo aparecerán en el contenido. Por ejemplo, las imágenes que ve en este artículo, son imágenes normales subidas a través del editor de Gutenberg.
Entonces, primero debe encontrar qué imágenes tienen problemas en su sitio. Puede ser solo imágenes destacadas, solo imágenes de contenido o todas las imágenes. Dependiendo de la situación, puede probar las siguientes sugerencias para solucionar el problema.
1. Regenera las miniaturas de las imágenes destacadas
Si tiene problemas con las imágenes destacadas, la causa más probable es que falten miniaturas. De forma predeterminada, WordPress registra tres miniaturas de imágenes en la sección Configuración > Medios Además, su tema puede usar diferentes miniaturas para mostrar imágenes destacadas, publicar widgets y páginas de archivo.
Cada vez que cambies el tema, recuerda usarlo Un plugin para regenerar miniaturas para crear nuevas miniaturas para las imágenes destacadas cargadas anteriormente. De lo contrario, el nuevo tema no encontrará el tamaño de miniatura correcto y cambiará el tamaño de las imágenes destacadas disponibles para que se ajusten al diseño. Esto dará como resultado un espacio en blanco alrededor de la imagen si las imágenes antiguas son más pequeñas o un efecto de causa roja si las imágenes antiguas son de mayor tamaño. La regeneración de las miniaturas solucionará este problema y permitirá que el tema muestre las dimensiones correctas.
Nota: Puede configurar el recorte de imágenes para WooCommerce en la sección "Apariencia > Personalizador > WooCommerce > Imágenes de productos". Cuando cambie su tema, WooCommerce regenerará automáticamente las imágenes de productos. También puede regenerar imágenes manualmente yendo a "WooCommerce > Estado > Herramientas Haga clic en El botón "Regenerar" se muestra junto a la opción "Regenerar miniaturas de la tienda".
2. Uso de imágenes receptivas
Como se mencionó, su tema debe generar miniaturas o use las miniaturas predeterminadas de WordPress para servir tamaños de imagen correctos para diferentes dispositivos (esto es tanto para imágenes destacadas como de contenido). Por ejemplo, una imagen de 900 × 360 píxeles en el escritorio se debe cambiar el tamaño a 300 × 130 píxeles en dispositivos móviles, o para mostrar 300 × 300 usando el Entorno predeterminado de WordPress Sin embargo, muchos usuarios desactivan las miniaturas predeterminadas de WordPress haciendo que las dimensiones sean 0 x 0. Además, los autores de temas también redimensionan dinámicamente las imágenes en dispositivos más pequeños, sin registrar las miniaturas apropiadas en las funciones del tema.
Cuando no usa los tamaños de imagen correctos, causará problemas de desenfoque en dispositivos más pequeños y también Google PageSpeed Insights mostrará advertencias como "Corregir el tamaño de la imagen".Si su tema no funciona bien o si no sabe cómo registre todos los tamaños de imagen necesarios, entonces la mejor solución es usar un complemento para generar imágenes receptivas. Puede probar complementos como Adaptive Images para WordPress, Shortpixel Adaptive Images o Flying Images en su sitio de prueba y elegir el que funcione bien para su sitio en vivo.
Una solución manual también está disponible como explicado en este artículo.
3. Pantalla Retina y HD
Si tiene problemas con los dispositivos de retina, debe servir una imagen de alta resolución 2x para evitar problemas de desenfoque. Algunos temas comerciales ofrecen la opción de cargar logotipos normales y de retina, pero no para todas las imágenes. Puedes usar Complemento WP Retina 2X para generar imágenes de retina y solo sirven pantallas de alta resolución.Este complemento también realiza otras optimizaciones, como regenerar miniaturas y deshabilitar el umbral máximo de imagen (como se explica en el punto 3).
4. Evita escalar imágenes e íconos en el contenido
Al cargar imágenes en el editor de Gutenberg, es posible escalar las imágenes a un tamaño personalizado. Puede usar el bloque de configuración en la barra lateral para cambiar el tamaño o la escala de la imagen. También es posible recortar la imagen y cambiar la relación de aspecto usando la herramienta disponible en la barra de herramientas de opciones de bloque.
Cuando cambie el tamaño o la escala de la imagen, WordPress utilizará una nueva imagen para la dimensión seleccionada en lugar de la imagen original que cargó. Digamos que subes la imagen con 1200 x 800 píxeles. Si elige un zoom del 50 %, puede ver en la fuente de la página que la imagen renderizada será de 600 × 400 píxeles con un nuevo nombre como "imagen-600 × 400.jpg".
Para corregir imágenes borrosas, primero asegúrese de evitar escalar y use las dimensiones de la imagen original sin cambiar el tamaño. A continuación, haga clic en el menú desplegable "Tamaño de la imagen" y seleccione la opción "Tamaño completo". Verá opciones en miniatura, medianas y grandes, y los tamaños provienen de "Medios > Configuración”, como se mencionó anteriormente. Al seleccionar el tamaño completo, se usarán las dimensiones originales de la imagen que cargó, en lugar de usar un tamaño diferente de la configuración. Esto ayudará a corregir las imágenes borrosas que se muestran en la sección de contenido.
Si tiene problemas con los íconos, asegúrese de usar íconos SVG escalables o Font Awesome. Estos íconos escalables no se distorsionarán cuando los acerques y se verán elegantes en todos los dispositivos.
5. Comprueba los tamaños máximos de imagen
La mayoría de los usuarios de WordPress se preocupan por el tamaño máximo de las imágenes subidas, que suele estar limitado a 300 MB. Puede ir a "Medios > Agregar nuevo" y encontrar el límite de "Tamaño máximo de archivo de carga" establecido para su sitio. Sin embargo, lo que muchos usuarios no saben es que WordPress limitará las dimensiones máximas de las imágenes a 2560×2560 píxeles. Esta característica fue introducido desde la versión 5.3 y WordPress reducirá los tamaños si subes imágenes más grandes. Como se mencionó, reducir la escala de las imágenes obviamente reducirá la calidad y creará un efecto de desenfoque. Si no desea que WordPress se reduzca, agregue el siguiente código al archivo de características de su tema.
add_filter( 'big_image_size_threshold', '__return_false' );También hay un complemento simple llamado Desactivar umbral de imagen grande lo que te ayudará a hacer esto si no quieres editar manualmente el archivo functions.php.
Además del problema predeterminado de WordPress, muchos complementos de optimización limitarán el ancho máximo de la imagen. Por ejemplo, puede limitar el ancho a 1920 px o 2048 px con el complemento SG Optimizer. Esto puede desenfocar sus imágenes si el ancho excede el límite establecido. Si no desea limitar el ancho, asegúrese de establecer el límite correcto y cargue tamaños más pequeños o deshabilite esta opción en su complemento.
6. Sube una imagen clara sin compresión
Casi todas las aplicaciones de procesamiento de imágenes le permiten comprimir la imagen mientras la guarda. Por ejemplo, usamos Snagit para crear imágenes, lo que le permite reducir la calidad y reducir la escala de las imágenes de la retina. Aunque ayuda a reducir el tamaño, afectará directamente a la calidad y creará desenfoque incluso antes de subir las imágenes a WordPress.
Así que asegúrese de no comprimir demasiado al crear sus imágenes para evitar que se vean borrosas. Dado que solo las imágenes JPG permiten la compresión con pérdida, siempre puede elegir PNG, que utiliza compresión sin pérdida. Además, las imágenes PNG también ofrecen un fondo transparente (JPG no puede usar transparencia), puede elegir este formato a costa de un tamaño ligeramente mayor.
7. Evite la carga diferida repetida
La carga diferida le permite mostrar imágenes solo cuando los usuarios alcanzan esa posición en la página. Esto ayudará a solucionar los problemas relacionados con las imágenes en Google PageSpeed Insights, ya que las imágenes no se cargarán sin desplazarse. Sin embargo, puede crear problemas que den lugar a imágenes borrosas de WordPress. introdujo la carga retrasada nativa de imágenes de la versión 5.4.Esto agregará cargando = "perezoso" atributo de todas las imágenes de contenido, fragmentos, avatares, comentarios y widget de texto. Si está utilizando un complemento de terceros, asegúrese de que el complemento deshabilite la carga diferida de WordPress de forma predeterminada. De lo contrario, provocará la duplicación y las imágenes se cargarán lentamente mostrando la imagen del contenedor borrosa antes de cargar la imagen completa. Puede usar complementos como WP Rocket que deshabilitará automáticamente la carga diferida de forma predeterminada y usará una configuración personalizada.
Nota: Si su servidor de alojamiento es lento (como en entornos compartidos) o si el usuario tiene una conexión a Internet lenta, las imágenes de carga lenta mostrarán una imagen o un contenedor borrosos antes de mostrar la imagen completa. Este no es un problema de WordPress, ya que es posible que deba actualizar el servidor o usar una buena conexión a Internet para verificar si las imágenes se cargan correctamente.
8. Verifique su complemento para el almacenamiento en caché o la compresión de imágenes
Si está utilizando un complemento de almacenamiento en caché y nota imágenes borrosas, borre su caché para ver si eso soluciona el problema. También es posible que deba borrar el caché de nivel de servidor y CDN si es necesario. Los complementos de compresión de imágenes como WP Smush ofrecen compresión sin pérdida sin afectar. Sin embargo, los complementos como SG Optimizer ofrecen compresión con pérdida y le permiten comprimir imágenes automáticamente cuando las carga. Dado que el complemento SG Optimizer también viene de forma predeterminada con la instalación de WordPress de SiteGround, puede omitir fácilmente la configuración.
Por lo tanto, verifique su almacenamiento en caché, compresión de imágenes o cualquier otro complemento de optimización de rendimiento que esté utilizando y deshabilite la compresión con pérdida para corregir imágenes borrosas.
9. Convierte y comprime sobre la marcha
Los servidores de alojamiento (como SiteGround) y los servicios de CDN (como Cloudflare) ofrecen un servicio de conversión de imágenes WebP sobre la marcha. Sin embargo, hay dos tipos de conversiones WebP disponible: con pérdida y sin pérdida. Si utiliza una conversión WebP con pérdida, es posible que las imágenes finales que se muestran en el sitio publicado no se parezcan a las imágenes originales que cargó en el sitio.
La mejor manera es deshabilitar la opción WebP y verificar cargando una nueva imagen. Si esto se ve bien, debe hablar con el proveedor de servicios para averiguar el método de conversión WebP utilizado. Debe elegir la compresión sin pérdidas o elegir otro complemento que ofrezca este método.
10. Comprueba tu CDN
Como se mencionó, una CDN como Cloudflare ofrece WebP, conversión de imágenes y carga diferida. Asegúrese de que estas características no estén duplicadas con sus complementos y tema o configuración de alojamiento. Si sospecha de una CDN, simplemente omita la CDN y verifique si las imágenes originales se muestran en buena calidad para confirmar que su CDN está causando el problema.
11. Imágenes borrosas en contenido de demostración importado
Es común que muchos usuarios de WordPress importen contenido de demostración de un tema comprado y comiencen a crear contenido desde allí. Los autores que venden un tema en mercados como Envato NO están autorizados a incluir imágenes en el contenido de demostración. Aunque verá imágenes de buena calidad en los sitios de demostración del autor, solo obtendrá imágenes borrosas (o contenedores) cuando descargue archivos de temas después de la compra. Si encuentra que las imágenes en el contenido importado están borrosas, asegúrese de consultar con el autor, en lugar de devanarse los sesos con él.
palabras de cierre
Usamos imágenes comprimidas con tamaños máximos limitados ya que la claridad de la imagen no es un factor importante para nosotros. Sin embargo, si está utilizando una tienda en línea o un sitio web de fotografía, es importante mostrar imágenes sin desenfoque. Puede probar las sugerencias anteriores una por una, por encuentre la causa raíz y solucione el problema de la imagen borrosa en su sitio. En la mayoría de los casos, usar el tamaño completo en lugar de alejar ayudará a solucionar el problema. Si desea utilizar complementos, asegúrese de mantener el archivo original de sus imágenes y pruebe los complementos con pocas imágenes o en un sitio de prueba/escenario.
Deja una respuesta