Original jpg: Kb. Optimizada jpg: 80 Kb. Adolfo Vizoso

Transcripción

1 Original jpg: Kb. Optimizada jpg: 80 Kb. Adolfo Vizoso

2 Introducción A menudo, las imágenes representan la mayor parte de los bytes descargados en una página web 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 de bytes y mejora de rendimiento para tu sitio web. Cuantos menos bytes deba descargar el navegador, menor será la exigencia para el ancho de banda del cliente y mayor la velocidad a la que 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 respuesta definitiva respecto de cuál es la mejor manera de comprimir una imagen individual, y una ciencia porque existe una gran cantidad de técnicas y algoritmos bien desarrollados que pueden reducir notablemente el tamaño de una imagen. Para hallar la configuración óptima para tu imagen se requiere un análisis cuidadoso en muchas dimensiones; capacidades del formato, contenido de los datos codificados, calidad, dimensiones en píxeles y más.

3 Volumen de imágenes en la Web A pesar de la mejora en el ancho de banda y en los procesadores, aun sigue siendo recomendable que las páginas web tengan un peso reducido para evitar que tengan problemas o demoren en cargar. Segú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 Fonts Scripts CSS HTML Otros Video Imágenes Peso 115 kb 4655 kb 915 kb 605 kb 275 kb kb kb Porcentaje de imágenes por página web Imágenes 50% Fonts 3% Scripts 13% Video 29% CSS 2% HTML 2% Otros 1%

4 La importancia de optimizar las imágenes antes de subirlas a 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.

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

6 Qué se modifica en una imagen para su optimización? 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). 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. 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 de colores) y 8 bits son destinados a las transparencias. 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.

7 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. Este organigrama puede ayudarnos a elegir el formato que necesitamos. SI NO GIF SI Necesita animación Necesita representar más de 256 colores? NO Necesita preservar los detalles finos, con la resolución más alta? O fondo transparente? SI JPG NO PNG-8 PNG-24 Experimentar con varios ajustes de calidad

8 A la hora de preparar tus imágenes: 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 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.

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

10 Herramientas para optimización de imágenes Software propietario o de pago Los más conocidos y utilizados son de Adobe.

11 1 Con Adobe Photoshop

12 1 Con Adobe Illustrator

13 1 Con Adobe Firework

14 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 dibujos como fotografías. Es el programa de manipulación de gráficos disponible en más sistemas operativos, algunos de ellos 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 ejecutarse desde un dispositivo de memoria USB). El programa posibilita ver el archivo original y el resultado optimizado al mismo tiempo. De fácil manejo y que cumplen perfectamente su función.(windows)

15 Otras herramientas Online Existen diversos sitios que realizan optimización de imágenes. Antes de subir imágenes a la web, es recomendable que las comprimas todo lo posible, sin que ello signifique comprometer la calidad. He probado durante el proceso unas cuantas herramientas, quería compartir y destacar las siguientes: 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.

16

17 Imagen final optimizada 100% negro