Cómo optimizar imágenes en WordPress al 100%

por | Mar 31, 2020 | Aprender WordPress

como optimizar imágenes WordPress

Es un hecho ya irrefutable que la optimización de imágenes de tu sitio web te sirve para muchas cosas, desde mejorar la experiencia a tus usuarios hasta tener mejor karma frente a Google y sus bots para que les guste más tu web.

En esta guía definitiva para optimizar imágenes en WordPress quiero que demos un repaso a la Biblioteca de Medios, la configuración de miniaturas y tamaños adicionales de imágenes, pasando por la limpieza de imágenes duplicadas y acabando con la necesaria optimización de estas.

No cabe duda que un sitio web con imágenes ilustrando los contenidos tienen un 80% más de engagement frente a los usuarios o compradores que un sitio pobre en ilustraciones o imágenes de servicios, productos, etc.

¿Tú utilizas imágenes para tus contenidos?

 

ImgOptimizer, la herramienta que dio paso al plugin


¿De qué va esto?

Seguro que si eres cliente de Webempresa ya lo sabes jeje, pues posiblemente la has utilizado en alguna ocasión o eres de los que tienes la sana costumbre de ejecutarla de cuando en cuando, sobre todo tras una subida importante de imágenes a tu web.

Se trata de una herramienta creada por Webempresa hace ya un tiempo, que está disponible en el Área de Cliente para que pueda ser ejecutada bajo demanda.

Área Cliente Webempresa

Se encarga de rastrear todas las imágenes de tu Hosting, sean de webs WordPress, PrestaShop, Joomla u otros scripts y optimizarlas, sin pérdida de calidad, para disminuir el tamaño de las imágenes originales y de paso mejorar la carga de tus webs.

Te lo ilustro en este vídeo…

Con ImgOptimizer estamos consiguiendo de promedio optimizaciones de un 17%, con una mejora importante para el SEO, la velocidad de la web y ahorro en ancho de banda consumido.

Aunque también dejamos esta guía para mejorar el SEO en imágenes.

Pues de esta herramienta molona y con cientos de miles de imágenes optimizadas a sus espaldas, ha nacido OptimizadorIO, un plugin para WordPress del que te hablo más abajo.

dashboard

 

Qué espacio ocupan las imágenes en WordPress


Por regla general el 70% del espacio ocupado por cualquier sitio web WordPress es debido a las imágenes alojadas en la carpeta /wp-content/uploads por lo que dedicarle tiempo y esfuerzos a reducir el peso de una imagen sin perder calidad, deberían ser tu próxima cruzada para ganar un lugar en el olimpo y que PageSpeed Insights te de amor.

El porcentaje de peso de las imágenes en una instalación de WordPress varía entre el 30% y el 70% aproximadamente, dependiendo de la web y de si esta utiliza plugins como WooCommerce.

espacio que ocupa una imagen

Es tan importante que utilices buenas imágenes, de calidad, que sean originales, en tus post y páginas de WordPress, o en los productos de tu tienda WooCommerce, como que estén bien optimizadas, para mejorar los tiempos de carga sin que la calidad de las mismas se vea afectada.
 

Qué dice el Codex sobre las imágenes


Ciertamente el Codex de WordPress, en lo referente a optimización de imágenes es bastante parco y se limita a indicar lo que ya es obvio diciendo algo como:

Asegurarse de que las imágenes en sus publicaciones estén optimizadas para la web ahorre tiempo de carga, ancho de banda y aumente su clasificación en los motores de búsqueda.

Los tamaños de imagen predeterminados de WordPress son “thumbnail” (y su alias “thumb”), “medium”, “large” y “full”.

Estos tamaños de imagen se pueden ajustar en el dashboard, en la configuración de Ajustes, Medios. Si tu tema permite Post Thumbnails entonces “post-thumbnail” también está disponible y este es el valor predeterminado cuando se utiliza Post Thumbnails.

ajustes de medios en imagenes

Estos son los tres tamaños de imagen predeterminados, que WordPress llama: miniatura, medio y grande.

