Tutorial: Cómo elegir el formato correcto para comprimir imágenes en la web

ramonjosegn Seguir
Seguidores
11

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
Hola, en este tutorial espero sentar las bases para que puedas tomar la mejor decisión a la hora de comprimir tus imágenes para web.

En su momento he publicado varios tutoriales para usar programas para exportar para web y comprimir tus fotos

[TUTORIAL] COMPRIMIR CON RIOT
[TUTORIAL] COMPRIMIR CON RALPHA (mi favorito)
[TUTORIAL] COMPRIMIR CON ZONER PHOTO STUDIO
[TUTORIAL] COMPRIMIR CON MOZJEPG
[TUTORIAL] COMPRIMIR CON VARIEDROP

Con excepción del primero, RIOT, todos los demás programas van a depender de tus decisiones para obtener los mejores resultados y exportar al formato más adecuado, incluso RIOT no tiene una inteligencia artificial por lo que sus decisiones internas pueden llegar a ser erradas.

Pero entonces ¿cómo saber cuál es el formato adecuado o con mayor compresión?

Aunque no existen unas directrices "perfectas" sí es importante que tengas una idea "general" de qué escoger en qué momento.

Así que ahí vamos.

¿LO QUE VAS A PUBLICAR ES UNA FOTOGRAFÍA? Tu aliado es JPEG

Cuando hablamos de fotografía me refiero a una imagen tomada con una cámara, en la calle, en la playa, en el teatro, etc.

En este caso y para obtener la mejor compresión lo mejor es usar JPEG/JPG.

Te preguntarás porqué. No voy a entrar en los detalles técnicos pero entre otras técnicas JPEG lo que hace es cortar la imagen en una retícula de 8x8 píxeles y comprimir cada cuadradito con de 8x8 con varias técnicas. Cuando la compresión de una imagen es exagerada con JPG esos cuadrados comienzan a mostrarse ligeramente.

Entonces para imágenes de este tipo, tomas en la calle, interiores, la playa, un río, el cielo, etc, TE CONVIENE JPG

animal-1868911_640.jpg
dog-1861839_640.jpg
lasagna-1900529_640.jpg

Fíjate que cuando comprimimos una de estas imágenes a unos límites exagerados la retícula de 8x8 comienza a vislumbrarse.

lasagna-1900529_640-comp.jpg

Este es uno de los motivos por lo que se recomienda que las imágenes JPG tengan un tamaño múltiplo de 8 tanto de ancho como de alto, ya que así el algoritmo puede comprimir mejor las imágenes.

¿Adivinas? Formatos como 800x600, 1024x768 y otros estándar ¡son múltiplos de 8!




¿LO QUE VAS A PUBLICAR ES UNA LOGOTIPO, UNA BANDERA O UNA IMAGEN CON POCOS COLORES O COLORES PLANOS? Tu aliado es GIF

En este caso lo que te conviene es usar GIF.

GIF tiene la particularidad de que NO MANEJA DEGRADADOS DE COLORES (aunque puede simularlos), sino que maneja imágenes con colores "planos" de 256 colores máximo y una canal de transparencia.

También permite varios cuadros, por lo que puede ser usado para animaciones.

Entonces para imágenes de este tipo

banderas-del-mundo.jpg

chto-takoe-logotip.jpg

amor-16.gif

Fíjate que en este tipo de imágenes uno puedo decir "esta parte es roja, esta otra es azul, esta otra es rosada" mientras que con jpg estás viendo millones de colores en la imagen mezclados.




¿LO QUE VAS A PUBLICAR ES UNA IMAGEN CON TRANSPARENCIA SUAVE ALREDEDOR? Tu aliado es PNG

PNG es un tipo de formato que usa por decirlo de alguna forma, buenas cosas de JPG (soporta millones de colores) y también opciones de GIF como las transparencias.

Sin embargo las transparencias de GIF no son suaves. Así que PNG es la opción cuando quieres hacer una imagen con transparencia suave o una animación con miles de colores (APNG un formato todavía no muy soportado).

Y te preguntarás ¿y por qué no usarlo para todo?

PNG tiene un problema que todavía no se ha podido resolver, el tamaño de las imágenes SUELE SER BASTANTE GRANDE en comparación con GIF y JPG bien elegidos claro.

Sin embargo en algunos casos PNG puede ser la solución

- cuando necesites imágenes con bordes suaves transparentes
- cuando necesites imágenes pequeñas con miles de colores (aquí tendrás que probar a ver cuál se comprime mejor, si jpg o png).
- cuando necesites animaciones con miles de colores

Entonces para este tipo de imágenes te conviene PNG

bubble-transparent-background-png-see-through-460x345.jpg


KdGwJ.jpg





Espero que este tutorial básico haya despejado un poco de luz en este tema.

Sé que algunos usuarios/as no tienen quizás conocimientos de diseño, y a veces tienen este tipo de dudas.

Por supuesto en ocasiones esta "teoría" puede no funcionar. He visto como imágenes planas se comprimen mejor con JPEG y viceversa. A veces es cuestión de probar, pero creo que tener una base de porqué estás escogiendo un formato u otro tiene su importancia.

Cualquier dudo me comentáis por favor y trataré de responderos.
 
Última edición:

j4iber

Zeta
SEO
Verificación en dos pasos desactivada
Desde
26 Nov 2013
Mensajes
1.553
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Buen tutorial, gracias por compartir.
 

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
Gracias a ti por revisarlo y pasar a comentar. Espero que no sea muy pesado de leer, sino trataré de resumirlo un poco más [MENTION=51067]j4iber[/MENTION]
 

Squall990

