Subimos una imagen a WordPress y, en principio, esperamos que se vea igual de bien que en nuestro ordenador. Pero a veces no pasa. La foto aparece borrosa, una miniatura se ve floja o justo la imagen más grande de la página pierde definición.
Esto suele notarse bastante en portadas, productos, entradas del blog o bloques donde la imagen ocupa casi todo el ancho. ¿La causa? No siempre es la misma. Puede que la imagen original sea pequeña y la plantilla la esté estirando. También puede ocurrir que WordPress esté mostrando una miniatura de WordPress distinta a la que necesitamos. A eso se pueden sumar la compresión, la caché, el recorte automático, la carga diferida, lazy load o algún ajuste del CDN.
Por eso no conviene empezar cambiando todas las imágenes sin revisar antes qué está cargando la web. En muchos casos, el problema se resuelve al regenerar miniaturas en WordPress, usar un archivo con mejores dimensiones o corregir el tamaño que pide esa sección.
También puede pasar que en un ordenador se vea bien y en una pantalla retina no tanto. Ahí no siempre hay un fallo de WordPress. Puede ser simplemente que la imagen no tenga resolución suficiente para verse nítida en una pantalla con mayor densidad de píxeles.
Eso no significa que debamos subir archivos gigantes. Si la imagen pesa demasiado, la página tardará más en cargar y estaremos resolviendo un problema mientras creamos otro. Por eso es importante optimizar las imágenes en WordPress antes de utilizarlas.
La clave está en usar el tamaño adecuado para cada espacio. Ni quedarse corto, ni subir una imagen enorme sin necesidad. En esta guía veremos qué puede estar causando las imágenes borrosas en WordPress y qué revisar antes de sustituir archivos. Hablaremos de tamaños, miniaturas, compresión, caché, carga diferida y otros ajustes que pueden estar afectando la forma en que se muestran.
Tabla de contenidos
- 1 Ejemplo de imágenes desenfocadas o borrosas en WordPress
- 2 Imágenes pixeladas o borrosas en contenidos en WordPress
- 3 Regeneración de las miniaturas en las imágenes destacadas en WordPress
- 4 Imágenes pensadas para ser responsive
- 5 Dispositivos y pantallas retina y ultra HD
- 6 Prevenir el escalado o recorte en el propio contenido en WordPress
- 7 Ajuste en functions.php para el tamaño máximo de imágenes
- 8 Evitar la compresión de imágenes
- 9 Evitar la carga diferida de las imágenes
- 10 Actualización y vaciado de la caché
- 11 Verificación de errores por parte del CDN
- 12 Conclusión
Ejemplo de imágenes desenfocadas o borrosas en WordPress
Antes de tocar tamaños o volver a subir archivos, conviene tener clara una cosa: en WordPress no se comporta igual una imagen destacada que una imagen colocada dentro del contenido.
La imagen destacada se asigna desde el editor de la entrada, la página o cualquier otro tipo de contenido personalizado que tengamos creado. Luego el tema decide cómo mostrarla. Puede aparecer en el blog, en categorías, etiquetas, módulos de entradas o incluso dentro de la propia publicación.
En esta guía vamos a usar Divi como ejemplo, ya que forma parte de nuestro plan WpFácil. Estas imágenes suelen servir como portada o vista previa del contenido. No es obligatorio usarlas siempre, pero ayudan a que una entrada o un producto se vea más cuidado y a que el usuario entienda de qué trata antes de abrirlo.
Después están las imágenes que añadimos dentro del texto. Podemos subirlas desde el editor o desde Medios > Añadir nuevo y colocarlas donde las necesitemos.
Aunque todas terminan dentro de la biblioteca de medios de WordPress, el tema puede cargarlas con tamaños distintos. Por ejemplo, la imagen destacada puede estar usando una miniatura concreta y la imagen del contenido otra versión diferente del mismo archivo.
Por eso, cuando vemos imágenes borrosas en WordPress, primero hay que fijarse en dónde ocurre. Puede pasar solo con las destacadas, únicamente con las imágenes del contenido o con ambas.
Saber esto nos ayuda a no revisar cosas al azar. Una vez localizado el tipo de imagen que falla, será mucho más fácil comprobar si el problema está en el tamaño de la imagen destacada, en la miniatura que carga el tema o en la forma en que se está mostrando.
Imágenes pixeladas o borrosas en contenidos en WordPress
Cuando colocamos una imagen dentro de una entrada, una página o una ficha de producto, WordPress no siempre muestra el archivo original. Muchas veces utiliza una de las versiones que crea al subirla, como miniatura, mediana o grande.
El problema aparece cuando esa copia es más pequeña que el espacio donde queremos verla. El navegador termina estirándola y ahí es cuando empezamos a notar falta de nitidez, bordes poco definidos o incluso píxeles.
Puede pasar, por ejemplo, que hayamos subido una foto de buena calidad, pero dentro del editor esté seleccionado el tamaño miniatura. Si luego hacemos que ocupe todo el ancho del contenido, esa versión pequeña no tendrá suficiente resolución para verse bien.
También puede venir del tema, del constructor visual o del bloque que estamos usando. A veces el diseño solicita unas dimensiones concretas y WordPress carga una versión que no termina de encajar. Si además el archivo original ya era pequeño, el desenfoque será todavía más evidente.
Por eso, antes de revisar caché, plugins o ajustes más avanzados, conviene confirmar que WordPress está cargando una versión con la resolución adecuada.
Regeneración de las miniaturas en las imágenes destacadas en WordPress
Si nuestro problema se centra en las imágenes destacadas, como lo sería la falta de calidad en estas imágenes, una de las razones principales de este problema sería el de que WordPress, no puede registrar del todo la selección personalizada de los tamaños de las miniaturas en WordPress o imágenes destacadas, como se le conoce normalmente. Por defecto, WordPress
Registra por defecto tres miniaturas de imágenes en la sección Ajustes > Medios. Además, su tema puede usar diferentes miniaturas para mostrar imágenes destacadas en widgets, publicaciones y páginas de archivo.
Debemos tener en cuenta que en nuestro sitio algunas veces, al cambiar de tema, debemos volver a generar las miniaturas de estas imágenes destacadas. Uno de los complementos para poder hacer esto es el de:
Una vez instalado este complemento, debemos ingresar en las configuraciones del mismo y regenerar los ajustes de las miniaturas, esto sucede porque el tema nuevo no encuentra o no trabaja con el tamaño de la miniatura exacto al que estamos trabajando ahora. Puede que no sea el mismo desarrollador o simplemente una versión actualizada de nuestro tema, en algunas ocasiones no se trabaja con la misma resolución por tratarse de una mejora en cuanto a los estándares de SEO.
Por lo que, cada vez que cambiemos él tema o presentemos problemas con respecto a las imágenes destacadas, siempre es una buena opción asegurarnos de que están las miniaturas regeneradas, de lo contrario, además de obtener imágenes con una baja calidad o borrosas, es posible que se creen mayores conflictos y simplemente no carguen las imágenes o se vean totalmente blancas.
En cuanto a las imágenes destacadas de nuestros productos de WooCommerce, debemos ingresar a la sección de WooCommerce > Estado > Herramientas, en esta sección debemos hacer clic en el botón de Regenerar miniaturas, de esta forma solo vamos a regenerar las miniaturas de donde tenemos enfocado el problema principal, en lugar de hacerlo a todo el sitio.
De la misma forma, en casos donde contamos con el problema y persiste, podemos realizar un último ajuste antes de proseguir con el resto de puntos, y es el de cancelar la compresión de las imágenes destacadas, por medio de la eliminación de las opciones de redimensionamiento de las mismas.
Por lo mencionado, siempre es una buena opción el realizar este ajuste antes de los próximos que vamos a ver.
Imágenes pensadas para ser responsive
Como ya hemos dicho, nuestro tema es el encargado de generar las miniaturas con las que va a trabajar; sin embargo, para ayudar a nuestro tema a servir estas imágenes de forma correcta, debemos trabajar con el uso de miniaturas de tamaños predeterminados de WordPress, de esta forma poder servir una imagen que no tenga que ajustarse del todo a una resolución más baja. Esto aplica tanto para las imágenes destacadas como para el contenido de nuestro sitio.
Un ejemplo de esta situación sería el siguiente, cambiar el tamaño de la imagen destacada en WordPress. Teniendo una imagen de 1800 × 650 píxeles, al momento de subirla se mantiene la calidad, pero luego debe cambiar este tamaño a 300 × 200 píxeles en dispositivos móviles o mostrar 2500 × 250 para la imagen destacada. En el mismo, esto puede producir que se corte nuestra imagen e incluso que se obtenga el problema de imágenes borrosas sobre estas.
En este caso específico, sí tenemos el ajuste mencionado previamente (cambiar los valores de WordPress a 0x0)
En algunos casos, incluso el inspeccionado de Google PageSpeed Insights puede mostrar advertencias como debes redimensionar correctamente las imágenes. Si el tema no está gestionando de forma correcta las miniaturas, entonces la mejor solución es utilizar un plugin para generar imágenes responsive. Se puede instalar algunos plugins como lo serían:
Los tres plugins están orientados a realizar una adaptación de las imágenes que tenemos en nuestro sitio o cambiar el tamaño de las imágenes en WordPress, igualmente lo mejor que podemos hacer es realizar estos ajustes en un clon de WordPress y luego cuando veamos que funciona de forma correcta implementarlo en nuestro sitio.
Dispositivos y pantallas retina y ultra HD
Si nos encontramos con algunos problemas con los dispositivos de retina, en este caso los tamaños de las imágenes se deben servir más del doble de su tamaño para evitar problemas de desenfoque. Algunos temas actualmente disponibles en el mercado ofrecen una opción para cargar imágenes en ciertas zonas, como sería el logo en WordPress de nuestra empresa en un formato de retina, pero esto no aplica para todas las imágenes. Se puede utilizar el plugin de:
Este plugin nos ayuda a servir imágenes dos veces más grande de lo normal para aquellas necesidades que tengamos con los dispositivos de retina, en caso de no tener esta necesidad es mejor hacer caso omiso a esta recomendación, ya que en algunos casos estas imágenes consumen muchos recursos de nuestro servidor. Este plugin también realiza otras optimizaciones, como regenerar miniaturas y deshabilitar la reconversión de imágenes como se explica previamente.
Prevenir el escalado o recorte en el propio contenido en WordPress
Cuando se sube la imagen a nuestro editor de WordPress, ya sea el de WordPress Gutenberg o en el editor clásico, es posible que nos muestre una opción predeterminada para redimensionar las imágenes. También se puede redimensionar utilizando la barra lateral para cambiar el tamaño de la misma. 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 en el panel lateral del editor.
Cuando se utiliza la herramienta de corte o redimensiona, el sistema va a utilizar la nueva imagen para la dimensión que escogidos en lugar de la imagen original que se ha subido al WordPress. Por ejemplo, si subimos una imagen de 1920 x 1080 px para utilizarla en el fondo, y la utilizamos con un recorte específico para utilizarla en una entrada, esta va a ser redimensionada, por ejemplo, a 800 × 600 px y se aplicará un nuevo nombre a la imagen, por ejemplo imagen-800×600.jpg.
Si tenemos imágenes borrosas en nuestro contenido, seguramente están siendo redimensionadas de la imagen original que hemos subido. Para solventar este problema o intentar hacerlo, vamos a ingresar a la imagen en cuestión que está presentando el problema de visibilidad y realizamos el siguiente ajuste.
Hacemos clic en el menú desplegable Tamaño de imagen y seleccionamos la opción Tamaño completo. En esta misma sección podremos ver otras dimensiones como serían miniatura, medianas y grandes. Estos tamaños son tomados por el WordPress desde su configuración que hemos visto en puntos anteriores: Medios > Configuración. Si seleccionamos 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 nos va a ayudar a que el WordPress tome la imagen con la más alta resolución para que se muestre en el contenido en lugar de una redimensionada.
Así mismo, si estamos utilizando un GIF, este no va a tener movimiento, dado que la redimensión es una imagen elaborada por WordPress, por lo tanto, no conserva el movimiento. Si se tiene problemas con los íconos, podemos tratar subiendo imágenes en formato SVG en WordPress, estos son escalables y pueden ser modificados sin temor a sufrir una pérdida de calidad y actualmente son de fácil obtención.
Ajuste en functions.php para el tamaño máximo de imágenes
En muchos de los casos, el tener imágenes de buena calidad implica que estas sean de más peso al que WordPress permite, simplemente con una importación tradicional de elementos a la media de nuestro sitio, de forma general, esta tiene un límite de hasta 300 MB. Sin embargo, hay dos factores que se tienen que tomar en cuenta para este proceso, uno es el peso de la imagen y el segundo es el tamaño de la imagen. WordPress trabaja con un máximo de tamaño de 2560×2560 px, por lo tanto, este es el límite, y si subimos una imagen que sea de, por ejemplo, 2561×2561 px, es decir, un solo píxel más grande que el tamaño máximo, no se va a poder subir y nos mostrará un mensaje de error para que redimensionemos la imagen, cosa que no queremos por cualquier circunstancia.
Esta función se implementó en WordPress a partir de la versión 5.3, por lo que si se reduce la calidad, puede generar imágenes borrosas en WordPress. En todo caso, si no queremos que se haga un recorte a estas imágenes que son grandes en tamaño, mas no necesariamente en peso, debemos agregar a nuestro archivo functions.php del tema que estemos utilizando o en el tema hijo en WordPress.
Este archivo vamos a poder encontrarlo en la ruta:
WePanel > administrador de archivos > public_html > dominio > wp-content > themes > tema o tema hijo activo > archivo functions.php
add_filter( 'big_image_size_threshold', '__return_false' );También hay un plugin para aquellos que se les dificulte la edición de código o prefieran instalar un plugin para no estar modificando códigos de nuestro tema, este plugin nos va a ayudar a agregar este código pero en forma de plugin.
Igualmente, hay algunos casos en los que los plugins que tenemos en nuestro sitio para optimizar ciertos ajustes de las entradas actúan evitando una carga de imágenes excesiva, que no alcanza a llegar al límite de tamaño estipulado por WordPress, en este caso ya tendríamos que evaluar y realizar pruebas al instalar WordPress en una nueva instalación y verificar si el problema persiste.
Evitar la compresión de imágenes
Actualmente, existen incontables programas de edición de imágenes, estas aplicaciones o programas para editar imágenes nos permiten comprimir estas mismas mientras son almacenadas en nuestra PC. Por ejemplo, en el programa de edición Photoshop, al momento de guardar los cambios en la imagen, nos va a mostrar un mensaje de qué tipo de compresión queremos elegir bajo una barra de selección del porcentaje de compresión. Aunque esta opción ayuda mucho a reducir el peso de nuestra imagen, es posible que afecte en la calidad de la misma si lo comprimimos de una forma excesiva, generando el efecto de imagen borrosa que justamente deseamos eliminar.
Debido a este ajuste, debemos asegurarnos de no comprimir demasiado al crear las imágenes de nuestro sitio, o de indicarle esto a la persona encargada de la compresión de las imágenes (de forma externa), ya que pueden causar el efecto que estamos interesados en no obtener (imágenes borrosas). Las imágenes en formato JPG son las que permiten la compresión con una perdida de calidad, por lo tanto, es bueno
Dado que solo las imágenes JPG permiten la compresión con pérdida, el utilizar formato PNG es una opción siempre que utilizar una extensión con perdida. Sin contar que este formato puede contar con fondos transparentes, cosa que con las imágenes en JPG no pueden lograr. Sin embargo, el aspecto negativo de los PNG es que son un formato de imagen que es un poco más pesado en algunas instancias bastante más pesado que un JPG.
Evitar la carga diferida de las imágenes
La carga diferida en las instalaciones de WordPress, nos permite mostrar las imágenes solo cuando el visitante llega a esa posición exacta de la página para que sea visualizada la imagen. Esto en gran cantidad de ocasiones puede llegar a ayudar a solucionar problemas relacionados con la velocidad del sitio frente a las inspecciones que se realizan en Google PageSpeed Insights, ya que las imágenes no se cargarán en una primera instancia sin que se haga scroll. Igualmente, en ocasiones puede resultar en algunos problemas en que las imágenes estén borrosas en WordPress.
WordPress en la versión 5.4 ha incorporado a su core (código fuente) una carga diferida de forma nativa. Esto agrega a las imágenes el atributo lazy load en WordPress a las imágenes que se encuentren en nuestro sitio web WordPress.
Si estamos utilizando un plugin externo, podemos controlar algunas características del mismo para que gestione las cargas de imágenes de forma diferida, tomando esta como prioridad en lugar de la carga diferida que ofrece por defecto WordPress. Si no se hace este ajuste, se puede generar una duplicación de la función, lo cual va a hacer que las imágenes sean cargadas más lentamente y se carguen primero borrosas antes de que se ejecuten ambos scripts de carga diferida. El caso más popular es el del plugin de WP Rocket, el cual desactiva automáticamente la carga diferida predeterminada de WordPress para usar la configuración personalizada.
Hay que tener en cuenta también que este proceso dependerá de la conexión de los usuarios que ingresan al sitio, esto quiere decir que si la conexión a internet no es estable, este va a tardar más tiempo en cambiar el estado de las imágenes de pixeladas o borrosas a la resolución completa, por lo que en algunos casos no depende en totalidad de nosotros, y si se presenta este problema para un cliente, indicarle que verifique su conexión a internet.
Actualización y vaciado de la caché
Si en nuestro caso estamos utilizando algún plugin que gestiona la caché de WordPress de nuestro WordPress, y luego de realizar cualquiera de los puntos anteriores seguimos viendo las imágenes borrosas o pixeladas, es posible que necesitemos vaciar la caché de WordPress almacenada por estos plugins. También, en caso de tener un CDN WordPress es recomendable vaciar la caché de estos sistemas. Algunos plugins como optimizador.io nos ofrecen una compresión sin perder la calidad de las imágenes que están en nuestro sitio. Luego de hacer cualquier compresión es recomendable el realizar una limpieza de caché. Un ejemplo que podemos ver es con el plugin autoptimize, wp super cache y wp fastest cache.
Plugin autoptimize
Plugin WP Super cache
Plugin WP Fastest cache
Verificación de errores por parte del CDN
Algunos CDN como Cloudflare ofrecen compresión de imágenes en WebP en WordPress, conversión de imágenes de manera general y carga diferida de las mismas. Si presentamos algún problema con nuestras imágenes en cuanto a la calidad, debemos asegurarnos de que estas características no estén duplicadas con los plugins que tengamos activos en nuestro sitio, como hemos visto, el tener duplicadas las opciones puede causar estos problemas, por lo que aplica de igual forma el tener una compresión por parte del CDN y también de algún plugin que gestione estas imágenes. Si se sospecha que el problema está relacionado con la CDN, simplemente podemos realizar una prueba omitiendo el CDN y verificar si las imágenes originales se muestran con buena calidad al momento de desactivar la misma, esto confirmaría que es un problema relacionado con la CDN.
En este caso, al ser un problema relacionado con el CDN ya se puede escribir a soporte del mismo, ya que es un ajuste externo a nuestra instalación de WordPress y a nuestro hosting en general
Conclusión
Ver imágenes borrosas en WordPress puede desconcertarnos, sobre todo cuando el archivo original se ve bien fuera de la web. En muchos casos, la imagen no está dañada. Lo que ocurre es que WordPress, el tema o el constructor está cargando una versión más pequeña de la que necesitamos.
Cada vez que subimos una imagen, WordPress crea varias copias con distintos tamaños. Esto viene bien para no cargar siempre el archivo completo, pero también puede provocar que una miniatura termine mostrándose en un espacio demasiado grande.
Cuando el navegador estira esa versión, la pérdida de calidad se hace visible: aparecen píxeles, los bordes se ven menos definidos y la imagen da una sensación de desenfoque.
Por eso, lo primero sería revisar qué tamaño está seleccionado en la entrada, página o producto. Puede que solo tengamos que cambiar la miniatura por la versión grande o completa. Si eso no lo resuelve, entonces ya podemos comprobar las dimensiones del archivo original, regenerar las miniaturas o revisar qué tamaño está solicitando la plantilla.
También hay otros ajustes que pueden influir, como la compresión, la caché, la carga diferida o el CDN. Incluso la pantalla desde la que vemos la web puede cambiar bastante el resultado. Una imagen que parece correcta en un monitor puede quedarse corta en una pantalla Retina.
Ahora bien, tampoco conviene resolverlo subiendo archivos enormes para todo. Eso puede aumentar el peso de las páginas y hacer que la web cargue más despacio. Lo que buscamos es que cada imagen tenga las dimensiones suficientes para el lugar donde va a mostrarse, pero sin cargar un archivo mucho más pesado de lo necesario.
Antes de reemplazar toda la biblioteca de medios, merece la pena revisar el caso paso a paso: tamaño elegido, dimensiones originales, miniaturas disponibles y caché.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
