# data[].attributes.body
Mario Velazquez
Gildardo Castro
Nomara Oropeza
Jose Angel Espinoza

# data[].attributes.body
Las imagenes son un elemento fundamental en el contenido de las redes

# data[].attributes.body
Hace referencia a las cuentas que las personas no siguen actualmente y que les pueden resultar interesantes.

# data[].attributes.body
Con las Tendencias Promocionadas, los usuarios ven tendencias de tiempo, de contexto y sensibles a los eventos promocionados por nuestros partners de publicidad.

# data[].attributes.body
Se utiliza para hacer que la gente utilizando la aplicación visiten el sitio y realicen alguna acción como por ejemplo realizar una compra

# data[].attributes.headline
Descargas e Interacciones de Aplicaciones

# data[].attributes.subject
Descargas e Interacciones de Aplicaciones

# data[].attributes.body
Se utiliza para promocionar la app y que gente que no tiene twitter la descargue

# data[].attributes.body
Se utiliza para que la mayor cantidad de gente posible visualicen los tuits

# data[].attributes.body
Se utuilizado para que muchas personas puedan ver contenido en forma de vídeos y gifs

# data[].attributes.attachment_link.readable_text
¿No sabes cómo reducir el peso de las imágenes de tu sitio web? Para conseguir una velocidad de carga óptima (y para hacer un test de la misma), uno de los factores de posicionamiento más importantes para Google, y una experiencia de usuario rápida, es crucial ponerse muy serios con el control de los tamaños y los pesos de las imágenes que muestras en tu pagina web, blog o tienda online. Dicha optimización o compresión tiene varios matices que es mejor conocer.

La compresión de las imágenes puede ser con pérdidas (o lossy) o sin pérdidas (o lossless). Las imágenes con pérdidas descartan la información del archivo original y las imágenes sin pérdidas conservan todos los datos originales (por lo que el tamaño del archivo suele ser más grande). Hay una variedad de algoritmos de compresión de imágenes que tienen diferentes enfoques para reducir eñ tamaño de los archivos y las siguientes herramientas utilizan algunos de ellos para reducir al mínimo el tamaño de tus imágenes.

Lo primero que "choca" en este tema es que hay existen diferentes tipos de archivos de imágenes que cumplen el mismo objetivo: mostrar una foto o imagen. Pero nada más lejos de la realidad, ya que cada uno cumple un cometido (mejor o peor) y es imprescindible saber cuál es el adecuado para tus necesidades y las de tu sitio web. Los archivos JPG (o JPEG), PNG y GIF suelen ser los más habituales en diseño web y los que encontrarás más a menudo, aunque existen más, como el SVG, y cada uno tiene sus fortalezas y debilidades.

Trate de lo que se trate, vas a tener todo cubierto con esta completa guía para optimizar imágenes, con los diferente formatos, consejos y una selección de herramientas para optimizar imágenes gratis, premium, online y de escritorio. Te va a ayudar a optimizar y comprimir las imágenes de tu sitio web, ahorrar ancho de banda y mejorar el rendimiento del sitio.

Formatos de imagen más habituales

¿ JPG? ¿ JPEG? ¿ PNG? ¿ GIF? ¿ SVG? ¿Te suenan estos formatos de imagen? Estoy seguro que, si eres propietario de una pagina web, blog o tienda online, cuando descargas las imágenes en bancos de imágenes gratis y premium, te surgen montones de dudas a la hora de elegir qué formato de imagen es mejor, cómo optimizarlas y qué herramientas existen en el mercado para facilitarte la vida.

Son muchas las preguntas que te vienen a la cabeza, ¿Cuál es la diferencia entre .JPG (o .JPEG) y .PNG? ¿Y entre .GIF y .JPG? ¿Y eso nuevo del .SVG? Por ello, y después de haberte explicado este tema en varias ocasiones en mi blog, quiero echar un nuevo vistazo a la situación de los formatos de imágenes para sitios web y ayudarte a elegir el formato idóneo y que mejor se adapte a tus necesidades.

Un formato de imagen normalmente encadena juntos varios algoritmos con pérdidas (lossy ) y sin pérdidas (lossless) para conceder ahorros de compresión. Hay multitud de formatos de imagen adoptados por los navegadores, cada uno con sus propias características y sus ventajas y desventajas en cuanto al rendimiento se refiere. Resumiendo, no hay una "talla única" para el formato web (en la actualidad).

Lossless ( sin pérdidas) es un tipo de compresión de imágenes que reduce el tamaño de un archivo sin perdida de calidad (no importa las veces que guardes u optimices la imagen, que la imagen se verá exactamente igual).