1
Lambda
Redactor
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Suscripción a IA
Desde
12 Dic 2015
Mensajes
2.958
excelente tuto, gracias por tu aporte :encouragement:
 

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
excelente tuto, gracias por tu aporte :encouragement:

Me alegro que te haya gustado, aunque comprimir imágenes no es una ciencia "exacta" pues depende de muchos factores, espero que el tutorial sirva de guía al menos de base.
 

AdrianRobert

Gamma
Verificación en dos pasos activada
Desde
30 Dic 2016
Mensajes
155
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Me encanta ! yo esto estudiando illustrator . quiero aprender hacer logos y diseño hecho con este material .junto con fotoshop
 

piano

Kappa
Verificación en dos pasos desactivada
Desde
6 May 2013
Mensajes
2.532
Buen aporte compañero. Muchas gracias.

Yo uso jpegmini para comprimir mis imágenes jpg online: ( JPEGmini - Your Photos on a Diet! )
Es muy sencillo, no puedes variar la tasa de compresión pero da buenos resultados. Dependiendo de la foto te reduce el peso 4 o 5 veces sin un descenso apreciable de la calidad. Además, en su versión gratuita también te permite subir imágenes en lote y comprimirlas ( hasta 400 de una vez creo que es) por lo que es muy cómodo para bajar completa la carpeta de imágenes de una web, comprimirlas y luego renombrarlas en lote y subirlas otra vez.
 

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
Gracias por el aporte [MENTION=43537]piano[/MENTION]

Igualmente JPEGmini sólo comprime JPEG y como dices con la mínima pérdida visual, algo que está bien para sitios que manejan por ejemplo portafolios de fotografías, pero en muchos casos toca buscar el equilibrio entre peso y calidad. MozJPEG está todavía en pañales en cuanto a software pero me parece una opción muy interesante ya que consigue unas compresiones bastante elevadas.

En último caso se puede optar por usar webP, pero la verdad es que he tratado de manejarlo y termina siendo un dolor de cabeza. Algunos sitios como Facebook o Youtube parece que lo usan para miniaturas pero realmente su implementación en WordPress deja mucho que desear...

- - - Actualizado - - -

Tema muy interesante para leer, muchas gracias. Lo recomiendo

Gracias por recomendar mi hilo. Y gracias por pasar, revisarlo y comentar.

- - - Actualizado - - -

Me encanta ! yo esto estudiando illustrator . quiero aprender hacer logos y diseño hecho con este material .junto con fotoshop

En ese caso seguramente lo que te conviene es exportar en formato PNG para no perder colores y conseguir la mayor calidad.

Para web también puedes usar un formato vectorial que se llama SVG, la WikiPedia lo usa en muchos de sus gráficos cuando necesitan mostrar gráficas de tipo vector.
 

asal

Beta
Verificación en dos pasos desactivada
Desde
11 Jun 2013
Mensajes
146
Excelente. Muy bien hecho y entendible.

Enviado desde mi LG-K430 mediante Tapatalk
 

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
Gracias por pasar a comentar [MENTION=44653]asal[/MENTION] - me alegro que te haya gustado. Si tenéis cualquier consulta con gusto trataré de responderla, hasta donde mis conocimientos alcancen.

Por otro lado insisto en que mi favorito para comprimir/escalar es Ralpha, la verdad es que ese software es una maravilla, ojalá lo actualicen...
 

AdrianRobert

Gamma
Verificación en dos pasos activada
Desde
30 Dic 2016
Mensajes
155
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
oye una pregunta donde encuentro el programa ese bueno no se si es un programa .. para trabajar llutrator es asi . donde lo encuentro? Screenshot by Lightshot
 

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432

AdrianRobert

Gamma
Verificación en dos pasos activada
Desde
30 Dic 2016
Mensajes
155
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Mmm ok gracias
 

bison

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 May 2016
Mensajes
43
En caso si vas a subir una imagen a una fanpage, es mejor usar png, así no te lo comprime como lo hace con los jpg.

Y el jpg cada vez que los vas guardando se re-comprime denuevo haciendo que poco a poco vaya perdiendo calidad cada exportación.
En el png no sucede eso, puedes re-guardarlo y no pierde calidad. Lo malo del png es que pesa más y va tardar en subirlo y visualizarlo.
 

balances

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
21 Ago 2014
Mensajes
196

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
Gracias por el aporte [MENTION=162737]bison[/MENTION] - no quería entrar en tanto detalle pues es un tema que da para largo y tendido (incluso podríamos hablar de la fragmentación de rejilla de 8x8 que usa jpg y por eso es recomendable usar múltiples de 8 en las imágenes o del tipo de subsampling recomendado según la imagen...) pero la idea es que los usuarios vayan conociendo al menos las nociones básicas para preparar sus imágenes por lo que te agradezco tu aporte.
 

carloslds16

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 Jul 2015
Mensajes
527

zakneifian

Verificación en dos pasos desactivada
Desde
17 Dic 2015
Mensajes
0
Excelente aporte, no había caído en la obviedad de por qué se degenera extremadamente una foto JPG tras compartirla mucho hasta ahora, las retículas se van haciendo mas notorias.
 

ramonjosegn

Sigma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
69.432
Excelente aporte, no había caído en la obviedad de por qué se degenera extremadamente una foto JPG tras compartirla mucho hasta ahora, las retículas se van haciendo mas notorias.

A medida que las imágenes se comprimen en formato jpeg la retícula de 8x8 píxeles se va marcando más.

Precisamente por eso los formatos más modernos utilizan lo que se denomina "wavelets" generalmente, como jpeg2000, que no implica compresión por retículas sino que maneja un sistema basado en "manchones" por decirlo de alguna forma, entonces es menos evidente la compresión y no se genera ese feo efecto de jpeg. PNG y GIF no manejan retículas.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba