Las imágenes son contenidos visuales muy importantes en nuestro contenido escrito, principalmente porque captan la atención del lector, reteniéndolo por más tiempo dentro de nuestra página. Pero también son fundamentales para que el lector pueda comprender mejor la información que está leyendo, además de teñir a nuestro sitio web de estilo y frescura.
Es un requisito tácito tener imágenes en nuestros contenidos y sitio web. Sin embargo, no basta con nada más tenerlas; subir las imágenes optimizadas es una acción SEO que debemos aplicar para poder gozar de muchos beneficios.
En este artículo aprenderás cómo optimizar una imagen para un blog, de manera sencilla y clara. Veremos cuáles son los elementos que debes manipular, las herramientas que puedes y deberías usar, así como también las aplicaciones móviles para hacerlo, de forma todavía más sencilla y desde el lugar donde te encuentres. ¡Empecemos!
Tabla de contenidos
¿Por qué debería comprimir las imágenes para una Web?
Son muchas las razones por las que deberías optimizar tus imágenes. Primero que nada, las imágenes son los elementos que más tardan en cargar en un página, porque son los elementos más pesados.
Al optimizar las imágenes consigues que su tiempo de carga sea más rápido en la pantalla del usuario. Seguido de esto, provocas una mejor experiencia para él, lo que es ideal para captar a potenciales clientes o lectores.
Pero además de eso, al optimizar las imágenes también reduces el tiempo de carga de la página web donde están publicadas, lo cual también se traduce en una mejor experiencia de usuario. Y otra cosa, ¿Sabías que muchas visitas en un blog suelen llegar a través de Google Imágenes? Es curioso, pero es cierto.
Por otro lado, Google posiciona mejor a las páginas con tiempos de carga muy pequeños, y en contraste, inclusive puede penalizar a aquellas que tardan demasiado en cargar. Así que lo mejor es no molestarlo y darle lo que quiere.
Sin duda alguna la optimización de imágenes es muy importante para un blog, no sólo en cuantoa SEO se refiere, sino también para brindarle una experiencia confortable al usuario, y así quede con ganas de volver por más.
Los 5 elementos que ayudan a optimizar y comprimir una imágen para una web o blog
Hasta ahora vamos genial, pues ya sabemos las ventajas que nos trae el optimizar las imágenes en nuestro blog. Así que no tienes que perder más tiempo; ve, busca tus fotos y comienza a… pero, un momento, ¿de qué manera puedes optimizarlas? Pues bueno, configurando 5 elementos imprescindibles: El formato, el tamaño, el peso, los metadatos, el nombre, y el título de la imagen.
Veamos de una vez por todas qué son todas esas cosas y cómo puedes configurarlas para optimizar una imagen en tu blog.
Elección del formato adecuado
En realidad, en cuanto a posicionamiento, ningún formato está en desventaja frente a otro, ya que tienen las mismas probabilidades de posicionarse muy bien. Lo que sí debemos saber es que cada formato influye directamente en la calidad y el peso de la imagen, por lo que una misma imagen puede tener pesos diferentes al estar en formatos diferentes; he ahí la importancia de escoger el adecuado.
SVG
Gráficos Vectoriales Escalables, en español. Este es un formato para gráficos vectoriales bidimensionales. Lo más resaltante de este formato es que cuando se redimensiona una imagen a cualquier tamaño, ésta no pierda calidad.
Debido a esa característica, es usado en blogs para logos, íconos, botones, etc. Aun así, no todo puede ser color de rosa, porque este formato es un archivo de código XML, por lo que puede burlar tu sistema de seguridad al poder tener códigos malignos dentro de las imágenes. Por este motivo, WordPress no lo recomienda ni lo aprueba, a no ser que uses el plugin “SVG Support”.
PNG
Por sus siglas: Portable Network Graphics. Lo más destacable de este formato es que tiene como base un algoritmo de compresión sin pérdidas, esto significa que la imagen puede ser guardada varias veces y manteniendo inalterable su calidad.
Quizás ya te has dado cuenta pero, algo por lo que se reconoce este formato es porque otorga transparencia en las imágenes. Pero algo bastante curioso es que PNG es compatible con las animaciones, tal cual como el formato GIF, pero sin embargo los navegadores no pueden procesarlo.
Lo que podemos decirte es que PNG es recomendado para logos, imágenes planas, capturas de pantalla, e imágenes sin fondo (lo que mencionamos sobre la transparencia).
JPG
Sus siglas indican: Joint Photographic Experts Group. Debes estar familiarizado con éste, pues es el formato habitual en los celulares y en las cámaras digitales. Está pensado para almacenar imágenes de alta resolución con muchos detalles. Puedes ver este formato también como: .jpeg y .jpg.
Es recomendado para fotos y para imágenes que tengan muchos detalles.
Lo que la distingue de las otras dos es que hace uso de la compresión con pérdidas. Sí, es como lo imaginas; mientras más comprimas la imagen, su calidad se irá perdiendo. Pero lo realmente favorable con JPG, es que podemos configurar el nivel de compresión de la imagen, con lo cual puedes inclinarte más por la velocidad de carga, o por la calidad de la imagen.
En fin, ¿Cuál debes escoger? Pues depende del tipo de imagen: Si es una imagen para el contenido, o para tu banner, o para otra sección del blog, deberías elegir siempre JPG. Si es una imagen que piensas usar como tu logo, o como ícono o botón, PNG es ideal.
Tamaño de la imagen
El tamaño de la imagen o resolución (lo cual es medido por la cantidad de píxeles de ancho y alto), es importante porque repercute en el peso de la misma. Es decir, una imagen de tamaño grande pesará más que esa misma imagen reescalada a un tamaño más pequeño.
Además, dependiendo del lugar donde quieras colocar la imagen en tu blog, necesitará tener uno u otro tamaño. Por ejemplo, es una mala idea que en un espacio en el cual la imagen debe tener una resolución pequeña, tú coloques una de resolución grande. La imagen sí podrá adaptarse sin problemas, pero eso hará que tarde demasiado tiempo en cargar. Es decir, es totalmente lo opuesto a optimizar.
Por lo tanto, tenemos que ajustar el tamaño de la imagen a la resolución que abarca el espacio donde la queremos colgar, véase: El encabezado de la página web, o la miniatura de tu artículo, o en el fondo de la página, etc.
La pregunta que nos surge ahora es “¿Y cómo diablos puedo saber qué tamaño tiene el lugar donde la quiero poner?”. Oye, no te preocupes. Vamos a aclarar eso.
Pues bien, para medir el espacio donde queremos colocar nuestra imagen en el sitio web, podemos utilizar la herramienta Page Ruler Redux, la cual es una extensión de Chrome.
Cómo reducir o ajustar el tamaño de una imagen
Para hacerlo, puedes recurrir a varias opciones, tanto a herramientas online como a programas. En cuanto a herramientas, puede usar iLoveIMG, la cual es totalmente gratuita. Pero si prefieres probar algún programa, Photoshop y Glimp son alternativas excelentes.
En cuanto a iLoveIMG.com, es sencillo. Veámoslo.
Cuando entres al sitio web, presionarás sobre la opción “Resize Image”. Una vez que ingreses, sólo tendrás que arrastrar la imagen que quieras hacia el centro. Ahora colocarás los valores que desees en cuanto a ancho y alto, aunque si modificas uno automáticamente la herramienta te escogerá el otro, pero para evitar esto simplemente quítale el check a la opción “Maintain aspect ratio”.
La herramienta tardará unos segundos para ajustar el tamaño, y luego te saldrá un botón azul para descargar la imagen en tu ordenador.
¡Listo! Ya le has cambiado el tamaño a tu imagen.
Te aconsejamos que continúes leyendo, porque más adelante explicaremos cómo usar Photoshop para cambiar el tamaño de la imagen, pero también para configurar los demás elementos.
Peso de la imagen
Como ya mencionamos, el peso está estrechamente ligado con el tamaño de la imagen. De hecho, si hiciste la prueba con la herramienta iLoveIMG, habrás notado que la versión de tu imagen que tiene un tamaño inferior a la original, también tiene un peso inferior.
Tenemos que reducir al mínimo el peso de nuestras imágenes para que éstas puedan cargar más rápido. Esto es muy beneficioso tanto para lectores que se encuentren en ordenadores, como también para los que están desde sus celulares inteligentes.
Inclusive, las imágenes con pesos muy pequeños favorecen más a los usuarios de dispositivos móviles (y que es la mayoría), ya que si éstos están haciendo uso de sus datos de navegación, estas imágenes no consumirán tantos datos, y en consecuencia cargarán más rápido y mejorarán la experiencia de usuario. Caso totalmente contrario si pesaran más.
Pues bien, reducir el peso de nuestras imágenes se conoce como compresión de imágenes, y hacerlo puede reducir su peso hasta en un 80%. Para esto también existen muchas herramientas online. Pero nuestra favorita es TinyPNG, no sólo porque es gratuita, sino porque además nos permite conservar en totalidad la calidad de la imagen, y con ello su tamaño.
Cómo comprimir una imagen
Veamos entonces cómo podemos comprimir una imagen para optimizarla, haciendo uso de TinyPNG. Y que en verdad es muy sencillo: Sólo basta con ingresar a la herramienta, arrastrar nuestra imagen al centro, la compresión demorará unos segundos, y luego de eso podremos descargar la imagen comprimida en nuestro ordenador.
También puedes usar la herramienta online y gratuita “Compressor.io”, el resultado obtenido es técnicamente igual al de TinyPNG; y lo mismo podemos afirmar sobre su uso.
Elimina los metadatos
¿Qué son los metadatos? Los metadatos no es más que la información que acompaña a la imagen. Es información que tiene detrás y que, aunque no lo creas, le da mayor peso a la instantánea. Al deshacernos de ellos alivianamos nuestro archivo. Ahora, ¿De qué forma puedes hacerlo? De muchas.
Puedes usar Paint, aunque te parezca gracioso. Sólo abre tu imagen con Paint, y luego guárdala en formato .jpg. Al guardarla, Paint los elimina. Pero sólo lo hace si la imagen está en PNG. Hazlo y comprueba cómo tu imagen redujo su peso.
Pero, si no quieres usar Paint, TinyPNG también los elimina automáticamente cuando comprime las imágenes.
Y si quieres otra alternativa, Photoshop es la indicada. Más adelante veremos cómo hacerlo, aunque te adelantamos que es realmente fácil.
Dale un nombre al archivo de la imagen
Antes de subir tu imagen a WordPress o a la plataforma que uses, primero tienes que cambiarle el nombre que tiene por defecto. No nos ayuda mucho a posicionar, pero sí es una pequeña forma de intentar decirle a Google qué es lo que contiene nuestra imagen.
Por ejemplo, las imágenes suelen tener nombres por defecto como “4300.jpg”. Si tu imagen es de, por ejemplo, una taza de café caliente sobre una mesa de madera al aire libre, debes quitarle ese nombre y ponerle algo como “Taza de café caliente.jpg”.
En realidad no hay más que decir, el tema es así de corto.Así que sigamos bajando que el tiempo es oro.
Escríbele un título a la imagen con la etiqueta Alt
Aunque estos dos elementos no tienen realmente tanta importancia al día de hoy, como sí lo tienen los otros, no está mal que los cuides. Y es que el uso de la etiqueta Alt es la manera en la que podemos decirle a Google qué es lo que contiene la imagen.
El nombre del archivo no nos sirve tanto para posicionamiento, pero la etiqueta Alt sí.
Continuando con el ejemplo anterior, en nuestro lenguaje HTML ubicamos esta etiqueta y escribimos “Taza de café caliente”. De esta forma le decimos a Google de qué se trata la imagen.
Y aquí tampoco hay más que decir al respecto, así que echémosle un ojo al uso de Photoshop para optimizar las imágenes.
Cómo optimizar una imagen usando Photoshop
Como lo prometido es deuda, es momento de explicar cómo puedes optimizar una imagen para un blog haciendo uso del Photoshop. Con este programa puedes ajustar el tamaño de la imagen, eliminar los metadatos, configurar la calidad, e incluso te muestra una aproximación del peso y del tiempo de carga de la imagen. Así que, sin más que hablar, veamos cómo usarlo.
Para cambiar el tamaño de la imagen debes hacer clic en la pestaña “Imagen”, y luego en “Tamaño de imagen…”. Y ahora se nos abrirá una ventana, en la que podemos apreciar los parámetros de altura y anchura. Lo que te queda es modificarlos según las dimensiones que tenga el lugar de la página web donde la colgarás (en el encabezado, de fondo, en un costado, etc).
Para poder configurar los otros elementos, debemos guardar nuestra imagen para web. Para eso damos clic en la pestaña “Archivo”, luego a “Exportar”, y luego a “Guardar para web (heredado)…”.
Al guardarla de este modo, antes descrito, la interfaz de edición cambiará alrededor de nuestra imagen. Los elementos que queremos estarán ahí en pantalla.
Para eliminar los metadatos, nos fijamos en la parte derecha de la pantalla, y encontraremos la palabra “Metadatos”. Al lado habrá una barra plegable, en la cual nosotros seleccionaremos “Ninguno”, para deshacernos de ellos. Y así es como triunfó el mal.
En la parte superior puedes cambiar el formato de la imagen. Recuerda, si no es un ícono o logo, siempre debes elegir “.jpg”; en caso de que sí lo sea, usas “PNG”.
Abajo del formato podrás ver la casilla “Progresivo”, esto es muy útil cuando está activada con el check, ya que hace que la imagen se cargue en varios pasos, lo que resulta en un gran mejoramiento en la velocidad de carga.
Por otra parte, como puedes ver, en esta misma interfaz también puedes editar el tamaño de la imagen. Y en la parte inferior izquierda de la pantalla, podrás ver una aproximación del peso que tendrá la imagen con las configuraciones que le estás dando, y a su vez el valor en segundos del tiempo que tarda en cargar.
Sencillo, ¿no lo crees? En cuestión de minutos puedes optimizar una imagen para tu blog, bien sea usando herramientas online, como también haciéndolo directamente con Photoshop.
Herramientas gratuitas para optimizar una imagen para un blog
En esta sección queremos juntarte, y resumirte, las herramientas que usamos a lo largo del artículo, pero también colocarte aquellas que sólo mencionamos.
TinyPNG: Comprime tus imágenes
Ya lo sabes, con TinyPNG puedes comprimir el peso de tus imágenes para que tengan un tiempo de carga realmente rápido. Esta herramienta es gratuita, sencilla, y envidiable en su totalidad. Además, ¿A quién no le caen bien los pandas?
Compressor.io: La alternativa a TinyPNG
Y no lo decimos de manera reprochable, sino que Compressor.io es perfecta como TinyPNG, tanto en lo fácil de manejar, como también en reducir el peso considerablemente.
Debemos resaltar una vez más que ambas herramientas conservan intacta la calidad de la imagen. Por lo que de verdad no se les puede pedir más.
iLoveIMG: Herramienta multitarea.
Con esta herramienta también puedes comprimir, pero no lo recomendamos porque por algún motivo le quita color a la imagen. Pero también puedes convertir a/desde .JPG, puedes cortarlas o también editarlas agregándole textos, stickers y otras cosillas.
Pero de momento la recomendamos para cambiar el tamaño de tus imágenes, como lo explicamos antes. Con esta herramienta puedes darle a tus imágenes el tamaño adecuado que necesitan para su futura ubicación en tu sitio web.
Desde luego, existen muchísimas otras herramientas, tanto gratuitas como de pago, pero estas cumplen con creces el objetivo de optimización. Es más, te invitamos a que nos dejes en los comentarios cuáles son las herramientas que usas, o también tus opiniones sobre las que nosotros recomendamos.
Las 6 mejores aplicaciones gratuitas para Android para optimizar una imagen
¿Qué? ¿Creíste que sólo podías modificar tus imágenes estando sentado delante de tu ordenador o portátil? Pues no. Haz leído bien, son aplicaciones que puedes descargar en tu Smartphone para poder optimizar tus imágenes sin importar dónde te encuentres.
XnConvert
Pues su nombre ya nos da una pista. Con esta fabulosa app puedes cambiar el formato de las imágenes entre “.jpg”, “.png”, pero también “.webp”. Este formato es mucho más moderno y tiene más relación con la plataforma WordPress (pero no es recomendado porque tiene poco soporte técnico). Es gratuita, pero con la versión Pro podemos decirle adiós a la publicidad.
Photo Reziser
Con esta app podemos cambiar el tamaño de las imágenes sin preocuparnos por perder calidad. Además que podemos hacerlo en lote, lo cual es bastante útil si tenemos mucho trabajo que hacer; con un botón podemos cambiarle el tamaño a un puñado de imágenes al mismo tiempo.
También nos deja comparar la imagen en un antes y después, sin mencionar que nos deja guardar las dos, tanto la original como la de nuevo tamaño. Pero eso no es todo, sino que además nos deja establecer tamaños predefinidos, cosa en verdad muy útil si de pronto nos encontramos trabajando con frecuencia con los mismos tamaños, como en el fondo de tus artículos y en el encabezado de alguna página, etc.
Photoczip – compress rize
Con esta aplicación también podremos cambiar el tamaño de las imágenes y convertir sus formatos de “.png” a “.jpg”, o si lo prefieres mantener sus formatos. Pareciera que no ofrece nada más, pero no es así.
Con esta increíble herramienta también podremos colocar marcas de agua a las instantáneas, y aquí viene lo mejor del cuento: Podemos comprimir las imágenes. ¡Sí! Ya sabes las ventajas que eso nos trae.
Tamaño de foto – Photo Resizer
Lo ventaja de esta aplicación es el poder modificar el tamaño de las fotos pero, sin alterar la relación de aspecto que la imagen ya tiene. Aunque también nos deja ajustarlo con total libertad. Si nos apetece nos podemos tomar una foto a través de la propia aplicación. Pero además tenemos la opción de compartir las fotos por correo electrónico y otros medios interesantes.
Foto Resizer
A Foto Resizer le faltan algunas funciones, pero para nada debe sentirse apenada, porque lo que nos ofrece también es bien agradecido. Y es que nos da la opción de ajustar el tamaño de la imagen a 4 tamaños preestablecidos. Tamaños que son habituales para contenido y plataformas web.
Y por otro lado, si tenemos una SD insertada en nuestro dispositivo, la aplicación guardará automáticamente las imágenes en ella.
Photo Compress 2.0 – Ad Free
Esta es una de las pocas aplicaciones más completas que existen para optimizar nuestras imágenes. Sin duda alguna es la que más nos ha encantado, pero déjanos decirte por qué, para que también te robe el corazón.
Con esta app podemos realizar diversas acciones en lote, con un máximo de 10 imágenes en éstos. Dentro de las acciones que podemos hacer encontramos el infaltable cambiar de tamaño, pero manteniendo la calidad de la imagen, ¿eh? Importante; y podemos mantener los formatos.
Pero ahora nombremos las herramientas que sólo tienen algunas aplicaciones mientras echan en falta otras, pero que en Photo Compress 2.0 tenemos a casi toda la familia reunida: Además de lo anterior citado, también podemos comprimir las imágenes, recortarlas y elegir el lugar de almacenamiento para las mismas. Que una aplicación nos deje cambiar de tamaño pero también comprimir, es realmente toda una maravilla.
En el párrafo anterior mencionamos “casi toda la familia” porque parece que se nos escapa la conversión de formatos… Pero bueno, no podemos pedir más. Recordemos que es gratuita, así que en realidad ya nos ofrece mucho.
Debemos decir que la diferencia con la versión de pago es que no hay un máximo de imágenes por lote; es en plenitud ilimitado. Y que además, contiene funciones extras, suena muy interesante, ¿no crees?
Pues eso ha sido todo por este artículo. Ya sabes cómo optimizar una imagen para un blog, así que ya puedes correr por tus imágenes, cambiarles el tamaño, comprimirlas, ponerles un nombre de archivo, un título con la etiqueta Alt, y así mejorar la optimización de todo tu sitio web.