¿Cómo Optimizar las Imágenes Web? 7 Formatos y 20 Herramientas

>>¿Cómo Optimizar las Imágenes Web? 7 Formatos y 20 Herramientas

¿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 webblog o tienda online. Dicha optimización o compresión tiene varios matices que es mejor conocer.

guia optimizacion imagenes consejos herramientas

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.

Índice

Formatos de imagen más habituales

como optimizar imagenes consejos herramientas png jpg gif svg bmp

¿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).

Los diferentes tipos de imágenes deben ser codificados en diferentes formatos dependiendo del tipo de imagen, la compatibilidad con el navegador y las necesidades del sitio web. Existen varias decisiones que un diseñador o desarrollador web tiene que tomar en cuanto a la elección de un formato de imagen:

  • ¿Necesita compresión la imagen?
  • ¿Necesita transparencia la imagen?
  • ¿Necesita animación la imagen?
  • ¿Necesita datos de alta calidad la imagen?

Tabla comparativa entre imágenes .PNG, .JPG, .GIF, .SVG

Antes de meterte de lleno en la comparativa entre los distintos formatos de imagen .PNG, .JPG, .GIF y .SVG, te sugiero que tengas algunos puntos claros. Para empezar, la diferencia entre Lossy (con pérdida) y Lossless (sin pérdida), unos términos que vas a leer mucho durante la guía y que no quiero que te bloqueen.

  • 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 imagenCategoríaPaleta de coloresTransparenciaAnimaciónUso
diferencias formatos imagen jpgLossyMillones de colores
Imágenes sin animación
Fotografía
diferencias formatos imagen gifLosslessMáximo 256 coloresBinario
Animaciones simples
Gráficos con colores planos
Gráficos sin degradados
diferencias formatos imagen png 8LosslessMáximo 256 colores
Uso similar al formato .GIF
Mejor transparecia pero sin animación
Es perfecto para iconos
diferencias formatos imagen png 24LosslessMillones de colores
Uso similiar al formato .PNG-8
Imágenes sin animación y con transparencia
diferencias formatos imagen bmpLosslessMillones de colores
Formato de imagen antiguo
No hay nada en lo que despunte
diferencias formatos imagen svgVector/LosslessMillones de colores
Gráficos y logotipos para páginas web
Retina / pantallas de alta resolución
diferencias formatos imagen webpLossy/LosslessMillones de colores
Gráficos y logotipos para páginas web
Retina / pantallas de alta resolución

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.
Chris Evans, Relaciones con Desarrolladores, Google

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.

Los archivos SVG, los más nuevos en este juego, permiten utilizar vectores en lugar de imágenes, para que las imágenes de tu sitio web no pierdan calidad en pantallas más grandes (o más pequeñas), evitando el típico (y horrible) pixelado. ¿Cuál es la idea detrás de esto? ¡Muy fácil! Piénsalo, cada vez demandamos más calidad HD en nuestras pantallas (ya sea laptop, smartphone, tablet, etc..), por lo que se necesita un formato ad-hoc a las nuevas tecnologías.

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).

Estoy seguro de que ahora te estarás preguntando ¿Optimizo correctamente mis imágenes de mi sitio web? , o de que incluso ya das por hecho que no las optimizas (no te preocupes, es común). Por eso mismo te voy a mostrar en esta guía paso a paso, para poder empezar a usar tus imágenes como una herramienta más de posicionamiento web. Vamos a ver todos los puntos de mejora de una imagen:

Atributo Alt (describe la imagen)

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:

  • Nombrar correctamente la imagen
  • Describir fielmente el contenido de la imagen
[/fusion_checklist][/fusion_builder_column]
  • Incluir la palabra clave principal en la imagen
  • Utilizar la descripción larga o longdesc

Nombre del archivo (corto y descriptivo)

El nombre del archivo es un indicador del contenido de la imagen. Piensa que una imagen llamada “tarta-de-chocolate.jpg” probablemente muestre una tarta de chocolate. Para optimizar el nombre debes intentar ser corto y descriptivo, y no es necesario que incluyas tanta información como en la etiqueta Alt.

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:

  • Representar el contenido de la imagen.
  • Incluir la palabra clave principal.
