Como optimizar las imágenes de tu web

Existen 6 maneras para optimizar las imágenes de tu web aumentando la velocidad de carga. Es importante que apliques todas estas medidas para conseguir un rendimiento óptimo de tus imágenes, haciendo que los usuarios y Google queden satisfechos con la velocidad de carga tu web.

optimizar foto imagen jpg

Las imágenes de una web pueden optimizarse de 6 maneras:

  • Comprimiendo las imágenes
  • Reduciendo el tamaño de las imágenes
  • Uniendo varias imágenes en una sola
  • Indicando el tamaño en los archivos de las imágenes
  • Utilizando el caché de los navegadores
  • Cargando las imágenes progresivamente

Otros artículos que te pueden interesar:

Porque debemos optimizar imágenes?

  • Primero de todo porque un gran porcentaje de usuarios (>20%) provienen de dispositivos móviles. Los móviles son mas pequeños y sus datos son descargados mas lentamente porque provienen de una linea de datos. Tener unas imágenes muy pesadas es perjudicial
  • Google tiene muy en cuenta las optimización de las imágenes de tu web. Si ve que una imagen es muy pesada, puede bajarte la posición en su buscador.
  • Si tu webs es lenta porque tienes imágenes muy pesadas, es posible que muchos usuarios no se esperen a abrir tu página. No nos conviene ir perdiendo usuarios.

Como puedo comprobar la optimización de una imagen?

Gtmetrix-optmizar-imagenes

GTMETRIX es un programa que te ayudará a optimizar todas tus imágenes. Aquí podrás comprobar el estado de cada una de las imágenes de tu web. Si una imagen no está optimizada, este misma herramienta te la devuelve optimizada.

Las 6 maneras para optimizar las imágenes de tu web

1. Comprimir imágenes

Imagen-optimizada

Una imagen puede tener las siguientes extensiones, .jpg, .gif, .png, .bmp, .tiff, etc. Cual de ellas debes de usar?

GIF

Las .gif son usadas para imágenes animadas, si es estática mejor usa otro formato.

PNG

Las .png no pierden calidad de imagen, por lo que se recomienda utilizarlas en imágenes pequeñas. En una web, se utilizan estas extensiones para las imágenes de los botones, los logotipos, los iconos, etc.

JPG

Las .jpg pierden calidad, y son las que debemos usar para las fotografías. Si tienes una fotografía, asegúrate de que tenga un formato .jpg para que ocupe el mínimo espacio.

Con COMPRESSPNG podrás comprimir todas tus imágenes.

Con PICASION podrás generar archivos animados .gif.

2. Reducir tamaño de las imágenes

reduccion-tamaño-imagen

El tamaño esta vez si que importa, y es una de las medidas mas importantes para comprimir tus imágenes. El tamaño de la imagen se mide por la cantidad de píxeles que tiene cada imagen, a esto se le llama resolución. A mas resolución, mejor podremos ver esa imagen cuando la ampliemos. Lo mismo pasa con tu web, es posible que una imagen tenga una resolución de píxeles excesivamente grande cuando realmente el usuario ve la imagen en un tamaño reducido. Aquí lo que tenemos que hacer es medir la medida real que ocupa nuestras imágenes en nuestra web y ajustarla a la resolución adecuada. A continuación os indicamos un programa para ajustar el tamaño de las imágenes. También os indicamos una tabla donde se compara la resolución en píxeles que ha de tener una imagen respecto el tamaño en cm que ocupa esa imagen.

Con WEBRESIZER podrás reducir el tamaño de tus imágenes.

En la siguiente tabla te recomendamos que apliques el tamaño de píxeles según la medida en cm que ocupa en tu web.

tamaño-imagenes-segun-pixeles

3. Combinar imágenes con CSS sprites

Si una web tiene muchas imágenes, cuando la cargamos, el navegador ha de hacer tantas llamadas al servidor como imágenes tengamos en esa página. Puedas unir varias imágenes en una? Esto reduce significativamente las peticiones que hace el navegador a tu servidor, reduciendo tiempo y carga de una web.

Y como se unifican muchas imágenes en solamente una?