Lossy ( con pérdidas) es un tipo de compresión de imágenes que reduce el tamaño de un archivo con perdida de calidad (si guardas una imagen en un formato lossy una y otra vez, la calidad de la imagen empeora progresivamente).

Es posible que hayas oído en más de una ocasión el término " modo de color" o directamente hayas escuchado modo RGB, modo CMYK o incluso modo LAB. ¿Es así?, ¿te suena, aunque sólo sea un poco?, ¿o es como si te estuviese hablando en chino? No te preocupes, porque no es algo vital, pero nunca está de más aprender términos nuevos. Por ello, es importante que conozcas la diferencia entre colores indexados y directos:

Una imagen puede tener indexados un número limitado de colores (generalmente sólo puede almacenar 256), controlados directamente el autor, que crean el mapa de color.

Una imagen con colores directos puede almacenar varios miles de colores que no han sido elegidos directamente por el autor, por lo que siempre será una imagen más nítida.

Formato de imagen
Categoría Paleta de colores Transparencia Animación Uso

Lossless

Máximo 256 colores

Binario

Animaciones simples
Gráficos con colores planos
Gráficos sin degradados

Lossless

Máximo 256 colores

Uso similar al formato .GIF
Mejor transparecia pero sin animación
Es perfecto para iconos

PNG es un formato simple que soporta transparencia y compresión sin pérdidas. Permite definir un canal alfa para la imagen, para enmascarar las áreas transparentes, así como una opción para habilitar un compresor Deflate sin pérdidas de datos. (Deflate es una combinación de dos compresores sin pérdidas: LZ77 y Huffman). Dado que la compresión es sin pérdidas, la calidad de imagen sigue siendo idéntica a la imagen de origen. Sin embargo, esto causa algunos problemas, ya que el tamaño del archivo tiende a subir y no tan pequeño como debería ser.

GIF es otro formato que soporta Tabla , además de animaciones. El formato GIF contiene 2 etapas de compresión, un paso de paletización con pérdidas (restringiendo toda la imagen a sólo 256 colores), seguido por un compresor LZW sin pérdidas. El proceso de cuantificación de los colores de la imagen a sólo 256 proporciona una reducción de calidad muy alta en beneficio de un mejor tamaño de compresión, que tiende a producir una mejor compresión LZW. Colt McAnlis dice lo siguiente:

Los compresores más moderno consiguen un rendimiento mayor encadenando varios pasos de codificación a la vez. Una simple etapa puede modificar el flujo de datos de tal manera que las etapas posteriores pueden comprimir mejor que el flujo de datos en bruto. Los codificadores populares, como la cadena 7zip junto con el diccionario de codificación LZ, producen un conjunto reducido de símbolos que se pueden consumir de manera más eficiente mediante un algoritmo de cadena de Markov.

Si no necesitas ni transparencia ni animación, entonces JPG o JPEG es el formato de imagen ideal. Fue diseñado para manejar la compresión de datos de fotos de alta calidad, pero proporciona un conjunto configurable de opciones de compresión con pérdidas, lo que te permite intercambiar calidad de compresión o tamaño de la imagen, dependiendo de las necesidades.

Pero si lo que buscas es una solución única para el formato de tus imágenes, entonces deberías echar un vistazo a WebP. El formato no sólo cuenta con una calidad de compresión/tamaño superior, sino que también soporta transparencias y animaciones. Utiliza una combinación de compresiones sin pérdidas y con pérdidas y, al igual que el formato JPG, te permitirá definir el nivel de calidad o el tamaño del archivo.

Por supuesto, este nuevo formato de imagen no ha sido adoptado por todos los navegadores de momento, por lo que los desarrolladores web que lo han adoptado se encuentran actualmente en las primeras fases de trabajo solucionando problemas de usabilidad. Aunque con un 30% de ahorro más que el JPG, junto con una mayor adopción del servidor demuestra que WebP es un formato a tener en cuenta para el futuro del diseño de páginas web.

Consejos para optimizar imágenes

¿Te hayas parado a pensar la enorme cantidad de tráfico que te pueden traer las imágenes desde los buscadores? ¡En serio! Alguien busca un producto, un lugar, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes. No importa que el nuevo diseño del buscador reduzca la cantidad de visitas que puedes recibir, la oportunidad de ser visible y atraer tráfico siempre es interesante y jugosa.

Además, la búsqueda universal muestra imágenes en la página de resultados de forma combinada. Esto significa que no es necesario buscar una imagen para encontrarla, puedes aparecer en cualquier momento (sobretodo para ciertas búsquedas). Por todo ello, es importante que aprendas a optimizar tus imágenes para los buscadores (lo que también se conoce como SEO para imágenes).

