¬Ņ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.

como convertir imagenes png jpg gif svg bmp diferencias formatos imagen

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.

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.

Existe un formato de imagen para cada específico

Aunque la mayoría de los navegadores no tienen problemas para mostrar ninguno de estos tipos archivos de imagen, algunos son más adecuados para ciertos usos que otros. Por ejemplo, mientras que los archivos .JPG son los más utilizados para mostrar imágenes fotorrealistas que se vena perfectos manteniendo un peso total del archivo los más bajo posible, los archivos GIF son un formato ampliamente compatible (y recomendable) con imágenes animadas y los archivos PNG tienen la capacidad de mantener la calidad completa en casi todos los casos.

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.

Por ello, quiero que eches un vistazo a esta gu√≠a que he preparado. Si te soy sincero, yo no ning√ļn gur√ļ del dise√Īo, pero tras muchos a√Īos dise√Īando sitios web propios y para¬†mis clientes, he adquirido una experiencia muy extensa en este tema (tristemente olvidado por muchos dise√Īadores web), que¬†va de la mano del SEO¬†y del WPO¬†(las im√°genes tambi√©n posicionan y hacen que un sitio web sea m√°s lento). Por lo tanto, te voy a desglosar cada uno de los formatos y te voy a mostrar sus puntos fuertes y d√©biles.

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.

Tabla comparativa entre im√°genes .PNG, .JPG, .GIF, .SVG

 Formato de imagen Categoría Paleta de colores Transparencia Animación Uso
diferencias formatos imagen jpg Lossy Millones de colores ‚ĚĆ ‚ĚĆ Im√°genes sin animaci√≥n
Fotografía
diferencias formatos imagen gif Lossless M√°ximo 256 colores Binario ‚úĒÔłŹ Animaciones simples
Gr√°ficos con colores planos
Gr√°ficos sin degradados
diferencias formatos imagen png 8 Lossless M√°ximo 256 colores ‚úĒÔłŹ ‚ĚĆ Uso similar al formato .GIF
Mejor transparecia pero sin animación
Es perfecto para iconos
diferencias formatos imagen png 24 Lossless Millones de colores ‚úĒÔłŹ ‚ĚĆ Uso similiar al formato .PNG-8
Imágenes sin animación y con transparencia
diferencias formatos imagen bmp Lossless Millones de colores ‚ĚĆ ‚ĚĆ Formato de imagen antiguo
No hay nada en lo que despunte
diferencias formatos imagen svg Vector/Lossless Millones de colores ‚úĒÔłŹ ‚ĚĆ Gr√°ficos y logotipos para p√°ginas web
Retina / pantallas de alta resolución
diferencias formatos imagen webp Lossy/Lossless Millones de colores ‚úĒÔłŹ ‚úĒÔłŹ Gr√°ficos y logotipos para p√°ginas web
Retina / pantallas de alta resolución

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.

Características, consejos y usos de los formatos de imagen más habituales

JPG (o JPEG): Características, consejos y usos del formato de imagen

Los formatos de imagen¬†.JPEG y .JPG son exactamente lo mismo, por lo que puedes referirte a ellas como prefieras (ambas son variaciones aceptadas del mismo acr√≥nimo).¬†A diferencia del .GIF, JPEG es un formato de 16 bits, lo que significa que puede combinar los colores rojo, azul y verde para mostrar millones de colores. Esto hace que JPG sea muy ¬ęamigable¬Ľ con casi cualquier imagen. Esto se debe, en parte, a que es un formato est√°ndar¬†y muy extendido usado por la mayor√≠a de las c√°maras digitales del mercado.

