Optimizar fotos para tu web

Optimizar fotos para tu webSaber optimizar las fotos de tu web es algo fundamental para mejorar su calidad y posicionamiento. Gracias a los sistema de gestión de contenidos, también llamados CMS (Content Management System) se facilita a usuarios sin conocimientos de desarrollo web que puedan actualizar e incorporar nuevos contenidos a su página, tanto texto como imágenes.  

Una de las tareas de actualización mas habitual y que mas dudas genera es la relativa a las fotografías que usaremos en nuestra web y que pueden ser desde imágenes que acompañan en la descripción de contenidos a galerías de productos o portafolios con ejemplos de proyectos realizados. Estos gestores incorporan una utilidad básica para adecuar el tamaño de la foto a dimensiones estandarizadas pero no tienen en cuenta un factor muy importante en el desarrollo web, el peso de las imágenes.

A continuación describiremos algunos conceptos básicos que cualquier usuario que utilice uno de estos sistemas como WordPress debería conocer para lograr un mejor rendimiento de su web.

Las fotos pesan demasiado

Al navegar por internet, el tiempo que tarda en cargar la página que visitamos depende del peso total de los archivos que la forman y de la velocidad de la conexión de la que disponemos en ese momento. El tiempo que nuestro navegador tarde en interpretar todos los contenidos y mostrarlos en pantalla resulta decisivo no solo de de cara al usuario sino también para Google. Vídeos, fotografías y animaciones suelen ser los elementos mas pesados que encontramos en una web y debemos tenerlos muy en cuenta si pensamos utilizarlos frecuentemente.

Que es eso del peso

El peso de una imagen, es la cantidad de espacio que ocupa como archivo físico en un dispositivo de almacenamiento como tu disco duro o el servidor donde se aloja la web y viene expresado en Kilobytes (Kb) o Megabytes (Mb) a los que coloquialmente nos referimos como los “megas” que pesa dicha imagen. Una cámara digital doméstica puede llegar a generar fotos de hasta 1’5 megas con una configuración de calidad y formato media.

Tratar de incorporar directamente una imagen de este tamaño a nuestra web resulta excesivo y debemos optimizarla antes de cargarla con nuestro CMS.

Por qué optimizar las fotos de tu web

Es importante lograr que nuestros contenidos pesen lo menos posible manteniendo una calidad adecuada para que la carga de la página no se ralentice y disuada al visitante por una espera excesiva. Para ello debemos optimizar la imagen y lograr así agilizar la carga  reduciendo considerablemente los tiempos de carga.

Una fotografía se dice que está optimizada cuando se ha adecuado su tamaño y su peso al uso al que se destina y que mantiene un equilibrio adecuado entre calidad visual y su peso.

 

Dimensiones, resolución y formato de las imágenes

Existen diversos parámetros que definen una imagen, pero aquellos que nos interesa conocer en este caso son sus dimensiones (en píxeles), formato y resolución o calidad de la misma.

  • Dimensiones: hace referencia al alto y al ancho que tiene la fotografía y se expres en píxeles. Normalmente guardan un formato horizonatal proporcional 4:3 por lo que podremos encontrar fotos con dimensiones desde 800×600, 1024×768, 1280×960, 1600×1200… en adelante.
  • Resolución: podríamos definirla como la calidad de la imagen o el número de pixeles por pulgada que tiene la fotografía. A mayor número, mayor información contiene la imagen y mayor definición aunque también será mayor el peso del archivo resultante. Las cámaras digitales actuales generan fotografías de 300ppp (puntos x pulgada) lo cual resulta muy importante para su impresión pero no tanto para ser mostradas en pantalla, ya que los monitores y dispositivos móviles habituales no son capaces de mostrar mas de 72ppp.
    Por tanto si utilizamos imágenes en su resolución original estamos dando mas información de la que se va a procesar realmente y estaremos haciendo que pese mucho mas de lo que sería necesario.
  • Formato: a pesar de existir decenas de formatos de imagen, los estandares y recomendados para su uso en la web son los denominados formatos de “mapa de bits” o mosaico de píxeles en los que cada píxel guarda la información de color de la parte de imagen que ocupa. Destacaremos el formato JPG por su capacidad de comprimir la información de color de los píxeles y lograr así reducir el peso de la imagen.

Buenas prácticas para optimizar fotos para tu web

Resulta por tanto muy recomendable adecuar las dimensiones y resolución de las fotografías que utilicemos en nuestra web a un formato mas adecuado como el el estandarizado 800 x 600 pixeles o 1024x768px (ancho x alto) correspondiente al tradicional formato horizontal.

Cómo optimizar fotografías

Si no dispones de un programa de edición o retoque fotográfico es posible que el fabricante de tu cámara fotográfica disponga de algún programa propio que puedas descargar desde su página web y te facilite la tarea. Si no disponemos de ellos o no queremos instalar un software en nuestro ordenador disponemos en la actualidad de multitud de herramientas online que nos ayudarán a editar las fotos utilizando tan sólo nuestro navegador.

Programas

Una de las más básicas pero que cumple su cometido a la perfección la encontramos en http://www.reducirfotos.com/ donde con un interface muy sencillo nos permite la carga de la fotografía desde nuestro ordenador, recortarla a tamaños estandar como 800×600 o 1024×768 e incluso adaptarlas a los actuales formatos para redes sociales como facebook, twitter y Google+

Si bien también cuenta con un sistema muy sencillo para añadir algún texto o detalle gráfico no la recomendamos en este aspecto y veremos otras herramientas mucho mas útiles para realizar composiciones en el siguiente post

Gustavo es el responsable del diseño y desarrollo web de Piensaenweb. Es meticuloso y creativo. No deja de sorprenderte. Entrega las webs con un lazo. Un artista.

Deja un comentario