Optimizar imágenes de WordPress es una de las mejores formas de reducir el tiempo de carga de tu página web.
Muchos la consideran una opción más para optimizar WordPress al máximo.
Sin embargo, teniendo en cuenta que las imágenes son el contenido que más llama la atención a primera vista, no conviene prescindir de ellas.
Así que reducir el tamaño o comprimir fotos debería ser una obligación para todo aquel que tenga un sitio web o un blog.
Y no basta con subir la imagen con el tamaño por defecto y luego ajustar las dimensiones en la edición de la entrada o de la página, no. Así lo único que consigues es aumentar el peso de tu web.
Reducir el peso de una imagen tiene estas funcionalidades:
- Disminuir el tiempo de carga de tu web.
- Reducir el espacio ocupado en tu servidor.
- Optimizar el consumo de recursos de tu hosting.
- Mejorar la optimización Seo de tu WordPress.
Sí, como lo lees.
Al disminuir el tamaño de una foto o imagen el tiempo de carga de esta será menor; y esto Google lo ve con muy buenos ojos.
¡No te olvides de leer artículos sobre SEO para llegar a lo más alto en Google!
En definitiva, todo esto te permitirá optimizar la carga de WordPress y mejorar el SEO.
A estas alturas ya debes saber que Google se enamora de las webs más ligeras y que cargan más rápido así que prepárate para este artículo donde puedes ver todos los secretos para optimizar las imágenes de tu WordPress sin perder calidad.
Como este es un tema bastante amplio voy a centrarme en lo práctico para que tu web cargue a la velocidad de la luz:
- Reducir el tamaño de las imágenes antes de subirlas a WordPress
- Comprimir imágenes subidas con un plugin en WordPress
- Optimizar la carga de las imágenes publicadas para mejorar la velocidad de carga de una web.
Contenidos del Post
Cómo optimizar las imágenes antes de subirlas a WordPress
El tamaño de una imagen (las dimensiones) está directamente relacionado con el peso (los bytes) de esta.
Antes de realizar cualquier tipo de optimización de imágenes para blogs o webs, lo ideal es reducir el tamaño de una imagen para que encaje exactamente con los píxeles donde vaya a estar situada.
Me explico: en mi caso tengo definido que el ancho máximo del contenido de mis artículos sea de 700 píxeles, por lo tanto jamás subiré una imagen que tenga más.
Lógico, ¿no? De esta forma me ahorro unos cuantos bytes que no aportarían nada pero que sí serían perjudiciales para mi sitio web.
Otro punto importante es el tema del formato en el que subimos las fotos, imágenes, ilustraciones, etc. Siempre que puedas, escoge el .jpg o .jpeg por encima del formato .png.
A la hora de comprimir fotos antes de subirlas a WordPress puedes encontrarte con múltiples herramientas para reducir de tamaño o comprimir imágenes.
A continuación te muestro dos opciones perfectamente válidas para reducir el tamaño de una imagen (incluso puedes combinar ambas): de pago (con Photoshop) o herramientas online gratis para optimizar imágenes sin que pierdan calidad.
Cómo reducir el tamaño de una foto con Photoshop
Bajar el peso de una imagen con Photoshop es muy sencillo. Con solo disminuir el tamaño de la imagen (sus dimensiones) ya bajará su peso.
Tras abrir la imagen deseada dirígete a la opción Imagen > Tamaño de Imagen.
Asegúrate de tener marcada la casilla Restringir proporciones para conservar la misma forma de imagen.
Basta con seleccionar la anchura que deseas y verás cómo la altura se cambia directamente.
Además también conviene disminuir la resolución, yo la dejo en 72 píxeles/pulgada.
Con solo hacer esto, que no se tarda ni un minuto, habrás reducido el peso de una imagen más del 50%. La imagen de portada que utilizo en este artículo se ha reducido un 66% respecto a su tamaño original.
Si quieres optimizar imágenes para webs o blogs aún más te recomiendo la opción Archivo > Guardar para Web donde, tras seleccionar el formato y la calidad, tendrás una foto con un tamaño más reducido.
Imagina todo el espacio y el tiempo de carga que hubieras perdido si no hubieras perdido 30 segundos en hacer esto.
Si no tienes Photoshop siempre puedes recurrir al Paint de Windows aunque el nivel de reducción de tamaño de imagen será peor. Aquí tienes un vídeo que te explica cómo reducir el tamaño y peso a las fotos.
Las mejores herramientas gratis online para optimizar imágenes para WordPress
Hay infinidad de páginas web y aplicaciones donde puedes comprimir imágenes online de forma gratuita pero solo te voy a mostrar las 4 mejores herramientas gratuitas para reducir el peso de las imágenes y fotografías. Además te las voy a poner en orden de peor a mejor según el nivel de reducción que haya obtenido para una imagen de prueba.
Image Optimizer
Es una plataforma online para comprimir fotos o para reducir el tamaño de las imágenes de forma gratuita bastante conocida.
Con Image Optimizer puedes elegir el ancho y el alto máximo de la imagen y el nivel de optimización.
Esta es la que menor reducción de bytes me ha dado.
Webresizer
Esta herramienta online para reducir el tamaño de las fotos o para comprimir fotografías me ha dado mejores resultados que la anterior, además cuenta con utilidades extra como añadir bordes, cortar, cambiar el contraste, la saturación o el brillo, rotar la imagen, etc.
Antes de optimizar la imagen no te olvides de indicarle todos los parámetros que necesites en la parte inferior de la página.
Estate atento porque ahora llegan los 2 reyes en el servicio de optimización de imágenes en internet para nuestra web.
Tinypng
Tinypng es la aplicación online para reducir el tamaño de varias imágenes a la vez que más utilizo.
Te permite optimizar sin perder calidad hasta 20 fotografías a la vez de hasta 5 mb cada una. Una maravilla si tienes quieres reducir el peso de varias imágenes a la vez.
Puedes guardar tus imágenes optimizadas en Dropbox o descargarlas desde el navegador.
Con esta web he obtenido una reducción del 27% sobre una imagen optimizada con Photoshop.
Compressor.io
Y aquí llega la que para mí es la mejor herramienta online gratuita para optimizar imágenes sin perder calidad.
Si bien con esta herramienta solo puedes optimizar las imágenes de una en una, tiene dos ventajas que para mí son muy importantes:
- Reduce el tamaño de las imágenes (el peso) mejor que ninguna otra.
- Puedes optimizar fotografías de hasta 10 mb de peso.
También puedes descargar la imagen optimizada por Dropbox, desde el navegador, o guardarle en Google Drive.
Gracias a esta plataforma he podido reducir el tamaño de una imagen de prueba un 42% sobre la optimización previa que hice con Photoshop.
[thrive_leads id=’1399′]
Cómo comprimir imágenes subidas en WordPress
Ya has podido ver que optimizar imágenes para WordPress antes de subirlas es coser y cantar, así que déjate de escusas y hazlo (por tu propio bien).
La cosa no acaba aquí.
Cuando ya las tengas subidas podrás reducir el peso de las fotos aún más, e incluso cambiar sus dimensiones en píxeles.
Cambiar el tamaño de una imagen de WordPress sin plugins
Para reducir las dimensiones de una imagen sin plugins de WordPress tendrás que dirigirte a Medios > Biblioteca > Seleccionar tu imagen > Editar imagen.
Escribe las nuevas dimensiones, le das a Escalar y listo, ya podrás redimensionar imágenes sin perder calidad desde WordPress.
No obstante, esta opción no te la recomiendo.
La imagen redimensionada sí que será mejor que la original, sin embargo, la original no se borra, sino que se guarda en el servidor. Por lo tanto, aunque redimensiones una imagen, la original seguirá ocupando espacio en el servidor (aunque no influirá de manera directa en la velocidad de carga de la página web ya que la que publicarás será la imagen ya redimensionada).
Los mejores plugins para optimizar imágenes en WordPress
Hay muchos plugins WordPress para optimizar los tiempos de carga de tu sitio web. En cuanto a las imágenes, he probado muchísimos durante mi carrera como diseñador web con WordPress.
En este artículo te voy a recomendar dos aunque sin duda alguna mi favorito es el primero.
Plugin WP Smush
La opción que sí recomiendo es instalarte WP Smush que es un plugin para comprimir imágenes de Worpress que se encarga de la reducción del tamaño de las imágenes de forma automática.
Todas las imágenes que subas desde que tengas activado este plugin de reducción de imágenes se optimizarán sin hacer tú nada. También tiene una opción para optimizar las imágenes que ya tenías subidas antes de instalar el plugin.
Para optimizar al máximo tus imágenes convendría que utilizaras todos los pasos que te explico en este artículo.
Si solo utilizas este plugin como optimizador de imágenes, la cantidad de bytes ahorrados será mucho menor. No obstante, sigue siendo la mejor opción en cuanto a plugins para optimizar imágenes WordPress.
EWWW Image Optimizer
Este plugin es otro de los más utilizados a la hora de optimizar las imágenes de WordPress sin perder calidad.
Sus más de 400 000 descargas y su buena puntuación hacen de este plugin mi segunda opción.
Prácticamente permite hacer lo mismo que el plugin anterior, sin embargo, sí que he podido comprobar que el tamaño y peso de este plugin de optimización de imágenes es algo superior por lo que influirá un poco más en la carga de la web. Pero sigue siendo una opción buenísima.
Mi consejo es que pruebes los dos plugins y más que influirte por cuál es más pesado, déjate llevar por el que más fácil te hace la tarea de comprimir imágenes en WordPress sin afectar a la calidad.
Mejora la velocidad de carga de tu web: optimizando la carga de imágenes
Otro de los plugins para optimizar imágenes en WordPress es Lazy Load.
Aunque este plugin gratuito no modifica ninguna imagen, sí te ofrece dos cosas:
- Disminuye el tiempo de carga de la web.
- Crea un bonito efecto cuando se carga una imagen.
Lazy Load es un plugin que se encarga de cargar las imágenes cuando el lector hace llega a la parte de la página donde se debe mostrar la imagen.
Como no se cargan todas las imágenes a la vez, la velocidad de carga de la página web será mayor.
Bonus: Optimizar imágenes no lo es todo
Es importante recordar que la optimización de imágenes en WordPress solo es uno de muchos métodos para mejorar la velocidad de carga de una página web.
Para que el tiempo de carga de una web sea mínimo deberás seguir unas pautas además de la explicada en este post: contratar el mejor hosting para WordPress, tener un plugin de caché, tener un theme optimizado, usar un CDN como Cloudflare…
Además, el hosting que yo utilizo y recomiendo (Webempresa) cuenta con un servicio gratuito de optimización de imágenes en WordPress exclusivo para sus clientes que reduce el tamaño de las fotos que ya estén subidas a WordPress y no estén correctamente optimizadas. Yo lo utilizo a menudo y, a pesar de reducir el peso de las imágenes bastante, este servicio lo consigue aún más.
Utilizar todos estos métodos junto con la optimización de imágenes te garantiza la mayor rapidez en tu página web.
Y aquí termina el artículo de hoy.
Si quieres acelerar tu WordPress para que vaya como un rayo solo tienes que combinar todas las opciones de optimización de imágenes de WordPress que hemos visto en este artículo.
Te aseguro que muy difícilmente podrás comprimir imágenes en WordPress más de lo que este artículo te permite. Espero que lo hayas disfrutado.
A lo largo de este artículo hemos visto por qué es tan importante optimizar imágenes de WordPress tanto para el posicionamiento seo como para la velocidad de carga y el espacio ocupado en el servidor.
También te he enseñado dos plugins para optimizar imágenes para páginas web o blogs superesenciales que no pueden faltar en tu repertorio.
Y por si eso fuera poco, si querías saber cómo comprimir imágenes todavía más, te he mostrado las mejores 4 herramientas online para optimizar imágenes de WordPress de formá rápida y ¡gratuita!
Y si aún no sabes cómo descargar imágenes gratis sin derechos de autor te recomiendo este artículo con Los Mejores Bancos de Imágenes Gratis.
¿Crees que me he dejado alguna herramienta o plugin mejores de los que he puesto?
¿Qué haces tú para optimizar las imágenes de WordPress sin perder calidad?
Déjame un comentario y si te ha gustado compártelo con tus amigos.
¡Nos leemos!
Excelente artículo
¡Gracias Rigoberto!
Muchas gracias David, como siempre compartiendo articulos de calidad, ahora mismo los instalare en mi wordpress para mejorar la carga, saludos y muchos exitos.
Me alegro de que te guste!
Gracias por comentar.
Hola David una pregunta de novata. ¿para reducir el tamaño de las imágenes primero lo haces con photoshop y luego con una herramienta como Compressor.io? o con hacerlo en uno de los dos sitios ya vale…
Estoy creando un blog y el otro día empecé a reducir el tamaño de mis fotos con photoshop y me decepcioné un poco porque vi que perdían bastante calidad en comparación a las originales. Pero claro es que las originales pesan por lo menos 9mb…
Hola Tania.
Con utilizar una de las dos formas vale.
Yo lo que hago para reducir el tamaño de las imágenes es adaptar la resolución a 72 e introducir las medidas exactas que quiero para usarlas en la web.
En mi caso la calidad no se ve muy afectada. De todas formas puedes probar con las otras herramientas que recomiendo.
Un saludo y gracias por comentar!
Gracias!! Iré probando con distintas herramientas a ver cual me va mejor!
A ti, ya verás como sí.
Lo ideal es que todas las imágenes se queden por debajo de los 100 kb, y si puedes ser por debajo de los 50 kb mejor aún.
Muy buen artículo, mucha info que buscaba la encontré rápidamente y muy bien explicado.
Muchas gracias por compartir la información.
Nos leemos!
A ti por pasarte por aquí a comentar Sofía.
Ya veras cómo optimizas WordPress y mejoras la carga de tu web un montón con estos consejos.
Hola!
Excelente artículo, acabo de comenzar un proyecto por mi cuenta y pues estaba buscando herramientas para mejorar la velocidad de carga de mi web; sabía la importancia de comprimir las imágenes, pero desconocía qué herramientas utilizar para esto…Googleando abrí como 5 tabs, y entre todas ellas, me quede con esta.
La info está muy bien explicada y ordenada, además de que es sumamente digerible 🙂
Gracias por los datos, voy utilizar SMUSH para comprimir las que ya he subido, que no son muchas tampoco, y de ahora en adelante me quedo con Compressor 🙂
Gracias Sandra!
No veas cómo me alegra ver este tipo de comentarios.
Tu elección es muy buena. Ya verás cómo se reducen los tiempos de carga.
Por otro lado, en el blog tienes más información sobre esto. Seguro que te sirve.
Un abrazo!
Hola,
He instalado el plugin WP Super Cache y después de configurarlo he conseguido que mi página wp marche bastante más rápido.
No obstante, ahora cualquier modificación que realizo a través del dashboard, sobretodo cuando toco elementos de la barra lateral (widgets y demás), no aparecen los cambios en la web de forma instantánea (a veces incluso tengo que esperar un día entero para que aparezcan).
Suelo limpiar datos de navegación y cache en el navegador pero no resulta. No es esa exactamente la solución.
Esto claro no me pasaba antes de instalar el plugin y tiene pinta de ser un problema engorroso habitual.
¿Hay alguna manera de solucionarlo?
Muchas gracias de antemano.
Hola Paco,
eso que comentas es por la copia de caché que hace el plugin, no por el caché del navegador.
Si quieres ver los cambios nada más hacerlos tienes que borrar la caché del plugin y el problema se soluciona.
En algunas ocasiones (muy pocas) además de hacer eso conviene cerrar sesión en WordPress y cargar la página para ver los cambios.
Un saludo!
No me lo creo… eso era! Muchas gracias, David! 🙂
Excelente información, justo lo que estaba buscando.
Muchas gracias!
Hola,
Buen post, ordenado, claro y explicativo y fácil de entender, acabo de aplicar algunas de estas técnicas a una nueva web y me sale 80/100 en velocidad de carga, gracias por las indicaciones al redactor.
De nada Jesús,
Optimizar las imágenes es fundamental para mejorar el pagespeed de Google así que me alegro de que te haya sido de ayuda.
Hola!
Muy buen post, me ha sido de mucha ayuda.
Tengo una duda, he probado a reducir una foto usando Web Resizer (ya que me redujo más que compressor.io) y la imagen era originalmente de 6.41 MB, luego de reducirla me ha quedado en 168 kb. Creo que aun sigue siendo pesada. Porque además veo que recomiendas que no supere los 100 KB. Mi duda es si está bien subir esa imagen con ese tamaño a wordpress, 168KB y al subirla el plugin smush por ejemplo la va a reducir aún más pudiendo bajar de los 100 KB?
O tengo que reducirla aún más fuera de wordpress antes de subirla?
Sucede que se trata de fotos de paisajes por ejemplo sacadas con cámara Nikon que genera fotos muy pesadas.
Gracias!!!
Hola Celeste, también depende mucho de las medidas a las que la vayas a subir a tu WordPress, el plugin smush te baja el peso algo más pero ten en cuenta que en imágenes con mucho detalle como puede ser de paisajes con 168 kb la veo bien. Eso sí, si vas a poner varias imágenes en la misma página sí que te recomendaría reducirlas lo máximo posible para que la página cargue lo más rápido posible.
Un saludo y gracias por comentar!
Hola.
Gracias de antemano por tu artículo, pero tengo una inquietud que hasta el momento, no he podido resolver, y es que he probado varios plugins, para optimizar imágenes, pero luego de finalizar la tarea, cuando voy a mi tienda, y veo los productos de una categoría, todos y cada uno de los productos se ve en blanco, y solo hasta que paso el puntero del mouse, sobre dicho producto, es que me muestra la imagen, pero al quitar el puntero del producto, nuevamente la imagen desaparece y como repito, he probado con varios plugins. Estos son los plugins EWWW Image Optimizer, Regenerate Thumbnails y Smush Image Compression and Optimization y con todas ellas me pasa exactamente lo mismo. Que puede estar pasando?
De ante mano muchas gracias.
Hola Oscar,
está claro que el problema no es de los plugins sino de tu theme, de la caché o de algún conflicto con otro plugin. Si quieres puedes probar en un servidor local quitando plugins y demás pero si no quieres comerte mucho la cabeza te aconsejo utilizar las otras dos opciones para optimizar las imágenes y dejar las que ya tengas en WordPress como están o eliminarlas y volver a subirlas ya optimizadas.
Un saludo!
Estimado David:
Hace tiempo recibí un informe de Google diciendo que debía optimizar mis imágenes. Lo he hecho siguiendo tus indicaciones y cuando he vuelto a evaluar mi página el resultado es el mismo.
¿Podrías ayudarme?
Muchas Gracias de antemano. Un saludo.
Hola Paloma, puede ser que no hayas optimizado lo suficiente las imágenes o que no hayas optimizado todas las imágenes que Google te pide. Asegúrate de que todas las imágenes están justo en las medidas por las que se muestran en la web. Si no siempre puedes bajarte las imágenes optimizadas directamente tras poner tu página en Google pagespeed insights pero a veces falla. Te recomiendo visitar este artículo: https://www.bloggeris.com/google-pagespeed-insights/
Saludos!
Voy a probarlo ahora mismo, en mi nuevo site hace falta reducir el tamaño de las imágenes. Voy a instalar el plugin primero que comentas, pero necesito que las que están subidas las pueda también optimizar.
Gracias
Smush Pro y no veo diferencia la foto pesa igual
Prueba WP smush y si no te baja el peso es que ya no se puede optimizar más!
Saludos!
Muy buen artículo, estoy iniciándome en este mundo y la verdad es difícil conseguir explicaciones tan bien sintetizadas, no haré preguntas en esta ocasión ya que estoy empezando y tengo muuuuuchisimas interrogantes, ya que hice un curso, pero en investigación web y blogs he conseguido información mas útil y real, y SIN DUDA este blog se convertirá en un libro a consultar en muchos momentoS, gracias por tu GRAN APORTE, David.
Gracias por tu comentario Francys!
Saludos David excelente articulo, gracias por ayudar a muchos.
Yo tengo un problemilla con esto porque yo estoy alojado en Webempresa (mi hosting) ellos me ofrecieron gratuitamente un optimisador de imagen llamado optimizador.io, ahora yo tengo un tema wordpress que me recomienda este que usted comento EWWW Image Optimizer y le hice la pregunta a webempresa que cual era mejor y me recomendaron el de ellos porque ahorra recursos y al final me quedé con ese, aunque no he probado ningun otro alparecer te optimiza bastante bien y de forma automatica igual.
La diferencia en mi caso es que son mis clientes los que suben las fotos y como son ellos los que la suben no tengo el control , tengo el control ya cuando ellos la han puesto. he vistos imagenes grandisimas con mas de 5m y el optimisador me la deja en 2mega y las dimensiones superan los 4000 pixeles, ahora leyendo su post yo lo que hacia era editarla en wordpress pero no sabia que la foto original se quedaba tambien guardada y veia que se me llenaba muy rapido el hosting.
Ahora quiero que me aconseje en mi caso como puedo hacer para que mis clientes cuando suban foto exista un plugins que me ayude a reducir peso y tamanos de las fotos, la verdad que he buscado y no encuentro la forma, tal ves usted tenga algun metodo, quiero aclarar que yo tambien soy novato:)
Le agradeceria mucho sus consejos, hasta muy pronto
Hola Solanch, gracias por comentar.
La verdad que el plugin de webempresa está muy bien.
Igual encuentras alguna forma de limitar el tamaño de las imágenes que suben tus clientes. Ya sea con algún plugin o con algún campo que impida subir imágenes por ejemplo superiores a 2 MB.
De todas formas el plugin de webempresa no lo quitaría.
Otra opción bajarte todas las imágenes e irlas cortando tú una a una pero eso me parece inviable en tu caso.
No hay más opciones salvo esas que te dije.
Saludos!
Gracias por la información la pondré en practica ya que no tengo optimisada ninguna imagen
Hola David! Un artículo muy completo, , pero me queda una duda:
Hay que comprimir la imagen extenamente y luego de nuevo con el plugin de WordPress?
Hola Bárbara, para conseguir una mayor optimización es mejor hacerlo de las dos formas. Si no te importa optimizarlas un poco menos, con hacerlo con una de las dos formas vale.
Hola David,
Excelente artículo, conciso y muy informativo, gracias. También quería saber si me puedes resolver una duda que tengo y no he encontrado una respuesta que no haya probado y haya funcionado…
Soy asistente virtual y estoy colaborando con una emprendedora pero hemos tenido el problema que al subir la imagen a wordpress, en el blog pierde algo de nitidez y los colores se opacan un poco, inclusive el texto se ve algo «borroso».
Ella tiene instalados dos plugins, uno de ellos Force jpeg quality para mejorar la calidad de la imagen pero no ha funcionado a pesar que se comprimen las imágenes antes de subirlas a WP, muchas de ellas pesan menos de 100k siendo el tamaño de la imagen exactamente 560X315.
Me gustaría saber qué me podrías sugerir para que mi emprendedora esté satisfecha con la claridad y nitidez de las imágenes que publica.
Un abrazo,
Rose
Hola Rose,
La compresión de imágenes tiene el hándicap de que algunas veces se vea la imagen peor y esto es algo a tener en cuenta.
Mi consejo es que si necesitas una imagen de una calidad muy buena pruebes a subirla sin comprimir o en otros formatos como png o incluso convertirla en una imagen vectorial del formato svg.
Prueba con otros formatos y me cuentas qué tal ha ido.
Saludos!
Hola David:
Muy buen artículo! Me surge solo una duda con un problema que estoy teniendo en mi web y no consigo resolver. He estado utilizando Smush, y las imágenes en la web se ven perfectamente, tienen buena calidad y pesan poco… el problema es que en los resultados de búsqueda en google se ven muy borrosas (sobretodo en móvil). ¿Se te ocurre por qué podría estar pasando?
Gracias y un saludo!
Hola Sara, gracias por comentar.
Entiendo que te refieres a las imágenes que salen cuando tu web sale en un rich snippet al buscar un término en el buscador, verdad?
En ese caso no creo que se pueda hacer mucho ya que ha sido Google quien ha elegido esa imagen. Lo raro es que se vea mal en móvil pero en pc no tanto.
Si la imagen es la principal de tu artículo, y en tu web se ve bien, no creo que se pueda hacer algo más por tu parte.
Saludos!