[/fusion_checklist][/fusion_builder_column]
  • Ser muy conciso (puedes excluir palabras vacías).
  • Utilizar guiones para separar palabras.

Contexto (rodea tus imágenes de texto)

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.

Tamaño del archivo (lo más pequeño posible)

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:

  • Las dimensiones de la imagen.
[/fusion_checklist][/fusion_builder_column]
  • La calidad de la imagen.

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.

Datos Exif (incluye todos los datos posibles)

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:

  • Título de la imagen
  • Descripción
  • Nombre y web del autor
[/fusion_checklist][/fusion_builder_column]
  • Copyright
  • Categorías
  • Otras etiquetas interesantes

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.

Descripción larga (cuanta más información mejor)

Un atributo poco conocido para imágenes es la descripción largalongdesc. 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:

<img src=”https://ignaciosantiago.com/wp-content/uploads/2017/10/bancos-imagenes-gratis.jpg” alt=”Los mejores bancos de imágenes gratis” longdesc=”http://example.com/acerca-de-los-bancos-de-imagenes” />

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.

Sitemap de imágenes (chiva a los buscadores tu estructura de imágenes)

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ágenesEste archivo incluye la URL de cada imagen, pero también puede incorporar el título, la licencia y el pie de foto.

Generar enlaces (enlazar la imagen desde otras páginas web)

Te adelanto que esta táctica es precisamente la más efectiva. Si quieres mejorar la visibilidad de tus imágenes no hay nada más simple y directo que conseguir enlaces. Sí, enlaces. Y no sólo hacia la página que contiene la imagen, sino hacia el propio archivo de imagen. Además, si utilizas palabras clave en el texto de enlace (anchor text) puedes mejorar el posicionamiento para esas búsquedas. Aunque no debes abusar de ello para no despertar las sospechas de los buscadores.

Mejores herramientas para optimizar imágenes

Siempre que sea posible, lo mejor es tratar de automatizar la optimización de imágenes. Para que tengas una pequeña ayuda, voy a compartir contigo algunas de las herramientas de optimización de imágenes que suelo usar. Como normal general, ejecuta los optimizadores con más perdidas primero y después los que tienen menos pérdidas, así mejorarás el rendimiento.

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:

CompressNow

mejores herramientas optimizar imagenes compressnow
Gratis

CompressNow es un servicio online gratuito que te permite subir imágenes desde su ordenador, elija un porcentaje de compresión y descargar la imagen optimizada. Es compatible con los formatos GIF, JPG y PNG. El servicio también permite al arrastrar y soltar múltiples imágenes desde tu ordenador, con una carga máxima de 10 imágenes y un tamaño de archivo individual máximo de 3MB.

Ir a Compressnow

FILEMinimizer Pictures

mejores herramientas optimizar imagenes balesio
Gratis

FILEminimizer Pictures te permite reducir el tamaño de las imágenes y fotos hasta en un 98% y es compatible con varios formatos de imágenes, incluyendo JPG, BMP, GIF, TIFF, PNG y EMF. Puedes optimizar tus imágenes y enviarlas por correo electrónico o subirlas a Facebook. Dispone de hasta 4 niveles de compresión diferentes y puedes elegir procesar un lote y decidir cómo manejar los datos EXIF.

Ir a Fileminimizer

GIFsicle

mejores herramientas optimizar imagenes gifsicle
Gratis

GIFSicle se trata de una herramienta potentísima para la edición y creación de ficheros GIF. Con una extensa colección de parámetros y opciones, GIFsicle permite crear GIF animados con todo tipo de flexibilidad, así como realizar optimizaciones para reducir su tamaño. Existe un plugin de GIFsicle para GIMP, que permite utilizar este programa junto al famoso editor open source.

Ir a Gifsicle

Image Optimizer

mejores herramientas optimizar imagenes imageoptimizer
Gratis

Image Optimizer te permite cambiar el tamaño, comprimir y optimizar tus imágenes y está disponible como servicio online gratuito, aplicación de escritorio libre o como actualización de pago para eliminar el texto promocional en la parte inferior de las imágenes optimizadas. Es muy sencilla de usar ya que te permite elegir la calidad de optimización, anchura máxima y altura máxima. Puedes comprimir las imágenes a granel y ver el progreso de la optimización.

Ir a Image Optimizer

 ImageMagick

mejores herramientas optimizar imagenes imagemagick
Gratis

ImageMagick es, probablemente, una de las suites de manipulación de imágenes más completas que exista en el mercado de este tipo de herramientas. Es muy conocida entre desarrolladores (de hecho, se utiliza en multitud de lenguajes), sin embargo, su potencia y cantidad de opciones, hace que sea complejo desarrollar una interfaz gráfica para controlar todos sus comandos. Existió hace algún tiempo un intento de interfaz para ImageMagick, llamada imGUI, pero parece estar abandonada.

Ir a Image Magick

 ImageOptim

mejores herramientas optimizar imagenes imageoptim
Gratis

ImageOptim optimiza las imágenes mediante la búsqueda de los mejores parámetros de compresión y la eliminación de datos innecesarios, como comentarios y perfiles de color. Maneja PNG, JPEG y GIF. También es fácil de usar; sólo tienes que arrastrar y soltar imágenes o carpetas en la ventana y se optimizan en el momento. También puedes soltar archivos sobre el icono del dock de ImageOptim, utilizar el menú en el Finder (en Mac) o lanzarlo desde un script de shell.

Ir a Image Optim

Image Optimizer

mejores herramientas optimizar imagenes imageoptimizer
Gratis

ImageOptim optimiza las imágenes buscando los mejores parámetros de compresión y la eliminación de datos innecesarios, como comentarios y perfiles de color. Maneja PNG, JPEG y GIF. Es fácil de usar; sólo tienes que arrastrar y soltar imágenes o carpetas en la ventana y se optimizan en el momento. También puedes soltar archivos sobre el icono del dock de ImageOptim, utilizar el menú en el Finder (en Mac) o lanzarlo desde un script de shell.

Ir a Image Optimizer

JPEG Optimizer

mejores herramientas optimizar imagenes jpgoptimizer
Gratis

JPEG Optimizer es una herramienta online gratuita para redimensionar y comprimir fotos e imágenes con el fin de reducir su ancho de banda y poder usarlas en blogs, foros y correos electrónicos. Basta con subir la imagen que quieras optimizar, seleccionar un nivel de compresión (0-99, con un valor por defecto de 65), elegir el ancho de la imagen (si quieres cambiar el tamaño de la imagen) y hacer click en “Optimize Photo”.

Ir a JPGOptimizer

JPEG Reducer

mejores herramientas optimizar imagenes jpgreducer
Gratis

JPEG Reducer reduce el tamaño de tus imágenes y fotos para que se puedan cargar más rápido y funciona mediante el uso de la compresión con pérdidas (lossy). Es tan bueno que puede que ni siquiera te des cuenta de que se han realizado cambios. Sólo tienes que subir tu imagen o introducir una dirección URL y hacer click en “Reduce It”. A continuación, podrás ver las imágenes y miniaturas comprimidas y hacer click en la imagen para guardarla.

Ir a JPGReducer

JPEG Mini

mejores herramientas optimizar imagenes jpgmini
Gratis y $19.99 para la versión de pago

JPEGmini te ayuda a reducir el tamaño de tus fotos hasta 5 veces, manteniendo la calidad original. Está disponible para Mac OS X y Windows como una aplicación de escritorio. Sólo tienes que elegir o arrastrar carpetas a la aplicación para que pueda optimizar cada imagen de forma automática. Ofrece un paquete de servidor que te permite reducir los costes de almacenamiento y ancho de banda.

Ir a JPGMini

PNG Gauntlet

mejores herramientas optimizar imagenes pnggauntlet
Gratis