Pese a que la tecnología para el reconocimiento de imágenes ha avanzado mucho, los buscadores siguen teniendo problemas para interpretar el contenido de las imágenes. A día de hoy pueden reconocer letras, colores, e incluso caras, pero poco más. Debido a ello necesitas usar el atributo Alt para describir tus imágenes.

No necesitas preocuparte por el código, ya que la mayoría de los gestores de contenido permiten añadir el texto a la etiqueta alt fácilmente.

El nombre de Alt viene de alternate text o texto alternativo, y es lo que utilizan los buscadores para saber qué es lo que muestra una imagen. También es el texto que se utiliza en lugar de la imagen cuando ésta no se puede cargar junto con el resto del contenido de la página. Supongamos que pones en tu web una selección de los mejores bancos de imágenes gratis. El código HTML de la etiqueta Alt sería "<img src="https://ignaciosantiago.com/wp-content/uploads/2017/10/bancos-imagenes-gratis.jpg" alt="Los mejores bancos de imágenes gratis" />". La clave para crear buenas etiquetas Alt es:

Lo que no puedes hacer es llamar al archivo de una imagen "foto.jpg" sin más. Este nombre genérico no trae ningún beneficio en los buscadores. Para hacerlo más descriptivo, debes meter palabras clave que describan esa imagen. Así, mediante un nombre más específico, tendrás más posibilidades en los rankings de resultados. Un buen nombre de archivo se caracteriza por:

Es muy importante que tus imágenes estén rodeadas de texto, y que ese texto esté relacionado con el contenido de la imagen. Con esto me refiero al pie de foto o leyenda, pero también el texto que hay encima y bajo la imagen, encabezados y título de la página (en la medida de lo posible).

Ten en cuenta que si el texto que envuelve la imagen no tiene nada que ver, la relevancia para el buscador será baja. Así que cuanto más estrecha sea la relación existente entre la imagen y el contexto en el que se encuentra, mejor.

Lo ideal es que el tamaño del archivo sea lo más pequeño posible. De esta forma las imágenes cargan rápido, y eso es algo que premian los buscadores. Pero el tamaño del archivo depende de 2 cosas:

[/fusion_checklist][/fusion_builder_column]

Si quieres una imagen de grandes dimensiones en un archivo pequeño, la calidad se verá afectada. Y si lo que quieres es una imagen de gran calidad, tendrás que reducir las dimensiones. Este compromiso hace del JPG el formato de imagen ideal para los buscadores, aunque puedes utilizar PNG y GIF si sirven mejor a tus propósitos. De modo que a la hora de preparar tus imágenes:

Utiliza JPG siempre que sea posible, ya que ampliamente aceptado por todos los navegadores.

Emplea las dimensiones exactas que necesites (no confíes la reducción de las dimensiones al CMS puesto que carga la imagen completa para luego redimensionarla).

La calidad JPG media es más que suficiente para cualquier sitio web, pero no te pases del 75% de optimización.

Por otro lado, puedes utilizar Skitch o SnagIt para capturar, recortar y reescalar imágenes. Esta herramienta hace un buen trabajo manteniendo la calidad en las imágenes, y además permite añadir anotaciones, formas y dibujos. Otra herramienta interesante y gratuita para trabajar con imágenes es GIMP. Más abajo te ofrezco muchas más, sigue leyendo.

Exif, o Exchangeable image file format, es una especificación que permite incluir varios tipos de metadatos dentro del archivo de imagen. Entre estos datos se incluyen detalles específicos de la toma, como la exposición, apertura, distancia focal, e incluso las coordenadas geográficas. Adicionalmente, también incluye datos como:

[/fusion_checklist][/fusion_builder_column]

Si bien los buscadores no utilizan los datos Exif como factor de peso actualmente, los datos sí que aparecen en las páginas donde se encuentran esas imágenes, lo que puede influir en la relevancia. Este el el caso de Flickr, como se comprueba aquí.

Es posible editar algunos datos y añadir información relevante sobre la imagen mediante las propiedades del archivo en Windows (botón derecho). Aunque si de verdad quieres experimentar, es mejor que uses una herramienta avanzada. PhotoME es una opción gratuita.

Un atributo poco conocido para imágenes es la descripción larga o longdesc. Como su nombre indica, sirve para incluir una descripción más larga que la que se puede incluir en la etiqueta Alt. La sintaxis para la descripción larga es:

Si te fijas, longdesc no incluye una descripción textual, sino la URL donde encontrarla. Ésta puede ser una página especialmente creada para incluir la descripción, o la propia página donde se incluye la imagen, pero eso no tiene mucho sentido. La verdad es que la descripción larga se utiliza muy poco o nada, pero he querido incluirla para que cuentes con toda la información posible.

