Original jpg: 6.503 Kb. Optimizada jpg: 80 Kb.

Adolfo Vizoso

A menudo, las imágenes representan la mayor parte de los bytes descargados en una páginaweb y también ocupan una considerable proporción del espacio visual de esta. Como resultado,la optimización de imágenes a menudo puede ser uno de los más eficaces medios de ahorro debytes y mejora de rendimiento para tu sitio web. Cuantos menos bytes deba descargar elnavegador, menor será la exigencia para el ancho de banda del cliente y mayor la velocidad a laque el navegador podrá descargar y mostrar contenido útil en la pantalla.

La optimización de la imagen es un arte y una ciencia. Un arte porque no hay una respuestadefinitiva respecto de cuál es la mejor manera de comprimir una imagen individual, y una cienciaporque existe una gran cantidad de técnicas y algoritmos bien desarrollados que pueden reducirnotablemente el tamaño de una imagen. Para hallar la configuración óptima para tu imagen serequiere un análisis cuidadoso en muchas dimensiones; capacidades del formato, contenido delos datos codificados, calidad, dimensiones en píxeles y más.

Introducción

A pesar de la mejora en el ancho de banda y en los procesadores, aun sigue siendo recomendable que las páginasweb tengan un peso reducido para evitar que tengan problemas o demoren en cargar.

Fonts3%

Scripts13%

CSS2%

HTML2%

Otros1%

Video29%

Imágenes50%

Porcentaje de imágenes por página webSegún HTTP Archive, los últimos datos de febrero de 2018, reflejan que las imágenes constituyen en promedio el 50% del peso total de la página web

Elementos Peso

Fonts 115 kb

Scripts 4655 kb

CSS 915 kb

HTML 605 kb

Otros 275 kb

Video 10.635 kb

Imágenes 18.165 kb

Volumen de imágenes en la Web

La velocidad de carga es uno de los factores más determinantes a la hora de posicionar un sitio web, el peso de las imágenes es importante. Google tiene

muy en cuenta la rapidez con la que se carga una página.

La navegación móvil. la tendencia es a aumentar. La velocidad de las redes 3G o 4G no puede equipararse con la banda ancha que tenemos en casa, los

usuarios móviles agradecerán que la web no tarde en cargar.

No perder usuarios. Una web lenta y pesada es sinónimo de un porcentaje de rebote muy alto, y por supuesto no es lo deseado. No haga esperar a los

usuarios y optimice el tiempo de carga la web.

Posicionamiento SEO. Google dispone de un tiempo limitado para rastrear su web, por lo que cuanto menos pese, más páginas podrá rastrear y tendrás

más posibilidades de posicionarse mejor.

La importancia de optimizar las imágenes antes de subirlas a la web

Los tres conceptos a tener en cuenta para optimizar imágenes

TAMAÑO

• El espacio que ocupa una imagen (largo x ancho) y suele medirse en pixeles o puntos (650px ancho X 200px alto).

RESOLUCIÓN

• La cantidad de pixeles que hay en una pulgada de la imagen, y esta se mide en pixeles por pulgada (ppp), a más pixeles por pulgada mayor resolución y en una imagen para web usar más de 72 ppp conlleva un aumento de peso innecesario.

PESO

• Se mide en megas o kilobytes y este valor siempre depende del tamaño y la resolución, a mayor tamaño y mayor resolución mayor peso.

Qué se modifica en una imagen para su optimización?

•Una cámara digital obtiene resoluciones altas para impresión que no son necesarias en una imagen que va a ser mostrada en una página web, a una resolución de 72 ppp recomendada para su uso en este medio, debido a que la gran mayoría de los monitores no tienen resoluciones superiores.

El parámetro más empleado para modificar el peso de una imagen es la resolución, cuya medida es en ppp (pixeles por pulgada cuadrada).

•Reduciendo la escala de profundidad del color a 16 bits (color de alta densidad), se obtiene también una reducción del peso de la imagen. Para imágenes que emplean pocos colores, pueden utilizarse escalas menores, como 256 colores o menos.