PNG Gauntlet te permite optimizar los archivos PNG. Combina PNGOUT, OptiPNG y DeflOpt para crear el tamaño de archivo más pequeño posible, sin reducir la calidad de imagen.  Convierte los archivos JPG, GIF, TIFF y BMP a PNG, y ofrece barras de progreso individuales para cada archivo, destacando el archivo que se está comprimiendo, y una barra de estado para realizar un seguimiento de los bytes totales que te has ahorrado.

Ir a PNGGauntlet

PNG Optimizer

mejores herramientas optimizar imagenes pngoptimizer
Gratis

PNG Optimizer limpia tus archivos PNG de información inútil o errónea, reduce su peso y convierte PNG en otros formatos de imagen sin pérdidas, como BMP, GIF o TGA. También es compatible con archivos PNG animados y está disponible en Windows XP, Vista y 7. También puedes crear imágenes PNG dentro de una interfaz de usuario sencilla y productiva.

Ir a PNGOptimizer

PNGMonster

mejores herramientas optimizar imagenes pngmonster
Gratis

PNGMonster se define como un front-end que es capaz de comprimir un largo número de imágenes en formato PNG de forma automática en el menor tamaño posible, sin efectuar cambios visuales visibles. La aplicación utiliza los siguientes optimizadores externos: PNGRewrite, PNGCrush, OptiPNG, PNGout y AdvPNG.

Ir a PNGMonster

PunyPNG

mejores herramientas optimizar imagenes punypng
Prueba gratuita – Plan básico $3/mes (primer mes gratis) o $30/año – Plan Pro por $6/mes (primer mes gratis) o $65/año – Plan Team por $12/mes (primer mes gratis) o $125/año.

PunyPNG es una herramienta de compresión para imágenes para diseñadores y desarrolladores que ayuda a reducir el tamaño de tus imágenes sin pérdida de calidad. En primer lugar, analiza el contenido de la imagen y selecciona la mejor manera de optimizar la imagen, tanto la técnica con el formato a utilizar. Es compatible con los formatos más populares y, dependiendo del archivo, PunyPNG decidirá cómo convertir tu imagen para asegurar los mejores resultados posibles.

Ir a PunyPNG

Riot

mejores herramientas optimizar imagenes riot
Gratis

Riot (Radical Image Optimization Tool) es un programa gratuito para optimizar imágenes para las páginas web de manera eficiente. Incluye una interfaz fácil de usar para comparar el original con la imagen optimizada en tiempo real, por lo que se puede ver al instante el tamaño del archivo resultante. Es compatible con varios formatos y cuenta con optimización automática que selecciona el formato y los parámetros más adecuados.

Ir a Riot

Shrink O’Matic

mejores herramientas optimizar imagenes shrinkomatic
Gratis

Shrink O’Matic es una aplicación de Adobe AIR para cambiar el tamaño de imágenes, pudiendo manipular JPG, GIF y PNG. Arrastra y suelta de forma sencilla las imágenes en la aplicación y serán redimensionadas automáticamente. Personaliza la configuración y elige el tamaño de salida, rotación, nombre, ubicación, formato y marca de agua. Compatible con los datos EXIF para que no perder ninguna información una vez procesadas las imágenes.