El proceso requiere un poco de programación CSS, HTML y algún programa como paint o photoshop. El paint se encuentra en tu windows, en la carpeta de accesorios.

Primero vas a tener que coger las imágenes que quieras combinar y mediante paint las vas a tener que unificarlas en una sola. Luego las grabas como una sola.

Una vez tenemos todas las imágenes agrupadas en una sola, hemos de ir a nuestro archivo CSS y nuestro HTML y generar los códigos para ir modificando el posicionamiento de las imágenes iniciales por esta última. El primer código a generar será el siguiente, ubicado en el archivo CSS de tu web.

.imagencombinada {width:75px; height:150px; background:url(images/imagennueva.png) 15px 15px;}

Este código lo que hace es definir las dimensiones y la imagen nueva que hemos creado

El siguiente código lo que hace es definir la ubicación de donde va a ir la nueva imagen. Éste código se ubica en tu archivo html y lo que hace es llamar al código CSS anterior.

<div class="imagencombinada"></div>

Cada web y cada grupo de imágenes deben ser reprogramadas de manera distinta, por lo que se requiere un poco de habilidad para dejarlo todo igual que antes.

4. Indicar el tamaño en las imágenes

Si algo tiene de bueno wordpress es que cada vez que se carga una imagen, wordpress te genera muchas copias de esta misma imagen pero de distinto tamaño y te las nombra todas y cada una de ellas. Cada copia que te ha generado tiene el mismo nombre inicial pero con una terminación diferente. Por ejemplo, la imagen “ventana_azul.jpg”, wordpress te hace varias copias con distinto tamaño y te los nombra de la siguiente manera.

ventana_azul-500×500.jpg
ventana_azul-250×250.jpg
ventana_azul-100×100.jpg
ventana_azul-50×50.jpg

Cada archivo tiene unas dimensiones y ocupa una memoria diferente. Un archivo con dimensión 50×50 ocupa mucho menos que una con dimensión 500×500.

Para que se indica el tamaño de cada imagen en una web?

Cuando un usuario hace una petición a una web, el navegador puede empezar a presentar una página antes de haber cargado todas las imágenes, siempre y cuando el navegador sepa la dimensión que va a ocupar dicha imagen. Si no se especifican las dimensiones de las imágenes, el navegador va a presentar una página que no va a coincidir con las imágenes reales y cuando las imágenes estén completamente cargadas, el navegador va a tener que modificar toda la web para que las imágenes queden encuadradas dentro de la página.

Asegúrate que todas las imágenes de tu web indiquen la dimensión del tamaño que ocupan.

5. Utiliza el caché de las imágenes

Cuando un usuario vuelve a visitar una web que ya había visitado anteriormente, si tu web tiene un sistema de caché que guarda las imágenes en el ordenador del usuario, las imágenes que se van a cargar por segunda vez van a ser cogidas del ordenador del usuario y no del servidor de tu web. Esto reduce el tiempo de carga de tu web y aligera las peticiones que hacen los usuarios a tu servidor.

Coloca el siguiente código en el archivo .htaccess de tu web y conseguirás que las imágenes de tu web queden en el caché de los navegadores. Este código a parte de incluir caché de tus imágenes, también incluye caché de archivos .ico, .pdf, .js, .css. etc.

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A2419200
<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

6. Carga tus imágenes progresivamente

Este sistema lo que hace es cargar la imágenes de una página web de manera progresiva. Cuando un usuario abre una página con mas de 50 fotos, la mayoría de las imágenes queden abajo de la página. Hasta que el usuario no baje para abajo de la página, posiblemente no verá dichas imágenes. Las imágenes que el usuario no ve cuando abre una página, pueden ser cargadas al final de todo.

Existe un sistema para poder cargar las imágenes de manera progresiva. Esto hace que una web pueda presentarse antes de que estén todas las imágenes cargadas. Esto ayuda a que el usuario pueda ver la web sin que esté totalmente cargada.

Este sistema de carga de imágenes progresivamente requiere de saber código jQuery. Este sistema de programación permite la carga de imágenes de manera variable.

Otros artículos que te pueden interesar:

Comentarios:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *