Cómo (y por qué) comprimir imágenes para la web?

Herramientas y motivos para optimizar las imágenes de tu página web

Poner fotos en todas partes para ilustrarlo todo, es algo que hace todo el mundo: es más atractivo, visual, llama la atención, etc. Pero estas imágenes pueden ser un problema para tu página web. En este artículo te explicamos por qué debes optimizar las imágenes y te proponemos herramientas para hacerlo. ¡No te lo pierdas!

¿Por qué es importante optimizar les imágenes de tu web?

·
Evitar rebotes: que la página web vaya como una tortuga y, por tanto, que tarde mucho en cargar genera una tasa de rebotes muy elevada. Ya sabemos que la paciencia no es nuestro fuerte, y los usuarios abandonan la página cuando tardan en acceder al contenido. Y no queremos perder usuarios por culpa de la lentitud de carga!
·
Posicionamiento: los buscadores de Google puntúan las páginas web según las velocidades de carga. Por lo tanto, cuanto menos peso tengan las imágenes más buena puntuación tendrá la web y más buena posición tendremos
·
Diferentes dispositivos: la tendencia de navegación vira hacia los dispositivos móviles que ya superan a la navegación por ordenador. Pero la velocidad de navegación desde estos dispositivos (3G o 4G) es más baja que la banda ancha o la fibra óptica. Por tanto poner imágenes que pesen menos ayudará a la carga de la web en los móviles.

Foto: Pixabay

La flor diente de león optimiza al máximo el peso de sus semillas y las dota de elementos aerodinámicos para que lleguen lo más lejos posible.

¿Qué formatos de imágenes podemos utilizar?

JPG:

Es el formato más habitual para utilizar fotografías.

Ideal para imágenes fotográficas, con muchos colores y detalles, de tamaño grande.
Permite una reducción de tamaño personalizada, pero ...
La compresión genera pérdidas, es decir, se reduce el peso a costa de la calidad. La fotografía pierde nitidez y pueden aparecer errores cromáticos a la fotografía.
TOP: Buscar el equilibrio entre calidad y peso.

PNG:

Permite transparencias, por lo tanto es ideal para imágenes no cuadradas.
Muy útil para imágenes con pocos colores o grandes espacios en blanco.
No es posible reducir tanto el peso como en un JPG, ya que no utiliza un sistema de compresión con pérdidas.

GIF:

Ideal para imágenes animadas.
No recomendado utilizarlo para imágenes estáticas, ya que no está tan optimizado como los anteriores.
Sólo utiliza 256 colores.
Formato obsoleto, excepto para reír un rato en las redes sociales.

SVG:

Formato vectorial.

Son escalables: nos permite cambiar su tamaño sin aumentar su peso.
Ideal para logotipos, iconos o gráficos.
/ Formato profesional, es decir, no todo el mundo lo puede crear o modificar.

Puedes ver nuestro post deanimacions web html5 i css si quieres saber cómo utilizar las imágenes GIF y SVG para destacar contenidos.

Las diferencias entre los tipos de formatos y las ventajas de cada uno están muy bien explicados en NoJPG.org. Échale un vistazo!

Adaptar los tamaños a cada pantalla

Actualmente, las páginas web se ven en múltiples pantallas, como monitores grandes, tabletas o pequeños dispositivos móviles. Esto es importante tenerlo en cuenta cuando preparamos una página web.

Es recomendable utilizar diferentes resoluciones de imágenes para cada dispositivo, siempre que el programa de edición o maquetación nos lo permita. De esta manera evitaremos que en un dispositivo móvil, por ejemplo, con una resolución de pantalla de 360 píxeles, cargue la misma imagen que mostramos 1900 píxeles en una pantalla de ordenador.

Foto: Ryan Baker

Los árboles frutales determinan el tamaño de sus frutos dependiendo de las sustancias que pueden obtener de la tierra. Optimizan el tamaño para que el fruto pueda ser, siempre, viable, gran ejemplo de adaptación!

Resoluciones y el mito de los 72 dpi.

La resolución de las imágenes es la densidad de puntos por pulgada que tiene. Cuanto más puntos por pulgada tiene la imagen, más calidad. DPI = dotes per inch.

Sin embargo, sólo afectará a la calidad de las impresiones. Cuando mostramos imágenes en una pantalla, lo que es importante son los píxeles que mide la foto, independientemente de la resolución que tenga.

Podríamos utilizar imágenes de 1 dpi o 1000 dpi con el mismo tamaño de píxeles y la veríamos idénticamente iguales en pantalla. Lo puedes comprobar con estas dos imágenes:

Exemple:

1 dpi

1000 dpi

De dónde viene, entonces, el mito del 72 dpi?