Ir a Shrink O`Matic

Shrink Pictures

mejores herramientas optimizar imagenes shrinkpictures
Gratis

Shrink Pictures es otra herramienta que te permite cambiar el tamaño de las imágenes y elegir el nivel de compresión a aplicar, siendo compatible con JPG, GIF y PNG. Puedes seleccionar la dimensión máxima de la imagen, aplicar efectos especiales, y descargar las imágenes optimizadas rapidamente. Además, garantiza la privacidad mediante el uso de un script automatizado para eliminar alguna de las imágenes procesadas desde el servidor.

Ir a Shrink Pictures

Smush.it

mejores herramientas optimizar imagenes smushit
Gratis

Smush.it es un servicio online de la Red de Desarrolladores de Yahoo! para optimizar imágenes. Utiliza técnicas de compresión sin pérdidas, el tamaño de la imagen se reduce sin modificar su calidad visual. Es compatible con archivos JPEG, GIF y PNG con tamaños máximos de 1 MB. Podrás descargar las imágenes optimizadas desde una URL temporal, que tiene una validez de 30 minutos. Dispone también de un plugin de WordPress.

Ir a Smush.it

TinyPNG

mejores herramientas optimizar imagenes tinypng
Gratis

TinyPNG permite la compresión con pérdidas avanzadas de imágenes PNG. Conserva la transparencia alfa completa y reduce el tamaño del archivo al disminuir selectivamente el número de colores y de bytes en la imagen. El efecto es casi invisible, pero donde si se nota es en el tamaño del archivo. Coge los archivos PNG de 24 bits y los convierte en imágenes de 8 bits indexadas, eliminando todos los metadatos innecesarios.

Ir a TinyPNG

Trimage

mejores herramientas optimizar imagenes trimage
Gratis

Trimage es una herramienta multiplataforma para la optimización de archivos PNG y JPG utilizando OptiPNG, PNGCrush, AdvPNG or JPEGOptim, dependiendo del tipo de archivo. Las imágenes se comprimen sin pérdidas en los más altos niveles de compresión disponibles, eliminando los datos EXIF y otros metadatos. Está disponible para descargar en diversas plataformas, incluyendo Mac OS X, Windows y Linux.

Ir a Trimage

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.

¿Te ha gustado el contenido? Valóralo

 

También te puede interesar esta guía

lista suscriptores

¿Te hayas parado a pensar la importancia que tienen las imágenes en un sitio web? Alguien busca un producto, un lugar, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes.

Pero, ¿estás optimizando correctamente tus imágenes para que esto ocurra? En esta guía paso a paso te muestro cómo tener tus imágenes como una herramienta más de posicionamiento web.

Ir a la guía
2017-10-03T17:41:01+00:00

El autor del contenido es

Ignacio Santiago

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.

8 Comentarios

  1. zonavirtual 13/05/2017 en 06:22 - Responder

    Excelente post amigo muy buenas recomendaciones las usare en mis pagina web muchas gracias

  2. Johanna 17/07/2015 en 23:14 - Responder

    Excelente post Ignacio, me has dado varias opciones interesantes para optimizar las imágenes de mi web.

    Muchas gracias por la info!

  3. Coral 27/10/2014 en 13:52 - Responder

    Estupendo recopilatorio!! Algunas herramientas no las conocía, buscare algo de tiempo para poder probarlas.Gracias por compartir información valiosa y que nos ayudan a agilizar nuestro trabajo.

  4. ANGEL JOSE CUENCA PARDO 27/10/2014 en 09:00 - Responder

    Hola Ignacio:

    Muy interesante este post sobre la reducción del tamaño de las imágenes, cada vez más necesario con las que se manejan en los blogs, webs, redes sociales, etc… y parece que útiles con las aplicaciones que nos recomiendas.

    Yo cuando empecé a trabajar con imágenes fue en el año 92 (sí el de la Expo de Sevilla y las Olimpiadas de Barcelona). Aunque no soy un experto como tú, al no nacer ayer, ni antes de ayer, he sufrido en mis carnes prehistóricas en lo digital, la relación calidad-tamaño de las imágenes. Me parece recordar que los primeros archivos, o los más antiguos eran los BMP y TIFF. Los JPG llegaron después. Ahora vienen mis preguntas:
    -¿Es el formato PNG el ideal para insertar imágenes en alojamientos web, ya sean blogs, páginas web, redes sociales, etc…?

    -¿Cuál es el formato de por sí, en general, que ocupa menos espacio entre todos los que salen en este post: JPEG o JPG (ya no sé si lo mismo, TIFF, PNG, GIF….?

    Un cordial saludo

    ANGEL J. Q-EN-K

    • ignaciosantiago
      ignaciosantiago 04/11/2014 en 10:06 - Responder

      Hola Angel,

      Lo primero gracias por comentar. Para la web lo “ideal” es usar jpg. Pesa menos que el PNG. Puedes usar el PNg para el logo, pero optimizándolo al máximo.

¡Es tu turno! Opina y deja tu comentario

[index]
[index]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
Sígueme y te tendré bien informado