El tamaño de la miniatura tiene un ajuste especial para recortar en la dimensión exacta que se especifique.

Puedes reducir los tamaños establecidos en Medios, pero sólo tendrán efecto para las imágenes recién subidas, las existentes no se verán afectadas por este cambio y seguirás conservando el resto de tamaños.

Así se utilizan estos tamaños predeterminados con the_post_thumbnail():

// Sin parámetro -> Post Thumbnail (Según el tema por medio de set_post_thumbnail_size())
the_post_thumbnail();
the_post_thumbnail('thumbnail'); // Thumbnail (por defecto 150px x 150px max)
the_post_thumbnail('medium'); // Media resolución (por defecto 300px x 300px max)
the_post_thumbnail('large'); // Alta resolución (por defecto 640px x 640px max)
the_post_thumbnail('full'); // Resolución original de la imagen (sin modificar)
the_post_thumbnail( array(100,100) ); // Otras resoluciones

¿10, 4, 6 tamaños generados por el núcleo de WordPress? ahí queda la duda.

Lo cierto es que el núcleo de WordPress genera una serie de tamaños predeterminados y el resto de tamaños adicionales son generados por el tema o plugins que los necesiten según sus particularidades, esto incluye a WooCommerce y las imágenes de Categorías y Productos.

Desde la versión 2.9 de WordPress se incorpora la Imagen Destacada (featured image), lo que añade un tamaño más a la lista de tamaños que se crean tras subir una imagen a la biblioteca de medios.

Luego habría que añadir la Featured Mobile que es la versión de imagen destacada para dispositivos móviles (responsive), la Sidebar Thumb imagen miniatura de la zona “sidebar” y otras que se van generando en base al tema y plugins usados.

¿4 tamaños estándar de imágenes? ¡no!, tantos como requiera tu tema y tus plugins, además de las que el ‘core’ de WordPress genera.

 

Qué dice PageSpeed Insights sobre tus imágenes


Si eres de los que todavía no ha utilizado PageSpeed Insights para evaluar la carga de la web ¿a qué estás esperando? obtendrás información muy importante sobre el estado de carga de tu página y podrás detectar los cuellos de botella que la hacen menos deseable a Google …y posiblemente a otros buscadores.

Pongamos como ejemplo una tienda de WooCommerce, en la que publicas regularmente nuevos productos, de los que haces las fotografías desde tu dispositivos móvil a 2 o 4 MB mínimo, posiblemente más y las subes a la tienda “sin optimizar”

¿para qué, verdad?

producto woocommerce no optimizado pagespeed

Este sería un caso en el que PageSpeed detecta que tienes imágenes sin optimizar y te informa del ahorro en tiempo de carga (al margen del espacio ocupado) que reducirías si las optimizaras.

Si eres de los que hacen las cosas bien y optimizas tus imágenes antes de subirlas a la tienda, los usuarios no deberían sufrir las consecuencias al visitar tu tienda y consultar los productos.

Este sería un caso en el que PageSpeed detecta que tus imágenes están optimizadas, simplemente no mostrándote el aviso.

producto woocommerce si optimizado pagespeed

¿Hay diferencia verdad? …pues ya sabes que la optimización es el camino para que tus contenidos sean los que son pero más molones porque cargarán más rápido.

 

Qué formatos de imágenes son los adecuados


Prestarle atención a los formatos de imágenes que utilizas en tus sitios web WordPress es fundamental porque aunque todos los formatos habituales conocidos para imágenes serían capaces de representar la misma imagen, no todos lo hacen de la misma forma, con la misma calidad y peso y esto determina realmente cual debe ser su uso.

Tenemos cada vez más tendencia a la inmediatez de las publicaciones y en esta ecuación entra en juego el móvil como dispositivo de acción inmediata que permite realizar fotos de cualquier cosa y publicarlas ipso-facto, sin que hayan pasado por un proceso de optimización ¡y esto es poco recomendable!

