Optimización de páginas web: Imágenes
Parte I - Optimizando Imágenes
Siempre tienes que tener en cuenta que si tu página web tarda horas en cargar muchas personas simplemente la abandonarán.
En este momento tengo la misión de optimizar el sitio web de ¿Qué Demonios? que por definición, es un sitio web lento.
La razón principal por la que es lento es porque tiene que cargar el reproductor de video de YouTube, en la página principal son por default 7 videos y además, estoy descargando los botones de Facebook, Twitter & Youtube, es una pesadilla.
¿Debo usar PNG o JPEG?
En muchas páginas, las imágenes juegan una parte importante en la presentación del sitio y en el contenido pero tenemos que tomar en cuenta que una imagen suele consumir una cantidad considerable de ancho de banda.
Lo primero que se puede hacer es saber que formato de imagen nos conviene más. Una pista: Nunca es GIF.
PNG es un formato lossless, quiere decir que la imagen no pierde calidad al ser guardada pero muchas veces, esto quiere decir que las imágenes son muy pesadas. Habiendo mencionado eso, PNG es conveniente con imágenes con pocos colores, PNG suele comprimirse muy bien cuando tenemos elementos elementos con pocos colores o pocas formas.
Tal vez la principal razón para usar PNG es porque necesitamos una imagen con fondo transparente, como un ícono o un logotipo.
JPG es un formato lossy, quiere decir que pierde calidad cuando es guardado pero eso no debe preocuparnos. Photoshop permite escoger entre 12 tipos de calidad para JPG, el 12 lo uso siempre para fotografía profesional, el 10 y 11 los uso para las imágenes de éste sitio y si alguna es muy pesada (más de 400Kb), lo hago en 9 pero trato de no bajar de ahí. Mientras menor sea el número, menor será el tamaño físico de la imagen pero esto introducirá ruido e imperfecciones y muchas veces, no se ve muy bien.
Además de haber pensado si la imagen es PNG o JPG, tenemos que comprimir la imagen.
Comprimir imágenes
Al comprimir las imágenes podemos ayudar a reducir su tamaño y por consecuencia, el tiempo de carga y el consumo de ancho de banda.
En Mac OS X utilizo ImageOptim, es gratuito y se puede colocar en el menú contextual para que al seleccionar una o varias imágenes, podamos enviarlas a compresión desde el Finder. Lo he usado con archivos PNG y JPEG y no me ha fallado.
Comprimiendo imágenes con ImageOptim.
En Windows, para los PNG recomiendo PNGGauntlet, para JPG no puedo recomendar ninguno porque no encontré uno que me agradara cuando usaba Windows pero si tienes o usas Photoshop, puedes abrir la imagen y guardarla con un nuevo nivel de compresión.
Toma en cuenta que comprimir bien una imagen en ocasiones puede ser una tarea que estrese al procesador y puede llevarse su tiempo, para una imagen puede no parecer mucho pero no siempre necesitas editar una imagen a la vez.
SVG y EPS
Otro formato es el SVG, recomendable para cosas que fueron pensadas y creadas como y con vectores ya que son declarados, esto hace que podamos escalar un SVG sin perder resolución, además de que son muy ligeros. EPS es un tipo de archivo que sigue el mismo principio pero es de Adobe.
El problema que es posible encontrar con SVG es el soporte (Puede ser peor aún para EPS), algunos navegadores, como Chrome en Android 4.4.2 en un Moto G no han mostrado los SVG que he puesto en mi sitio, tal vez tenga que ver la forma en la que los implementé ya que se supone, están soportados.
Si es posible, debemos solicitar el archivo SVG junto con los demás archivos de imágenes, puede ser útil.
Nota: Sketch (Mi herramienta principal de diseño) te permite exportar a SVG y EPS aunque algunas veces no he obtenido resultados perfectos o tan precisos como con Illustrator.
Sprites
Para las interfaces de usuario, también es una buena práctica mezclar diferentes imágenes en una gran imagen y de ahí, usar CSS para cortar la gran imagen extrayendo así, únicamente lo que necesitamos. Esto, además de ahorrar ancho de banda ahorra el número de solicitudes al servidor lo que mejora mucho el tiempo de carga. La técnica anterior se conoce como sprite sheet.
Todas las empresas grandes y que transfieren millones de archivos por día usan sprite sheets para ahorrar entre otras cosas, dinero. Por ejemplo, uno de los varios sprite sheets de Facebook a a fecha de publicación es éste:
Teniendo el archivo que contiene varias imagenes, dependiendo del medio será la forma de acomodarlos, en CSS lo recomendable es hacer una caja del tamaño que digamos, un ícono fue diseñado y después, colocar esa imagen como background. Finalmente usando el atributo background-position acomodamos la imagen para que muestre lo que debe mostrar.
Si tienes alguna duda puedes buscar en Google o mandarme un tweet a @jmz7v, el próximo post ya está listo, habla de la Optimización de CSS.
Publicado por Julio Montaño el 01/Oct/2014.