Cómo optimizar imágenes (I)

Optimiza las imágenes para publicarlas en tu sitio web

Que las imágenes son una parte fundamental de cualquier página web es algo que todos tenemos claro. Y también somos conscientes de que conseguimos tener más alcance haciendo uso de las mismas.

Podemos constatar también que el buen uso de las imágenes nos puede beneficiar:

• Mejorando la estética.
• Aumentando la duración de la visita.
• Mejorando el SEO.
• Aumentando la posibilidad de atraer, retener y convertir visitas.

Pero un mal uso de las imágenes puede provocar todo lo contrario.

Esto quiere decir que no todo vale. Que para obtener un buen resultado hay que conseguir el equilibrio apropiado entre texto e imagen y que dicha imagen debe estar optimizada para conseguir el propósito deseado.

[bctt tweet=”Las imágenes son un elemento esencial dentro de cualquier proyecto online, estas deben mimarse como el resto de contenidos” username=”SignosCyM”]

 

Mejora el tamaño de tus imágenes para reducir el tiempo de carga

Optimizar una imagen para web consiste en guardarla con un tamaño y una resolución adecuadas al espacio en el que esta se va a colocar.

Esto es, un tamaño no demasiado pequeño que muestre la imagen con muy mala calidad ni demasiado grande que guarde demasiada información y que haga que la imagen pese demasiado para su visualización.

Tenemos que tener en cuenta que, a mayor número de píxeles (puntos de color y luminosidad que definen la imagen), mayor cantidad de información a guardar en el archivo, lo cual incrementa el peso del mismo.

Esto quiere decir que, cuando estemos trabajando con elementos web, debemos sacrificar en la medida de lo posible la calidad de la imagen para obtener un buen equilibrio con el peso de la misma.

Supuesto: Tenemos un blog con un ancho de columna de 600 píxeles. En dicho blog vamos a crear una entrada con una imagen. ¿Cuál de estas tres dimensiones sería la apropiada? (A simple vista, las imágenes parecen iguales porque se están mostrando a un tamaño reducido. Son sus propiedades las que marcan la diferencia entre las mismas.)

La primera imagen no pesa demasiado y su resolución no es baja, pero su tamaño es muy inferior al ancho de la columna.  En este caso, podemos encontrarnos con que la imagen se visualice muy pequeña o con que esta sea redimensionada para ocupar todo el ancho provocando que la imagen se muestre con muy baja calidad.

La tercera imagen tiene un número de píxeles superior al necesario. Lo más probable es que la imagen sea redimensionada para mostrarse a 600 píxeles desestimándose con ello los píxeles que exceden de este tamaño, pero tardando más en cargar por el exceso de píxeles.

La segunda imagen, sin embargo, está optimizada al ancho que se necesita, con una resolución apropiada para visualizarla de forma online y consiguiendo un peso mucho menor. Esta es la opción más apropiada y la manera estándar en la que deben optimizarse las imágenes.

 

Elige el formato adecuado en cada momento

A grandes rasgos, existen dos tipos de imágenes digitales:

• Imágenes de mapa de bits: están formadas por una serie de puntos denominados píxeles. Ejemplos: BMP, GIF, JPG, TIF, PNG…

• Imágenes vectoriales: son imágenes constituidas por objetos geométricos autónomos, que le dan la peculiaridad de no perder calidad al redimensionar su tamaño. Ejemplos: AI, EPS, SVG, SWF…

Las imágenes más utilizadas en el entorno online son las imágenes de mapa de bits y los formatos GIF, JPG y PNG son los más apropiados por su relación calidad / peso.

Hoy en día, con la llegada de las webs responsive y la necesidad de obtener diseños que puedan adaptarse a la gran cantidad de resoluciones de pantallas diferentes, cada vez se tiende, en mayor medida, a la búsqueda de formatos de imágenes que puedan escalarse sin perder calidad.

Estos formatos de imágenes son los vectoriales, siendo las imágenes EPS y SVG las que más se están utilizando de forma online en estos momentos. A pesar de ser un muy buen recurso para las nuevas necesidades, tienen el inconveniente de que necesitan programas específicos para poder ser gestionadas y que no todos los navegadores los leen correctamente.

Puedes echar un vistazo a http://www.nojpeg.org si quieres más información sobre este tipo de imágenes.