¿ Qué tipos de imágenes digitales son las más usadas?

Consideraremos dos tipos de imágenes digitales: las vectoriales y los mapas de bits

Imagen vectorial o vector: es un tipo de imagen creada con un programa de diseño. Normalmente se utiliza para los logotipos, los iconos y  las  ilustraciones o los dibujos.

La característica principal de los vectores es que cuando se amplía la imagen no se “pixela”.Es decir, se ve perfectamente definida a todos los tamaños.

Mapa de bits: es un tipo de imagen compuesta por infinidad de puntos, denominados “píxeles”, cada uno con un color y una luminosidad concreta. Se utilizan en fotografía porque la gama de colores es mucho más amplia que en los vectores.

Cuando se agranda una imagen de este tipo llega un momento en que la imagen pierde nitidez y se visualizan los puntitos que la componen, se “pixela”.

Tanto los vectores como los mapas de bits se guardan en archivos gráficos con diferentes formatos. Los mapas de bits ocupan mucho más espacio que los vectores.

¿Cuáles son los formatos más convenientes para subir a nuestra web?

 En general, la mayoría de las entradas a los blogs se acompañan por algún tipo de imagen  que añada valor al contenido, solemos utilizar los mapas de bits, en particular estos tres formatos:

    JPG o JPEG: el más común. El formato típico de las cámaras de fotos y de las que obtenemos con los móviles.

    PNG: recomendado para logotipos y gráficos en los que necesitas conservar el fondo transparente.

    GIF: se utiliza en animaciones.

¿ A qué nos referimos con  la expresión “tamaño de imagen” y “peso de la imagen”?

El tamaño de la imagen es la dimensión que ocupa en una pantalla o cuando se imprime una foto en papel. Podemos hablar de centímetros, 13 x18 cm, pero es preferible que lo definamos en píxeles, 1024×768 píxeles.

Como orientación diremos que una imagen es:

    Grande cuando tiene un tamaño igual o mayor a 1024×768 píxeles

    Mediana cuando el tamaño va de 320×240 a 1024×768 píxeles

    Pequeña cuando el tamaño es menor a 320×240 píxeles

    Muy pequeña cuando es menor a 100×100 píxeles

El peso de la imagen es lo que ocupa el archivo en la unidad de almacenamiento. Por ejemplo, en un disco duro o en un pendrive. Cuanto más pese la imagen  menos archivos se pueden guardar ya que la capacidad de almacenamiento es limitada.

A nosotros lo que nos interesa es que no sea muy pesada para que la carga de nuestra página web sea más rápida.

Aproximadamente se considera que una imagen es:

    Pesada si tiene 1 MB o más

    De peso mediano si va de 300KB a 1 MB

    Ligera si su peso es menor de 300KB

    Muy ligera si el peso es inferior a 100KB

 

 

Velocidad de carga de una web  y optimización de imágenes

¿Qué es la velocidad de carga de una web?

La velocidad de carga de una web es el tiempo en que tarda en aparecer esa página de forma completa en la pantalla del usuario, con sus imágenes, sus estilos y sus funcionalidades.

¿A qué afecta y cómo?

Cuando una página web tarda mucho en cargarse, el usuario se impacienta, y tiene una percepción negativa que hará que evite navegar por esa web e incluso hable mal de ella con otros usuarios. Además, esa demora en la carga es interpretada por los navegadores de tal forma que van penalizando el posicionamiento de la misma.

Uno de los factores que afectan a la velocidad de carga es la optimización de las imágenes que utilizamos en nuestra web o blog.

Optimizar quiere decir que la imagen tenga la calidad más alta, con el tamaño de archivo más pequeño. Es decir, que la imagen “pese” poco y se vea bien.

Para conseguir esta optimización debemos tener en cuenta:

El tamaño de la imagen: debemos elegir el tamaño al que se va a visualizar realmente. Si la imagen tiene 1920×1080 píxeles, por ejemplo, y el tamaño máximo real al que se verá en una pantalla normal puede ser de 800 x 600 píxeles, reescalaremos la imagen a esta medida

La compresión de la imagen: puede perder algo de calidad pero si se hace apropiadamente, la mayoría de los usuarios ni se dará cuenta. Es la forma de conseguir que los archivos pesen menos.

Algunas herramientas disponibles para optimizar imágenes:

1. Tiny PNG-app gratuita
2. GIMP- gratuita
3. Adobe Photoshop
4. JEPG mini-hay versión web gratuita
5. ImageOptim es un software para Mac
6. Trimage es un software de Windows

La carga en paralelo de las imágenes: consiste en utilizar otro dominio o subdominios para almacenar imágenes, mientras el sistema atiende el resto de llamadas del servidor, estas imágenes se van cargando en paralelo.

Para la mayoría de las páginas no será necesario realizar la carga en paralelo, sobretodo si no son muy extensas y no presentan un volumen alto de imágenes. Mediante el redimensionamiento de la imagen y la compresión del archivo conseguiremos mejorar notablemente nuestra velocidad de carga.

 

¿Qué es Google PageSpeed Insight Tool?

Google PageSpeed Insight Tool es una extensión del navegador Chrome de Google. Las extensiones son pequeñas aplicaciones que añaden funcionalidades extras al navegador, en concreto esta extensión  nos ayuda de tres maneras:

Lo primero que hace es analizar la velocidad de carga de nuestra página web. Escribimos la URL de nuestra página en la casilla pertinente y seguidamente nos proporciona un ranking sobre una puntuación de 100 que nos orienta para saber si nuestra página se carga bien en el ordenador y en dispositivos móviles.

Lo segundo que hace es  sugerirnos qué puntos podemos mejorar en nuestra página en cuanto a estilos, javascript  e imágenes para ganar en velocidad de carga. Nos dan un listado con cada posible corrección.

Lo tercero, muy práctico, es que nos proporciona los recursos que podemos cambiar en nuestra página web para acelerar la carga. En particular nos entrega en un archivo comprimido los ficheros css, los ficheros js y las imágenes optimizadas. 

          Tan sólo con sustituir estas imágenes en  nuestra web veremos que el ranking de velocidad de carga de la  página se incrementa notablemente. Hay que tener en cuenta que las imágenes nos las dan en una sola carpeta y que tendremos que sustituirlas en la ubicación correcta. Si tenemos muchas carpetas de imágenes en la web nos podremos guiar por el path  que está en el listado de sugerencias de optimización.

 

Instalación de la extensión o versión online

Podemos utilizar la extensión en su versión online o instalarla en nuestro navegador. Para ello iremos al menú del navegador y elegiremos la opción  Más herramientas->Extensiones  y al final de la página hay un enlace Obtener más extensiones  que nos llevará a Chrome Web Store. 

Para instalar la extensión clicar sobre Gratis , que aparece en la esquina inferior derecha.