Una de las mejores maneras de crear sitios web rápidos es optimizar imágenes para la web. HTML, CSS, jQuery y las fuentes pueden hacer que el sitio tarde en cargarse, pero  se ralentizará más aún si tiene un montón de imágenes no optimizadas. En mi experiencia, las imágenes ocupan la mayor parte del tamaño total del archivo de una página (comúnmente conocido como “peso página”). Si se  optimizan las imágenes, las transferencias desde el servidor al navegador sucederán mucho más rápido. Vamos a profundizar en esto.

Uso SVG

Scalable Vector Graphics (SVG) es un lenguaje de marcado XML para almacenar imágenes vectoriales. En lugar de utilizar píxeles para representar los datos de imagen (como los formatos JPEG, GIF y PNG más familiares), el SVG utiliza una serie de puntos llamados “vectores” que se asignan a una cuadrícula de coordenadas bidimensional. La mayoría de los profesionales crean gráficos vectoriales en un programa de dibujo vectorial, como Adobe Illustrator, pero las herramientas basadas en web gratuitos como método draw y Mondrian también pueden crear imágenes SVG.

svg1Las imágenes SVG  pueden escalarse  para la web sin que pierdan calidad, ya que tienen una resolución infinita y tamaños de archivo muy pequeños. En otras palabras, se puede hacer zoom a una imágen SVG todo lo que quieras y siempre se ve bien. Eso es porque los archivos SVG almacenan imágenes como una serie de coordenadas que forman formas, en lugar de píxeles (cuadraditos de información). Estas formas se proyectan automáticamente en la cuadrícula de píxeles física, independientemente de su resolución. 

Para imágenes de muy alto-detalle, como fotografías o ilustraciones, es mejor utilizar un formato de archivo basado en  píxeles, que el formato SVG. Dicho esto, usted debe tratar de utilizar SVG para todas las imágenes excepto para las fotografías o las ilustraciones que se debe utilizar otro formato.

Después de muchos años de incompatibilidades con los navegadores , por fin ha llegado el momento de las imágenes SVG. Se puede utilizar en todos los  navegadores modernos y tambien con  IE9, comprobar versión de navegadores en  caniuse.com.

Cambiar la escala de imagenes

Las imágenes  SVG son independientes de la resolución, por lo que no necesitan ser reescalados.Sin embargo, los formatos de archivo JPEG y PNG tienen una resolución absoluta en píxeles. Todos los demás factores son iguales, cuantos más píxeles por lo general significa tiempos de carga mas lentos.

La web no se mide en píxeles; es un medio fluido que tiene un aspecto diferente de una pantalla a otra. A veces tendrás que dejar que el navegador reescale una imagen un poco para que funcione en un diseño . Sin embargo, si se envían más  píxeles que los píxeles físicos de un dispositivo y la imagen se escala hacia abajo, se desperdicia ancho de banda.

Se deben optimizar las imágenes para que  nunca sean más grandes que la resolución de pantalla más alta en la que tu quieres que se vean .

PNG

faceLos formatos SVG son los mejores para las imágenes que componen formas sólidas y líneas nítidas, mientras que los archivos JPEG son mejores para fotografías . Sin embargo, a veces un gráfico determinado no tiene un formato SVG disponible, y tampoco es recomendable comprimir con el formato  JPEG,  por que se  vería feo en las áreas planas de color y en las líneas nítidas. Usted también puede tener una imagen con algunas zonas transparentes y en estos casos, el mejor formato es un archivo PNG, que viene con los formatos,  PNG-8 y PNG-24.

PNG-8 utiliza una paleta de colores de hasta 256 colores. Uno de esos colores pueden ser para la transparencia, pero  la transparencia es binario (un píxel es 100% transparente o 100% opaco). Esto significa que cualquier transición entre las zonas opacas y transparentes será brusca y  sin gradación. Si un PNG-8 tiene los píxeles exteriores que son en su mayoría muy claros  y se coloca sobre un fondo oscuro, los bordes se verán irregular. 

PNG-24 es capaz admite todo los  colores  y transparencia alfa  (los píxeles pueden ser parcialmente transparente) que resulta muy útil para las trasparencias.  Esta es a menudo la única manera de mostrar los recortes fotográficos parcialmente transparentes, con cosas como el pelo o los bordes borrosos. La desventaja es que estas imágenes tienen un mayor peso que el resto de formatos de imagen.

Si tienes que usar un PNG, trate de usar PNG-8 (y reducir la paleta de colores tanto como sea posible). Sólo utiliza PNG-24 cuando es absolutamente necesario la transparencia alfa suave. Tenga en cuenta que si la transparencia alfa es uniforme en toda la imagen,  puedes utilizar el formato de imagen más pequeño y bajar la opacidad en el CSS.

Usar GIFs animados con mucha moderación

Garfield lloviendoEn la década de 1990, los GIFs animados estaban por todas partes. Ellos han hecho recientemente una reaparición, aunque no en la forma de hacer girar los logotipos o como  contadores de páginas. La regla aquí es bastante simple: los GIF animados pesan mucho (a menudo incluso más  que un vídeo HTML5). Si deseas utilizar un GIF animado en línea para una demostración de un concepto súper rápida (por ejemplo, cómo utilizar una función de interfaz de usuario en una aplicación web), a continuación, observa  cómo  el GIF animado incrementa el peso total de la página. Si lo que deseas es hacer una página web con un montón de  imágenes animadas con derechos de autor , guárdalo en Tumblr.

 Imágenes  @ x2

retina_iphoneCon los dispositivos de alta definición como pantallas clase de Apple “retina”, por lo general se necesita para ofrecer las imágenes a x2 o x3 al tamaño normal. Estos son dispositivos que tienen un mayor número de pixeles físicos en la pantalla de los que tienen las pantallas normales. En un iPhone moderno,  para rellenar una imagen de 200px por 200px en una página web, en realidad se necesita un archivo de 400px por 400px. De lo contrario, las imágenes se ven borrosas.

Las imágenes @ x2,   tienen más píxeles, y se pueden comprimir hasta un 70% sin que pierda calidad la imagen. Cuando una imagen de alta resolución se inserta en un espacio más pequeño y se comprime se ve bien. 

Cargar archivos JPEG Progresivamente

mariposaLas imágenes JPEG se suelen descargar a partir de la parte superior de la imagen y de barrido hacia la parte inferior.  El ojo humano sólo puede centrarse en una parte muy pequeña de la pantalla a la vez, por lo que rellenar áreas con grandes manchas de color y luego aumentar su claridad en general  parece más rápido que lo que permite escanear imágenes a partir de arriba a abajo.

Conclusión

Hay muchas otras técnicas para la optimización de las imágenes para la web, y estos son sólo unos pocos.