Un aspecto esencial de la optimización de imágenes es la indexación. Las imágenes deben estar en el índice del buscador para aparecer en la búsqueda, pero si el buscador no encuentra tus archivos de imagen difícilmente podrá registrarlos. Hay una manera de aumentar las posibilidades de que tus imágenes sean indexadas, y es generando un sitemap específico para imágenes. Este archivo incluye la URL de cada imagen, pero también puede incorporar el título, la licencia y el pie de foto.

Mejores herramientas para optimizar imágenes

La mayoría de los desarrolladores se olvidan de que los optimizadores de imágenes optimizan un archivo en particular en vez de una imagen. Esto significa que no tiene sentido optimizar el archivo de una imagen y luego cambiarla de tamaño, recortarla o cambiarla a otro formato, ya que todos los cambios realizados en ese archivo no habrán valido de nada y las optimizaciones se habrán perdido por el camino. Veamos las herramientas:

No descuides el tamaño de las imágenes de tu web

Las imágenes son una gran parte de un sitio web y, a menudo (junto con el vídeo), la parte más visual y que más atrae. Pero esto no significa que, la imagen que descargas de un banco de imágenes gratis o de pago, la tengas que poner en 5.000×2.100px. Piénsalo, en navegador la va a mostrar, como mucho, en menos de la mitad, por lo que ten cuidado con el tamaño. Si a esto le sumamos su peso, entonces la cosa va a mayores.

No es lo mismo cargar una foto que pesa 1MB que una que pesa una décima parte. Por ello, y como consejo SEO, te invito a que uses estas herramientas y que optimices tus imágenes. Además, el usuario va a notarlo mucho, porque la velocidad de carga va a mejorar mucho. De hecho, las imágenes son un tipo de contenido delicado que, no solo puede aumentar la calidad y la percepción del usuario de tu sitio web, sino que también puede complementar tus esfuerzos para la velocidad de carga y el diseño responsive. Antes de hacer pública tu página web, asegúrate de optimizarlas sus imágenes y mejorar su compresión.

#MegGuia para Optimizar 🚀 las Imágenes 📷 de tu #Web: Formatos, Consejos y Herramientas Haga clic para Tweet

¿Qué te ha parecido esta guía para aprender a optimizar y comprimir las imágenes de tu web? ¿Crees que me he dejado algo? ¿Tienes alguna experiencia que quieres contar? ¿Te has quedado con alguna duda o pregunta? Entonces te pido es que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.

Soy muchas cosas, pero todo empezó como Blogger. Desde ahí he crecido como especialista en Marketing Online, aunque con mucha experiencia en Diseño Web, Blogging, SEO y WordPress. Ayudo a empresas y autónomos a crear, mejorar y potenciar su presencia y visibilidad en Internet, dándoles las herramientas que necesitan para tener un branding con una base muy fuerte, que inspire confianza y que genere ventas.

# data[].attributes.attachment_link.title
▷ ¿Cómo Optimizar las Imágenes Web? 7 Formatos y 20 Herramientas

# data[].attributes.attachment_link.description
¿No sabes cómo reducir el peso de las imágenes de tu sitio web? Para conseguir una velocidad de carga óptima (y para hacer un test de la misma), uno de los factores de posicionamiento más importantes para Google, y una experiencia de usuario rápida, es crucial ponerse muy serios con el control de los tamaños y los pesos de las imágenes que muestras en tu pagina web, blog o tienda online.

# data[].attributes.body
Fotografía de perfil: 400 x 400 px.
Imagen de portada: 1500 x 500 px.

Imagen compartida: 1024 x 512 px.

Twitter cards: 800 x 320 px.

Summary Card con fotografía: 280 x 150 px.

# data[].attributes.body
De seguidores. Como su nombre lo dice, se enfocan en conseguir seguidores

# data[].attributes.body
Las Cuentas Promocionadas ayudan a introducir una mayor variedad de cuentas que las personas podrían disfrutar.

# data[].attributes.body
aumentar los clientes potenciales mediante Lead Generation Cards

# data[].attributes.body
ofrecer cupones y rebajas en el texto de tus Tweets

# data[].attributes.body
Generar tráfico hacia el sitio web al solicitar a los usuarios que hagan clic en tu mejor contenido

# data[].attributes.body
Son Tweets comunes comprados por anunciantes que desean llegar a un grupo más amplio de usuarios

# data[].attributes.body
Mayor reconocimiento de la empresa.

# data[].attributes.body
Incremento de ventas

# data[].attributes.body
Es una herramienta de publicidad de Twitter que permite promocionar sus tuits y cuentas para conseguir más interacciones, seguidores y tráfico a un sitio web, que puede derivar en