El mito de los 72 dpi se originó cuando Apple creó el primer Macintosh. Ellos establecieron un sistema WYSIWYG (What You See Is What You Get). Este sistema se basaba en el hecho de que si se imprimía lo que se veía en la pantalla del Macintosh, el resultado fuera exacto tanto en papel como en pantalla. Y determinaron que 72 dpi era la resolución ideal tanto para tipografías como por imágenes.

Pero esto sólo era real en su ordenador, en ningún otro sitio. De hecho, hoy en día tenemos infinidad de tipos de pantallas, resoluciones, tamaños, tipografías, etc. que hacen la teoría de los 72 dpi que estableció Apple quede totalmente obsoleta. Si deseas saber más sobre este mito, puede consultar este blog!

Por tanto, en conclusión, no le des importancia a los DPI de la imagen sino al tamaño en píxeles y optimiza con alguna de las herramientas que te mostramos a continuación.

La foto más grande de la historia, contiene 846 gigapíxeles y se realizó en 2015 en Kuala Lumpur. La segunda es la foto de la luna hecha por la NASA con 681 gigapíxeles.

Herramientas para optimizar imágenes

PHOTOSHOP

La herramienta por excelencia en retoque y edición de imágenes es Photoshop. Para optimizar una imagen correctamente, una vez hemos determinado el tamaño que queremos, la guardamos con "Guardar para Web”.

File > Export > Save for web (legacy)
Archivo > Exportar > Guardar para web

¿En qué formato lo exportas?

JPG

Los parámetros: la barra de calidad de la imagen va del 0 al 100, siendo 0 la compresión máxima y 100 que no hay compresión. Sí, parece que esté al revés.
Un punto intermedio sería entre 60 y 80% en la casilla de ‘calidad'.

¿Qué es la opción 'progresivo'? El hecho de que la imagen, que se guardará por capas de diferentes calidades, se cargará de forma progresiva, es decir, primero se verá de baja calidad y, poco a poco, a medida que se vaya cargando irá aumentando su calidad.
Si decides no utilizar esta opción, la imagen aparecerá directamente en alta calidad, seguramente a trompicones porque le costará cargar.

PNG

Si te has fijado, Photoshop te da dos opciones de formato PNG: PNG-8 y PNG-24. La diferencia:
PNG-8: comprime un máximo de 256 colores, los mismos que permite el GIF.
PNG-24: comprime con 16 millones de colores.
Creo que la decisión está tomada!
Como ya hemos comentado antes, el PNG soporta la transparencia, siempre que la imagen esté diseñada para ser sin fondo o sin alguna parte.
El tipo de carga: la opción de entrelazado. Es muy parecido a la opción 'progresivo' del formato JPG.

IMAGEOPTIM ()

Aunque Photoshop optimiza correctamente las imágenes, si utilizamos su opción de guardar para web, aún quedan datos que podemos eliminar que nos permitirán reducir aún más el peso de la misma. Una de estas herramientas gratuitas para MAC es ImageOptim.

Simplemente arrastraremos las imágenes generadas del Photoshop en el programa y nos las optimizará según la configuración que le damos.
Integra herramientas de optimización: PNGOUT, AdvPNG, extended OptiPNG, PngCrush, JpegOptim, jpegtran, jpegrescan y Gifsicle.
Programa a instalar, sólo disponible para MAC.

RIOT ( )

Podríamos decir que es la alternativa a ImageOptim para ordenadores PC. También es gratuito.

Previsualización de las imágenes antes de comprimirlas.
Tiene un pequeño editor con filtros o con la posibilidad de girar la imagen.
Se puede especificar el peso que queremos que tenga.
Procesa más de una imagen a la vez (versión 0.4).
Admite imágenes en PSD de Photoshop.
Podemos guardar las imágenes en tres formatos: JPG, PNG y GIF.
La versión portátil sólo está disponible para las versiones de Windows 2000 hasta 7.
Programa a instalar, sólo disponible para Windows.

TINYPNG (online )

También existen compresores online como TinyPNG que es totalmente gratuita y te permite reducir y comprimir imágenes tanto en formato PNG como JPG.

Permite procesar hasta 20 imágenes de una sola vez.
Instalando un plugin, se puede guardar a través de TinyPNG desde Photoshop.
Limitación del tamaño de los archivos: archivos de máximo 5MB en la versión gratuita, hasta 25MB en la versión de pago.

Foto: Arhnue

Los pulpos, gracias a su morfología, pueden comprimir su cuerpo hasta reducirlo al tamaño de su mandíbula, que es la única parte dura de su cuerpo.

Ya sabes: optimiza, ¡a Google siempre es mejor tenerlo como amigo!

Si nos quieres conocer mejor,
¡contáctanos! Y si te gusta, ¡síguenos!