Cuando estamos en el proceso de diseño de una pagina web, por lo general uno esta pendiente es del rendimiento en el código o de terminar el trabajo rápido para el día que te comprometiste a entregarlo que si no lo haces te botan, y por supuesto son muchas las cosas que se le escapan a uno entre esas cosas que se le escapan a uno es que como se esta trabajando en local pues no nos damos cuenta de que tan pesada esta nuestra pagina y cuanto se va a tardar un usuario en descargarla.
Pero que seria una pagina web sin imágenes, sino un sitio lugubre y oscuro que nadie quería ver ni visitar, por ello hay varios factores para poder optimizar las imágenes los cuales voy a tratar de explicar para que pueden mejorar sus programas.
Factores para tomar en cuenta a la hora de optimizar imágenes:
Peso de la imagen.
Una de las principales razones por la cual una pagina se vuelve muy pesada es porque tenemos una gran cantidad de imágenes, a veces hasta sobre cargamos la pagina, y ninguna de ellas a sido optimizada, un ejemplo de esto es una pagina web que estaba optimizando en estos días en la cual se redujo unos 300 kb solo optimizando las imágenes, es decir como un 30% del peso de la pagina, sin quitarle nada a la pagina, ni reducir la calidad de la misma.
Ustedes de preguntara como puede ser esto?, pues simple las imágenes cuando son generadas ya bien sea por una cámara, teléfono, scaner o algunos programas, traen dentro de si información relevante sobre la imagen, además de que están en un formato "x" en el que lo guardo el programa, cuando optimizamos una imagen no es que le quitamos calidad, sino que reducimos su peso eliminando información que no sea necesaria y además guardándola en un formato que ocupa menos espacio, también se puede reducir la calidad de la imagen y con eso reducir el peso de la imagen pero a veces no es necesario.
Aquí les dejo dos herramientas:
Tipo de Imagen:
A la hora de crear imágenes en nuestra pagina web, pues muchas veces no se siguen unas lineas claras y pues se crean imágenes tiff, bmp, jpeg, png, etc. y cuando vamos y vemos estamos usando imágenes que están destinadas para otro tipo de aplicaciones en nuestra pagina web, por lo general imágenes para la web son imágenes pequeñas con poca información y que muchas veces el usuario ni les presta atención, en una pagina web debemos tener por lo general imágenes de tipo jpg y png, son las más recomendadas para la web, gif solo se debe usar en caso de querer poner una animación.
Ahora bien porque y cuando usar cada uno de los formatos para web.
Png o gif, por lo general la gente usa cualquiera de estos dos formatos para imágenes con transparencia, ya que los dos soportan transparencias, pero ya en este tiempo actual todos los navegadores nuevos soportan el formato PNG a la perfección y por ende para imágenes con transparencia o que se requiera cierta calidad se debe usar es PNG, no gif. principalmente porque el formato png ademas de soportar transparencias también produce imágenes mas livianas ya que fue echo pensando en la web.
JPG, es un formato muy útil que se destaca del resto de los formatos porque a diferencia de otros formatos las imágenes grabadas en jpeg ocupan mucho menos espacio, en la web se debe usar para cualquier imagen que no requiera transparencias, por lo mencionado anteriormente.
Ofrece Imágenes a escala:
Cuando usamos imágenes en nuestras paginas web, a veces se dan casos donde la imagen es más grande que el are donde se va a mostrar, por múltiples razones puede suceder esto, pero se debe estar pendiente ya que al ofrecer una imagen del mismo tamaño como se va a mostrar en la pagina es lo mejor que se puede hacer ya que el navegador no va a descargar recursos demás que después no va a necesitar, y esto puede llegar a reducir inclusive a la mitad el tamaño de la imagen. Esto se hace con photoshop, gimp o cualquier programa de edición de imagenes.