Por regla general la mayoría de usuarios tiene configurado su dispositivo móvil para que realice las fotografías con la resolución y peso establecidos por defecto por el fabricante que suele oscilar entre los 8 MB y 16 MB o más y la tendencia es que esto vaya en aumento, con el consiguiente problema de optimización que genera su uso directo.

Existen 2 formatos estrella para las imágenes que habitualmente se utilizan:

  • JPG: Formato comprimido que reduce la calidad de la imagen pero que genera archivos de menor tamaño o peso. Ideal para Internet. Recomendado para imágenes con muchos colores.
  • PNG: Formato no comprimido que cuando se comprime pierde determinada información y que genera archivos de mayor tamaño, lo que supone un mayor tiempo de carga. Más pensado para diseño, fotografía e impresión. Recomendado para imágenes más sencillas, con menos colores o que sean de fondos transparentes.

tabla comparativa formatos compresion imagenes

Créditos de la imagen: Wikipedia

 

Eliminar imágenes ¿es la solución a la falta de espacio?


Es evidente que antes de acometer una acción tan delicada como es eliminar imágenes de la instalación de WordPress sin tener claro cuales usas y cuales no usas (que no las uses tu no significa que no las use WordPress, tu tema o alguno de los plugins instalados) hay que hacer siempre una copia de seguridad, ya sea de tu web completa o de la biblioteca de medios, algo que explico en este artículo:

Puedes usar plugins como DNUI https://es.wordpress.org/plugins/dnui-delete-not-used-image-wordpress/ para detectar que imágenes no se utilizan en tu instalación, pero igualmente puede haber falsos positivos y se recomienda utilizar este tipo de plugins con precaución y alto nivel de sentido común para no quedarte sin imágenes.

En este otro artículo te explico un poco más detalladamente que archivos de imágenes adicionales se crean cada vez que subes una nueva imagen a tu biblioteca de medios de WordPress:

Más que utilizar plugins para estas cuestiones debes tener precaución en este tipo de tareas y sino optar por usar imágenes en la nube que ayudan a mantener tu espacio de disco en el Hosting más saneado:

 

Evitando la sobrescritura de imágenes existentes


Cuando subes una imagen a WordPress con el mismo nombre de archivo que una imagen ya existente, se cambiará el nombre del archivo para no anular la imagen actual.

Plugins como Overwrite Uploads omiten esta funcionalidad para que puedas sobrescribir fácilmente las imágenes antiguas.

El plugin Overwrite Uploads detecta nuevas subidas de imágenes con el mismo nombre de archivo de una imagen ya existente en Medios, y eliminará el original cargando el nuevo archivo sobrescribiendo el original.

Supongamos que tienes una imagen llamada “foto-de-la-boda.jpg” en tu WordPress pero tienes una versión actualizada de “foto-de-la-boda.jpg” que quieres usar para sustituir la actual.

Con Overwrite Uploads simplemente cargas la nueva imagen y se eliminará la versión anterior evitando imágenes duplicadas, triplicadas, quintuplicadas…. dependiendo de lo insistente que hayas sido y las veces que hayas querido probar la subida de la imagen hasta obtener la que más se adaptaba a lo deseado.

En WordPress de forma predeterminada tendrías que eliminar manualmente la versión anterior de la imagen antes de cargar la nueva.

plugin overwriteuploads imagenes

Haz clic en la imagen para ir al enlace del plugin

 

Algunos plugins para optimizar imágenes


Es cierto que existen muchos plugins para optimizar las imágenes que se utilizan en WordPress, principalmente las de la Biblioteca de Medios, y debo decir que algunos de estos plugins realmente hacen un buen trabajo, pero también es cierto que los que lo hacen muy bien suelen ser comerciales o tienen dependencia de un servicio externo, generalmente de un servicio de servidor de optimización, que suelen ser de pago y esto echa para atrás a muchos usuarios.