Otro parámetro modificable es el color. Una imagen de alta calidad (denominado color verdadero, ya que se acerca a la capacidad del ojo humano en la detección de colores) tiene una profundidad de color de 32 bits por pixel, de los cuales 24 bits son para el color (casi 17.000.000 de colores) y 8 bits son destinados a las transparencias.

Cómo elegir el formato de imagen

Lo primero es saber elegir el formato de imagen adecuado a sus necesidades. Seguramente alguna vez se ha preguntado cuál es la diferencia entre un jpg, un png o un gif.

Necesita animación

NO

GIF

SI

¿Necesita preservar los detalles finos, con la resolución más alta?

¿O fondo transparente?

SI

Necesita representar más de 256 colores?

PNG-8

NO

PNG-24

SI

JPG

NO

Experimentar con varios ajustes de calidad

Este organigrama puede ayudarnos a elegir el formato que necesitamos.

Emplea las dimensiones exactas que necesites (no confíes la reducción de las

dimensiones al CMS, porque se cargará la imagen completa

antes de ser redimensionada)

La calidad JPG media es suficiente para la Web.

Usa JPG para fotografías e imágenes grandes en general.

PNG se recomienda usar en general para todas las imágenes que componen nuestra web (logotipos, iconos, botones, etc.)

GIF es ideal para imágenes animadas

A la hora de preparar tus imágenes:

Esquema de combinación de formatos de imagen para nuestra Web

Es recomendable guardar las imágenes en formato JPG con una calidad de 70% aproximadamente y para imágenes que necesiten transparencia como los logos usar el formato PNG.

Después de pasarla por Photoshop puedes reducir incluso más el peso de la imagen pasándola por alguna herramienta online para optimizarla mas sin perder calidad.

Además de estos formatos, cada vez es más normal utilizar formatos vectoriales (.EPS o .SVG) para logotipos e iconos, ya que son totalmente escalables a todas las resoluciones.

Herramientas para optimización de imágenes

Software propietario o de pago

Los más conocidos y utilizados son de Adobe.

Con Adobe Photoshop1

2 5

6

3

4

1

2

Con Adobe Illustrator

6

3

4

5

1

2

6

3

4

5

Con Adobe Firework

Software libre

GIMP (multiplataforma)

Es un programa libre y gratuito de edición de imágenes digitales en forma de mapa de bits, tanto para dibujoscomo fotografías. Es el programa de manipulación de gráficos disponible en más sistemas operativos, algunos deellos son Microsoft, Mac OS X, Linux.

(muy ligero para el S.O. y una buena opción)

Riot: es un software de optimización de imágenes gratuito de muy bajo peso y portable (puede ejecutarsedesde un dispositivo de memoria USB). El programa posibilita ver el archivo original y el resultado optimizado almismo tiempo. De fácil manejo y que cumplen perfectamente su función.(Windows)

Existen diversos sitios que realizan optimización de imágenes. Antes de subir imágenes a la web, es recomendableque las comprimas todo lo posible, sin que ello signifique comprometer la calidad. He probado durante el procesounas cuantas herramientas, quería compartir y destacar las siguientes:

Otras herramientas Online

• Compressor.io: es un servicio online gratuito de compresión de imágenes(JPEG, PNG, GIF y SVG). La página del proyecto anuncia reducciones de tamaño de hasta un 90%.

• Tinypng: Nos proporciona una comprensión con muy poca pérdida de calidad. Es gratuita y ofrece un plug-in para WordPress.

• JPEGmini: Con esta aplicación, se optimizan las imágenes hasta un 80%, conservando toda su resolución y calidad. Está online gratuita pero solo se pueden subir hasta 20 fotografías al día.

• Image Optimizer: un servicio online para optimizar imágenes al segundo.

• Dynamic Drive: Una herramienta para optimizar JPG, PNG e incluso GIFs animados. Se cargan más rápido en la web y es posible cambiar de un tipo de imagen a otra.

Imagen final

optimizada

100% negro