Sin lugar a dudas, optimizar las imágenes es uno de los factores principales a tener en cuenta para mejorar la velocidad de carga de tu web. Además es un factor importantísimo de cara a obtener una buena experiencia de usuario en la misma.
Si bien son muchos los factores a tener en cuenta a la hora de mejorar la velocidad de carga de una web, en este artículo nos vamos a centrar en cómo optimizar las imágenes para conseguir el tamaño y peso ideal según el uso que le vayamos a dar.
También te puede resultar interesante ver cómo mejorar el posicionamiento de tu web y cómo mejorar el linkbuilding en la misma.
¿Por qué debes utilizar y optimizar las imágenes en tus posts?
Sin lugar a duda el motivo principal por el que has de utilizarlas es porque hace más cómoda la visión del artículo y no se hace tan frío y monótono el ver tan solo letras.
Además hay que tener en cuenta que consigues que el usuario permanezca más tiempo en la web, dado que le atrae como mínimo, a priori, las imágenes que puede ir disfrutando y el diseño utilizado. Pero no olvides que éstas no deben distraer al lector, del contenido.
Por ello, tener un blog optimizado en cuanto al peso y tamaño de las imágenes, mejorará la tasa de rebote de los usuarios.
Por otra parte, no podemos olvidarnos que las imágenes también pueden ayudarnos a conseguir visibilidad y posicionamiento mediante el uso del buscador de imágenes.
Luego es muy importante que rellenemos correctamente todos los campos de una imagen:
- Nombre del archivo asociado a la keyword principal o sinónima. Nos ayudará a mejorar nuestro posicionamiento en los buscadores.
- El título que identifique a que se refiere el contenido de la imagen.
- El campo alt, asociado a la keyword principal.
- La descripción, aunque mayoritariamente no se suele rellenar, es un campo que también puede ayudarnos a su posicionamiento SEO y a la mejor experiencia de usuario.
Factores a tener en cuenta cuando vayas a optimizar las imágenes
Lo primero que tenemos que tener en cuenta es que tamaño o dimensión tiene actualmente esa imagen y que peso, para saber a que tamaño debemos ajustarla en nuestro post, según nuestras necesidades.
Es muy habitual, dada la flexibilidad de WordPress, el subir una foto de un tamaño mayor al que necesitamos, para después ajustarlo a un tamaño que puede ser infinitamente mucho más pequeño. Con ello estamos ocupando mucho más espacio en nuestro hosting. Pensar en esos milisegundos que tarda más la web en cargar por un tamaño más grande del necesario.
El formato recomendado a utilizar para las imágenes ha de ser jpg o png. El formato jpg se debe utilizar habitualmente para imágenes con mucho colorido. Sin embargo el formato png se suele utilizar cuando hay fondos de transparencias o zonas muy amplias de colores planos.
A la hora de subir imágenes a un post, te recomendamos tengas en cuenta cual es el ancho de tu página. No tiene sentido subir imágenes con un ancho superior.
A modo de referencia, las imágenes grandes son aquellas que superan los 1024x 768 píxeles. Luego lo ideal es utilizar imágenes inferiores a ese tamaño, tratando de guardar una similitud en cuanto a sus dimensiones entre todas las existentes.
En cuanto a su peso, para el uso en una web, es suficiente con que no superen los 300 Kb.
Editores online para optimizar las imágenes
Son muchas las herramientas que puedes encontrar para editar online y optimizar las imágenes. Nosotros vamos a destacar tres:
1- Webresizer
Con un formato muy sencillo de uso, te permite además de cambiar la dimensión de la foto, otros usos como: recortar la imagen, rotarla, cambiar la imagen a blanco y negro o ajustar valores como el contraste y el brillo.
Otra herramienta online muy sencilla que presenta como principal ventaja que puedes optimizar a la vez y sin perder calidad 20 imágenes. En su versión free, con un peso máximo cada una de 5 Mb. En su versión de pago hasta un total de 25 Mb de peso total.
Además puedes descargar las imágenes en tu dropbox o descargarlas a tu ordenador.
Para mi, es la herramienta online que mejor comprensión realiza sin pérdida de calidad. Y la que suelo utilizar más habitualmente.
Presenta la desventaja de que no se pueden optimizar varias imágenes a la vez, pero te permite comprimir imágenes de hasta 10 Mb de peso.
Además de permitirte descargarlo en tu ordenador o en dropbox, lo puedes descargar también en Google Drive.
Plugins para optimizar las imágenes en WordPress
Si acudimos al repertorio de WordPress encontraremos muchos plugins que cumplen esta función. Nosotros te vamos a recomendar los tres quizás más conocidos:
1- Wp smash.it
Sin duda, es el plugin más conocido. En el momento que subes imágenes él solo las optimiza. Si instalas el plugin y ya tuvieses imágenes subidas, con acudir a ellas tendrás una opción que te permite optimizarla, o acudir a Medios y desde allí tendrás una opción para optimizarlas todas a la vez.
Otro plugin muy bueno y también de los más utilizados, con un funcionamiento similar al anterior con el que puedes optimizar las imágenes.
Este plugin, no cumple la función de optimizar el tamaño de las imágenes. Su funcionamiento hace que no cargue las imágenes hasta que el usuario ha hecho scroll hasta llegar a ella. De esta manera se optimiza mucho la velocidad de carga de la misma, conllevando una mejor experiencia para el usuario.
Conclusión
Habéis podido comprobar la grandísima importancia que tiene el optimizar correctamente las dimensiones y el peso de las imágenes, y como pueden afectar las mismas de manera importante a la velocidad de carga de la web. ¿Qué otras herramientas utilizas habitualmente? Estaremos encantados de leerte y si te ha gustado nuestro artículo te agradeceremos lo compartas en las redes sociales ?
Si te ha gustado este contenido te agradeceríamos nos votases 🙂
Juanjo Santana
Cofundador Enredia
Consultor de Marketing Digital y Social Media. Diseñador Web especializado en WordPress. Si quieres que tu empresa tenga presencia digital, te puedo ayudar.
Todas necesarias Juanjo.
Yo uso para optimizar las imágenes también Riot lucicrios y va muy bien y como plugin para reducir todavía más el peso internamente: Smush it pero por cierta incompatibilidad con Ewww image optimizer que sé que también hace una buena optimización.
Saludos 😉
Hola José!
La herramienta que mencionas no la conozco. Le echaremos un vistazo, siempre viene bien conocer otras opciones y ver lo eficaces que son. Nosotros antiguamente utilizábamos Smush It. Pero en aras a aligerar la web de tantos plugins, decidimos quitarlo y optimizar las imágenes antes de subirlas. También utilizamos Photoshop, pero no he querido hacer un listado muy extenso de herramientas interesantes, y por otra parte cada cierto tiempo utilizamos una herramienta que ofrece nuestro hosting Webempresa, y que nos permite aún más optimizar las mismas si lo considerase necesario.
Un abrazo y gracias por tu aportación 🙂
A la lista de plugins le añadiría Imagify. Da unos ratios de compresión muy buenos sin apenas perdida de calidad.
Hola Monty!
Muchas gracias por pasarte a comentar y por tu sugerencia. Sí, ese plugin también lo conocía,es de pago aunque tiene una opción free de 25 Mb por web, pero no he querido hacer un post súper extenso y me he limitado a comentar aquellas herramientas online y plugins con los que habitualmente trabajamos o hemos trabajado.
Un saludo! 😊
A mi la que me gusta mucho para optimizar imágenes es kraken.io. Tiene versión web y también tiene plugin para wordpress.
Hola David! Buen apunte, tomamos nota de esa herramienta y le echaremos un vistazo!:)
Un Abrazo!
Hola Juanjo,
Buen listado de herramientas, claro está que hay muchas más, pero las que mencionas creo que son las más conocidas, utilizadas y funcionales.
Yo por ejemplo entre Tinypng y Compressor.io voy alternando y las compresiones y optimizaciones que hacen ambas son más que aceptables.
Tal como dices en uno de tus comentarios, he instalado también el plugin gratuito optimizador.io que ofrece Webempresa, y la verdad es que he conseguido mejorar la velocidad de carga del Blog.
Un Saludo y con ganas de continuar leyéndote en la red 😉
Hola Manuel!
Muchas gracias por pasarte a comentar. Efectivamente, hay una gran variedad de herramientas, pero si observas, esas que se repiten más por algo será. Nosotros para la optimización de las imágenes también utilizamos un par de ellas, aunque casi siempre recurrimos a Photoshop.
Me alegro que hayas conseguido mejorar la velocidad de carga de tu blog y sí, este año hemos empezado más perezosos con el blog porque no nos da el tiempo para mucho más, pero habrá que sacar tiempo de donde sea para seguir publicando contenido 🙂
Un abrazo! 🙂
Hola Juanjo:
Enhorabuena por el post es muy útil para mejorar el tiempo de carga de nuestros blogs. Algunos servidores como webempresa te ofrecen un servicio de optimización de imágenes. Bajo tu punto de vista, ¿es suficiente o es mejor pasarlo por estos compresores antes?
Muchas gracias.
Hola Agus. Muchas gracias por pasarte a comentar y nos alegra te haya parecido útil.
En cuanto a la pregunta que realizas, si trabajas con Webempresa yo recomendaría que instalaras su plugin de optimización de imágenes, optimizador.io. Nosotros las imágenes las optimizamos siempre antes de subirla, pero observamos que a veces ese plugin las optimiza aún más y no afecta a la calidad de las mismas. Luego, bien porque te despistes y no la hayas optimizado antes o porque este plugin le de otro repaso, como es ligero, merece la pena tenerlo de apoyo.
Un saludo 🙂
Acabo de leer tu post vía Linkedin y está genial pero has de actualizarlo. Últimamente estoy utilizando Squoosh app. Es una herramienta hiper sencilla para reducir imágenes hacia los nuevos formatos que prioriza Google. Si la pruebas ya me comentas.
Saludos,
Hola Marcos. Muchas gracias por pasarte a comentar. El post no pretende recoger todas las herramientas de optimización que existen en el mercado. He pretendido mencionar aquellas que utilizamos habitualmente nosotros y por lo tanto recomendamos. La herramienta que mencionas, no la conocía. La probaremos. Muchas gracias por tu aporte!
Saludos.
bueno una pagina bien optimizada hace la diferencia a mil…
Así es. Además es la única forma de que Google te la posicione, entre otros muchos más factores a tener en cuenta.
Saludos.