Citando algunos de los plugins más habituales:

  • EWWW Image Optimizer
  • WP Smush (Smush Image Compression and Optimization)
  • Imsanity
  • PB Responsive Images
  • Lazy Load
  • BJ Lazy Load
  • Hammy
  • Kraken Image Optimizer
  • ShortPixel Image Optimizer
  • Compress JPG & PNG Images (TinyPNG)
  • Optimus
  • JPG Optimization
  • PNG Optimization

Los niveles de optimización de estos plugins dependen de algunos factores, entre ellos que el servidor permita su ejecución, algo que en el caso de EWWW Image Optimizer es posible que ni siempre sea así en todos los Hostings, por razones de seguridad.

Estos niveles de mejora oscilan entre el 6,3% del peor de los plugins al 89% en los mejores casos para aquellos plugins más elaborados y con mejores recursos a nivel servidor para llevar a cabo las optimizaciones.

Y existe también OptimizadorIO, un plugin que ha irrumpido en el mundo de WordPress con ganas de ofrecer a todos los usuarios de WordPress del mundo una herramienta fácil de utilizar, rápida, que trabaja en segundo plano y que optimiza las imágenes “al vuelo” según se van añadiendo, a coste cero.

 

OptimizadorIO le herramienta de optimización de imágenes definitiva


En Webempresa trabajamos siempre pensando en el retorno a la comunidad y millones de usuarios que hacen uso de herramientas tan molonas como lo es WordPress, por lo que contribuir en forma de plugin es la mejor manera de devolver a la comunidad lo que el CMS nos aporta.

plugin optimizar imagenes webempresa

Este plugin, como ya te contaba al principio, nace fruto del éxito que ImageOptimizer tiene entre nuestros clientes y queríamos dar la oportunidad a todos los usuarios de WordPress around the world de disfrutar de la posibilidad de tener sus imágenes optimizadas GRATUITAMENTE y de para siempre en todas sus webs con este CMS.

Si no lo tienes claro, mira este vídeo en el que Cristina (Tina para l@s amig@s) explica los motivos que deberían impulsarte a empezar a usarlo.

 

Instalación del plugin Optimizador.io


En el siguiente vídeo puedes ver con que facilidad se instalar manualmente el plugin Optimizador.io qu de momento no se encuentra disponible en el Directorio Oficial de Plugins de WordPress.

 

Validación de tu correo para utilizar Optimizador.io


La validación del correo es un proceso muy sencillo que pasa por el registro de tu email y nombre personal o comercial en el siguiente formulario:

registro optimizador

Hecho esto verás el siguiente aviso en la misma pantalla donde has insertado el nombre y email:

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Vas a tu correo y revisas en la bandeja de entrada o en la de spam (cuentas Hotmail u otras que suelen tener esa mala costumbre) y validas haciendo clic en el enlace recibido.

correo registro

Te abrirá una nueva ventana/pestaña en tu navegador indicándote que ya se ha validado tu cuenta de correo, la cual podrás utilizar en tus instalaciones de WordPress (una o varias) para activar el plugin.

optimizar imagenes wordpress

Te logeas en WordPress, en la parte izquierda (menú del dashboard) accedes a optimizador.oi y en la pestaña Registro de API Key, en el campo 3. Configura tu email en el plugin añades el email con el que has validado tu cuenta y haces clic en el botón Validar correo para completar el proceso.

ipi optimizar imagenes

Como es de esperar habrás hecho bien todo el proceso y el resultado será que tu plugin optimizador.io estará validado y podrás ver el token asignado por la API Key del optimizador para que puedas empezar a utilizarlo.

guai para optimizar imagenes

Y eso es todo, ¡ahora toca darle caña!

 

Optimizando imágenes con Optimizador.io


En este vídeo David Noguera, Sysadmin en Webempresa y autor del plugin hace un rápido repaso al funcionamiento de Optimizaodor.io para que sepas cómo optimizar las imágenes de tu WordPress.

 

Preguntas Frecuentes sobre OptimizadorIO – FAQ’s


Estas son algunas de las consultas que habitualmente hacen los usuarios de Optimizador.oi y que pueden servirte de guía rápida para entender el funcionamiento y otros detalles de la herramienta.