Además, el formato de imagen .JPEG ofrece mucha flexibilidad a la hora de elegir la compresión de las imágenes (desde 0% (compresión pesada) a 100% (sin compresión). Por lo general, un ajuste de compresión del 60% al 75% reducirá considerablemente el archivo mientras mantiene una calidad de imagen decente en la mayoría de pantallas.

Mientras JPEG es muy adecuado para comprimir y renderizar la fotograf√≠a, es un tipo de compresi√≥n con p√©rdidas (lossy), lo que significa que es menos √ļtil para ediciones en curso de las im√°genes. Exportar un archivo JPEG da lugar a una p√©rdida de calidad, y estas p√©rdidas empeoran con sucesivas exportaciones (como cuando haces una fotocopia de una fotocopia). Esta es la raz√≥n por la cual los fot√≥grafos profesionales suelen usar formatos sin p√©rdidas como¬†RAW.¬†Utiliza este formato para:

  • Im√°genes fijas
  • Fotograf√≠a en general
  • Im√°genes con colores complejos y din√°micos
  • Im√°genes las fichas de producto
Nota:¬†JPEG y JPG son perfectos a la hora de dise√Īar p√°ginas web, blog o tiendas online, ya que ocupan menos que los otros formatos, aunque no te permitan ¬ęjugar¬Ľ con transparencias¬†(fondo transparente).

GIF: Características, consejos y usos del formato de imagen

A menos que seas muy principiante en Internet, el mundo del dise√Īo web y los distintos formatos de imagen, es muy probable que ya est√©s familiarizado con uno de los formatos de imagen m√°s extendidos y usados: GIF (o¬†Graphics Interchange Format). El formato .GIF es un tipo de mapa de bits¬†pero, a diferencia de JPEG o PNG, los archivos GIF est√°n limitados a una paleta m√°xima de 256 colores.

Esencialmente, cada imagen GIF contiene un determinado n√ļmero de colores preestablecidos y no da la posibilidad de mezclarlos para crear nuevos colores (como si ocurre en otros formatos).¬†Aunque 256 puede sonar como un n√ļmero alto de colores con los que trabajar, algunas fotograf√≠as (m√°s complejas) pueden llegar a tener varios miles de tonos de color.

De hecho, esta gama de colores se pierde durante el proceso de conversi√≥n a .GIF (esta es una de las razones m√°s importantes para no utilizar GIF para fotos en color).¬†Mientras que GIF es una mala opci√≥n para im√°genes con amplia variaci√≥n de color, ese l√≠mite de 256 colores puede ayudar a mantener a raya el tama√Īo total de las im√°genes, que es ideal incluso para la conexi√≥n m√°s lenta de Internet. Durante muchos a√Īos, los archivos .GIF proporcionaron la √ļnica opci√≥n para guardar im√°genes con transparencia en Internet (aunque PNG y SVG tambi√©n lo ofrecen). Utiliza este formato para:

  • Animaciones sencillas
  • Iconos peque√Īo tama√Īo
  • Gr√°ficos con baja variaci√≥n de p√≠xel a p√≠xel
  • Im√°genes para las redes sociales
Nota: Es un formato de imagen perfecto para mostrar diferentes tipos de contenidos, ya que permite animaciones sencillas que son muy atractivas para los usuarios (se usa mucho para los famosos memes) en las plataformas sociales m√°s utilizadas.

PNG: Características, consejos y usos del formato de imagen

Un formato de archivo m√°s nuevo que GIF y JPEG, el PNG (Portable Network Graphics) es como un matrimonio entre el formato GIF y JPEG gracias a sus dos variantes.

PNG (o¬†Portable Network Graphics) es un formato de imagen mucho m√°s reciente que .GIF y .JPEG. Es imprescindible es dise√Īo web, teniendo mucho √©xito entre los desarrolladores de todo el mundo, gracias a su posibilidad de optimizaci√≥n sin p√©rdidas y la posibilidad de a√Īadir transparencias.¬†Este formato es como un matrimonio entre GIF y JPEG, gracias a sus dos variantes:

  • PNG-8: Este formato de imagen es similar a GIF, ya que utiliza la misma paleta de 256 colores (m√°ximo). Ofrece mejores opciones de transparencia y normalmente exporta un tama√Īo de archivo ligeramente menor. Eso s√≠, no tiene funci√≥n de animaci√≥n.
  • PNG-24: Este formato de imagen te permite procesar im√°genes con millones de colores, como JPEG, pero tambi√©n ofrece la capacidad de preservar la transparencia. Puesto que PNG-24 es un tipo formato de imagen¬†sin p√©rdidas, es probable que obtenga archivos de mayor tama√Īo, pero si la calidad de imagen es m√°s importante que el tama√Īo de archivo, PNG-24 es la mejor opci√≥n. Comparado con su primo JPEG, los archivos PNG-24 no son tan universalmente compatibles con todas las aplicaciones y plataformas, lo que hace que el formato sea menos ideal para aplicarlo en sitios web. Eso s√≠, es posible editarlo sin disminuir sus cualidades.

Es, sin lugar a dudas, uno de mis formatos de imagen favoritos, ya que te ofrece la posibilidad de variar y optimizar las imágenes una y otra vez sin perder calidad. Utiliza este formato para:

  • Gr√°ficos web que requieren transparencia
  • Fotograf√≠as y gr√°ficos con colores pesados ‚Äč‚Äčy complejos
  • Im√°genes que requieren reedici√≥n y reexportaci√≥n
  • Im√°genes web que necesiten mucha versatilidad
Nota:¬†Es un formato de imagen perfecto para dise√Īo web, ya que permite transparencias, por lo que puedes usar im√°genes en diferentes tipos de fondos (blancos y oscuros). Adem√°s, podr√°s ¬ęmaltratar¬Ľ las im√°genes sin perder un √°pice de calidad.

SVG: Características, consejos y usos del formato de imagen

A diferencia de los tres formatos de imagen mencionados anteriormente, SVG (o Scalable Vector Graphics) no es un formato de mapa de bits puro. En cambio, es un formato vectorial¬†(un primo cercano al formato de AI de Adobe Illustrator y EPS) que se est√° convirtiendo en una opci√≥n atractiva para todos los dise√Īadores y desarrolladores de p√°gina web y UI (user interface o interfaz de usuario).

A veces es √ļtil pensar en el formato SVG como el ¬ęHTML para ilustraciones¬Ľ y necesitas aplicarlo de manera muy diferente a otros formatos de imagen que he citado m√°s arriba. Este formato de imagen es el m√°s adecuado, por ejemplo, para mostrar logos, iconos, mapas, banderas y otros gr√°ficos creados en aplicaciones de gr√°ficos vectoriales como Illustrator, Sketch e Inkscape.

Desarrollado con un marcado basado en XML, los archivos SVG pueden ser editados en cualquier editor de texto y modificado por JavaScript o CSS. Como los vectores pueden ser escalados a cualquier tama√Īo mientras conservan la calidad de imagen n√≠tida, son ideales para el dise√Īo responsive.¬†Aunque SVG es un formato vectorial en su n√ļcleo, es posible (incluso com√ļn) incrustar gr√°ficos de mapa de bits dentro de archivos SVG (por ejemplo JPEG).

Esto se puede hacer enlazándolo a una imagen a través de una URL (como lo haces con tus imágenes JPG en tu sitio web) o encapsulando el pixel de la imagen como un esquema URI de datos. Esto brinda al SVG mucha flexibilidad y posibilidades. Los servicios online como WordPress, Flickr, Medio, Tumblr y Facebook convertirán (forzosamente) cualquier archivo SVG a otro formato o, más probablemente, bloqueen directamente su subida.

  • Logotipos e iconos con un dise√Īo amigable con los vectores
  • Gr√°ficos que necesites mostrar en varios tama√Īos y pantallas
  • Gr√°ficos que responden a cada dispositivo
  • Gr√°ficos que necesitan ser editados, actualizados y redistribuidos
Nota: Si utilizas SVG para dise√Īo web, encontrar√°s que casi siempre se puede reducir el tama√Īo del archivo en comparaci√≥n con JPEG o PNG. Pero ten en cuenta que cuanto m√°s complejo sea el SVG, mayor ser√° el archivo (tienden a ser archivos de gran tama√Īo).

Análisis y uso de los formatos .PNG, .JPG, .GIF y .SVG

Ahora que ya conoces las diferencias entre los formatos de imagen m√°s populares es hora de hacer un an√°lisis m√°s profundo con pruebas reales. Voy a mostrarte, con fotos y gr√°ficos, c√≥mo los formatos GIF, JPG, PNG y SVG se manejan con colores simples, complejos e im√°genes de fotograf√≠a a color. La idea es que veas la diferencia del resultado en cada uno de ellos y la diferencia en el tama√Īo final del archivo.

Nota: Ten en cuenta que las im√°genes las he guardado utilizando la opci√≥n ¬ęGuardar para Web y dispositivos¬Ľ de Photoshop con la configuraci√≥n de calidad m√°s alta.

Gr√°ficos planos de color

El primer tipo de imagen que voy a analizar son los gr√°ficos de color plano (flat color). Este tipo de imagen cubre la mayor√≠a de los logotipos, iconos, mapas simples, gr√°ficos y diagramas. La imagen original sobre la que he trabajado es un PNG de 23,4 KB con una dimensi√≥n de 1280 x 1280.¬†A continuaci√≥n podr√°s ver la diferencia en el tama√Īo de compresi√≥n, as√≠ como en la calidad de la imagen.

GIF: 17.6 KB

comparativa formatos imagen color plano gif

JPEG 100% (sin compresión): 14 KB

comparativa formatos imagen color plano jpg jpeg

JPEG 75%: 13 KB

comparativa formatos imagen color plano jpg jpeg

PNG-8: 11 KB

comparativa formatos imagen color plano png8

PNG-24: 19 KB

comparativa formatos imagen color plano png24

SVG: 6 KB (como un gr√°fico vectorial)

comparativa formatos imagen color plano svg

En este an√°lisis se extrae que no hay mucha p√©rdida de calidad cuando se comparan los diferentes formatos, aunque se notar√°n peque√Īos detalles cerca de los bordes de los archivos JPEG comprimidos. Esto no siempre es lo normal con los gr√°ficos de color plano pero, en la mayor√≠a de los casos, deber√≠as elegir la imagen menos pesada.

Nota:¬†Para esta imagen, asumiendo que tienes el archivo vectorial original, SVG es la elecci√≥n obvia¬†(6 KB). Si no tienes el vector original, la mejor opci√≥n es PNG-8, ya que disponemos de la misma calidad, pero el tama√Īo total pasa de 23.4 KB a 11 KB.

Im√°genes con colores complejos

En este caso la imagen original es una imagen JPEG de 328 KB con una dimensi√≥n de 1280 x 960. A continuaci√≥n podr√°s ver la diferencia en el tama√Īo de compresi√≥n, as√≠ como en la calidad de la imagen.¬†Como no dispon√≠a de un acceso a una versi√≥n vectorial de este archivo, cualquier versi√≥n SVG de esta imagen ser√≠a s√≥lo un JPEG incrustado dentro de un SVG (esto hace que sea un poco redundante, por lo que no voy a analizar el formato SVG en este caso).

GIF: 416 KB

comparativa formatos imagen colores complejos gif

JPEG 100% (sin compresión): 164 KB

comparativa formatos imagen colores complejos jpg jpeg

JPEG 75%: 155 KB

comparativa formatos imagen colores complejos jpg jpeg

PNG-8: 308 KB

comparativa formatos imagen colores complejos png8

PNG-24: 814 MB

comparativa formatos imagen colores complejos png24

Las im√°genes que tienen colores complejos tienden a verse mejor cuando se utiliza un formato JPEG, PNG-24 o SVG. Los colores se conservan (en su mayor parte) y no tienen bandas feas y el ruido que sueles obtener con formatos GIF y PNG-8.

Imágenes de fotografía a color

En este caso la imagen original es una imagen JPEG de 215 KB con una dimensi√≥n de 1280 x 701. A continuaci√≥n podr√°s ver la diferencia en el tama√Īo de compresi√≥n, as√≠ como en la calidad de la imagen.¬†Una vez m√°s, hay poco que hacer con el formato SVG (no tiene sentido), por lo que voy a obviar.

GIF: 453 KB

comparativa formatos imagen fotografia color gif

JPEG 100% (sin compresión): 91 KB

comparativa formatos imagen fotografia color jpg jpeg

JPEG 75% : 83 KB

comparativa formatos imagen fotografia color jpg jpeg

PNG-8: 362 KB

comparativa formatos imagen fotografia color png8

PNG-24: 1 MB

comparativa formatos imagen fotografia color png24

Al igual que con las imágenes de colores complejos, es mejor guardar este tipo de fotografías en los formatos JPEG, PNG-24 o SVG. El color se conserva en todos los formatos, aparte de las bandas y el ruido que se destacan en las sombras del cabello, la piel y el fondo, así como en la parte superior de la foto de los formatos GIF y PNG-8.

Cómo optimizar las imágenes de tu web y mejores herramientas

Ya tienes claro qu√© formato de imagen utilizar, pero ¬Ņ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 sitio web. Dicha optimizaci√≥n o compresi√≥n tiene varios matices que es mejor conocer.

Como te comentaba al inicio de esta gu√≠a, 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, para optimizar las imágenes debes conocer los diferentes formatos (esto ya lo sabes), consejos y una selección de herramientas para optimizar imágenes gratis, premium, online y de escritorio. Con este conocimiento podrás optimizar y comprimir las imágenes de tu sitio web, ahorrar ancho de banda y mejorar el rendimiento del sitio.

Mejores herramientas para optimizar im√°genes de tu sitio web

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 mejores 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
GRATIS/ B√ĀSICO ($3/MES) / PRO ($6/MES) / TEAM ($12/MES)

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
Herramientas para optimizar im√°genes
También te puede interesar esta guía
guia optimizacion imagenes consejos herramientas

¬ŅTe hayas parado a pensar la enorme cantidad de¬†tr√°fico¬†que te pueden traer las¬†im√°genes¬†desde los buscadores? Alguien busca un producto, un lugar, una receta, o una infograf√≠a en¬†Google¬†y ah√≠¬†deber√≠an aparecer¬†tus im√°genes.

Estoy seguro de que ahora te estar√°s preguntando ¬ŅOptimizo correctamente mis im√°genes?¬†, o de que incluso ya das por hecho de que no las optimizas (no te preocupes, es com√ļn). Por eso mismo te voy a mostrar en esta gu√≠a.

Ir a la guía

Ten claras las diferencias entre los diferentes formatos de imagen

Como habr√°s podido comprobar hay mucho que aprender en el tema de los formatos de imagen para cualquier dise√Īo y desarrollo web. Elegir una u otra puede ser la diferencia entre tener un sitio web con un buen rendimiento y otro lento y con una experiencia de usuario mala. Es cr√≠tico que te familiarices con todos estos t√©rminos, ya seas dise√Īador web o no.

¬°GIF ūüÜö PNG ūüÜö JPG ūüÜö SVG! ¬ŅQu√© Formato de Imagen Es Mejor y Por Qu√©? #MegaGu√≠a de los Formatos de Imagen para Tu #Web ūüĆź (+COMPARATIVA ūüďą) Haga clic para Tweet

¬ŅQu√© te ha parecido esta gu√≠a para entender los diferentes formatos de imagen?¬†¬Ņ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.

Esta guía también te puede interesar
mejores tutoriales guias cursos marketing online

Aparte de mi blog de marketing online, en Internet existen muchos otros blogs y página web donde se han redactado y publicado multitud de manuales, tutoriales y guías.

Por ello, he reunido los mejores contenidos publicados (por su calidad  y utilidad), donde podrás aprender sobre marketing digital, blogging, SEO, redes sociales, WordPress y mucho más.

Ir a la guía