¿Hay que registrarse cada vez que se instala el plugin?

El registro se realiza una sola vez, recibes un correo y confirmas el link, y luego en el plugin, una vez lo instalas, validas la API KEY poniendo tu email (con el que te has registrado) en el campo de validación.

Si por alguna razón pusiste mal el correo en el registro y no recibiste el email, no te preocupes, puedes utilizar otro email para registrarte.

Si por ejemplo era una cuenta de correo de Gmail puedes registrarte con usuario+1@gmail.com siendo +1 un Alias de la cuenta de correo usuario@gmail.com que te permitirá registrarte en Optimizador.io y recibirás igualmente el correo de registro en tu buzón aunque uses el alias.

¿Puedo utilizar el mismo email validado en varias webs?

Puedes usar la misma dirección de email para validar el API Key en tantos WordPress como administres, no imponemos restricciones en este sentido.

¿Cómo optimizar las imágenes existentes en la web?

Una vez instalas el plugin y lo validas (Api KEY que es el email con el que has registrado el plugin) puedes ir a la Biblioteca de Medios de la web a optimizar las imágenes y seleccionar las imágenes por páginas (bloques de paginación) y hacer clic en “Tareas por lotes”, Optimizar imágenes seleccionadas.

A partir de ese momento las imágenes seleccionadas pasarán a “Planificación” hasta que entren en la cola de optimización en el servidor que se encargue de aplicar la misma.

No es un proceso inmediato y puede tardar desde minutos hasta horas dependiendo de la carga de optimización que tengas asignada en cola, ya que son miles de usuarios los que usan el servicio a diario.

Cuando las imágenes aparecen marcadas como “Planificado” este es el proceso previo a que el servidor que se encarga de optimizarlas vaya colocándolas en cola de procesos para ir progresivamente haciendo la tarea.

A medida que Optimizador.io va procesando la cola de archivos estos se optimizan y verás paulatinamente como tus imágenes aparecen ya con el % de optimización aplicado.

La primera vez es un proceso más lento porque seguramente tendrás muchas imágenes, pero una vez las optimices, las nuevas que vayas subiendo se irán encolando en el optimizador de imágenes para que este las vaya optimizando progresivamente, siendo una tarea transparente y en segundo plano (al vuelo) que no consume recursos de tu Hosting ni afecta al funcionamiento de tu web.

¿Qué formatos de imágenes optimiza el plugin?

Los formatos que optimizador.io mejora son JPG y PNG exclusivamente. Otros formatos como TIFF (no recomendado para web) o webp no son optimizados por la herramienta.

Se centra específicamente en los formatos de imagen tradicionales que son los que habitualmente se utilizan en la Biblioteca de Medios o para Productos de WooCommerce y que suelen ser el 70% de uso ocupado en disco en instalaciones de WordPress.

optimizador.io no reduce el tamaño de una imagen en formato PDF o GIF, tampoco MP3/MP4 u otros formatos de vídeo.

¿Hay que seleccionar las imágenes que se suben para optimizarlas?

Una vez lo instalas tienes que añadir las imágenes (esto se hace solo la primera vez, luego las imágenes que vayas añadiendo a tu web se irán optimizando progresivamente) desde la Biblioteca de Medios.

optimizar imágenes por lotes

 

¿Puedo recuperar la versión anterior de una imagen optimizada?

Si es posible y lo puedes hacer desde tu Biblioteca de Medios, navega por las páginas de la misma y con la vista de listado (no rejilla) localiza la imagen que quieres restaurar a su estado anterior y verás un enlace llamado Ver backup de la imagen original.

Haz clic en ese enlace y se abrirá tu imagen en una pestaña nueva. Esta imagen será la versión anterior a la optimización, la cual podrás descargar a tu ordenador y subir nuevamente a la Biblioteca de Medios, teniendo en cuenta que optimizador.io podrá volver a optimizarla si la vuelve a detectar como no optimizada.

Esta opción solo está disponible si en la configuración del plugin activaste el checkbox llamado Backup imágenes originales en la pestaña Opciones.

Si optimizo las imágenes con ImgOptimizer tengo que volver a optimizarlas con Optimizador.io?

No es necesario ya que las imágenes previamente optimizadas, en algún momento anterior, con ImgOptmizer (Área de Cliente) quedan marcadas de forma que no son procesadas de nuevo en cada tarea posterior de mejora de las mismas.

Optimizador.io detectará que ya fueron optimizadas y no las modificará y en tu Biblioteca de medios, en la vista listado, verás que en la columna Optimización aparece la nota Optimizado con IMGOptimizer.

 

¿Es compatible con Multisitios de WordPress?

Actualmente el plugin de optimizador.io no es compatible con multisitios por lo que requiere ser instalado de forma individual para cada sitio si se desean optimizar las imágenes de cada una de las webs de la red de sitios.

 

Soluciones a algunos problemas con imágenes en WordPress


Existen muchos y variopintos casos en los que pueden surgir problemas con las imágenes de uso en WordPress, sean de Post o Páginas o de Productos de WooCommerce u otros plugins.

Saber lidiar con estos errores puede evitarnos quebraderos de cabeza y tener que recurrir a restaurar copias de seguridad anteriores al problema detectado.

La Biblioteca Medios en WordPress no muestra imágenes

Algo que puede suceder de repente en instalaciones con mucho tiempo funcionando, en las que de repente se añaden directivas o códigos en archivos como .htaccess para mejorar la carga, etc.

Accedes a Medios, y ves que en la vista rejilla (grid) no se ven imágenes y tampoco errores.

Desde tu cpanel (o el panel que uses de gestión de Hosting) con el Administrador de Archivos (o por FTP) edita el archivo .htaccess y localiza este código que suele ser la causa:

## Charset UTF-8
Header set Content-Type "text/html; charset=UTF-8"

Comenta el código o elimínalo y guarda los cambios en el archivo, luego verifica deslogueandote y volviendo a acceder al dashboard que en Medios, con la vista de rejilla ves las imágenes.

HTTP-ERROR al intentar subir imágenes a Medios

El origen del error “HTTP_ERROR” al intentar subir imágenes a Medios está causado por una incorrecta redirección del dominio de HTTP a HTTPS. Trabajar con https es a día de hoy una obligación a nivel de seguridad, de la misma forma que te recomendamos usar una vpn para conectarte a Internet o usar 2fa para tus accesos más importantes.

Cuando se activa SSL para un dominio es posible que de forma automática (depende del Hosting) o manualmente se inserte una redirección global (para todos los dominios) o como la siguiente:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://tudominio.com/$1 [R,L]

Lo ideal y correcto es que sustituyas esa redirección SSL por la siguiente:

RewriteEngine On
RewriteCond %{ENV:HTTPS} on [NC]
RewriteCond %{HTTP_HOST} ^tudominio.com$ [OR]
RewriteCond %{HTTP_HOST} ^www.tudominio.com$
RewriteRule ^(.*)$ http://tudominio.com/$1 [R=301,L,NE]

Después de esta corrección vuelve a logearte en WordPress y prueba a subir imágenes a la Biblioteca de Medios y comprueba si sigue fallando.

…hay otros errores que suelen presentarse en la Biblioteca de Medios o en el uso de imágenes en WordPress, pero de ellos es posible que te hable en otros artículos del Blog.

 

Conclusiones


La optimización de imágenes es tan importante como la cantidad de horas que dediques al diseño de tu web, pues de poco sirve tener una página bonita, llamativa y llena de contenidos si luego tarda una eternidad en cargar porque tus imágenes no están comprimidas.

Son muchos los factores que pueden afectar a los tiempos de carga de tu WordPress y el uso de imágenes de alta resolución es uno de ellos.

Si no quieres que la navegación por tu página para tus lectores o compradores sea una experiencia frustrante dedica tiempo a la mejora y optimización de las imágenes de tus productos o contenidos.

 

5/5 (1 Review)