Cómo reducir el tamaño de las imágenes para internet

No es un secreto que hoy por hoy no es suficiente con tener un página web bonita, tiene que ser rápida en cargar. Si tarda mucho, el usuario se cansará y buscará lo que necesita en otro sitio. También es sabido por todos que las fotos son los elementos que más perjudican a la velocidad y que tenemos que reducir el tamaño de las imágenes para optimizar nuestro sitio.

Conseguir una web más rápida con fotos menos pesadas

En otros artículos ya he hablado de cómo podemos optimizar las imágenes en WordPress, pero en esta ocasión me centro en algo más general y que deberíamos tener en cuenta, sea cual sea nuestra web o cómo esté construida.

Aunque existen muchos métodos para mejorar la carga de las imágenes una vez que las hemos colocado en su sitio, lo mejor es atacar el problema desde el principio. Lo otro es poner un parche a algo que se nos ha pasado.

Por tanto, hay que seguir unas pautas para tener unas imágenes súper optimizadas, acordes con nuestra web.

Configurar las imágenes antes de subirlas a internet

Es primordial hacer un seguimiento a cada foto que coloquemos acompañando un texto, un artículo, un producto... Cada una necesita unas características propias y únicas, y si no las respetamos, perjudicamos la optimización general de la web.

• Intención de las imágenes:
  • Es importante decidir para que vamos a usar las imágenes, si son un complemento importante del contenido es posible que necesitemos mostrar el máximo detalle posible, e incluso ofrecer una vista ampliada, en estos caso habrá que buscar una solución como mostrar una miniatura y un enlace a la foto original, así evitamos perjudicar la carga de la página. Insertar la imagen original e indicar que tenga unas dimensiones menores, no reduce el peso del archivo a cargar.
  • Si las fotografías son un mero acompañamiento, entonces es necesario reducir el tamaño de las imágenes al máximo antes de colgarlas.

• Dimensiones de las imágenes
  • El tamaño de las imágenes debe ser siempre el máximo que vamos a mostrar al usuario, si el espacio asignado en una web para una imagen es de 500x300 píxeles, hay que reducirla a ese tamaño. Una tamaño mayor necesita más recursos innecesarios para mostrar la imagen, y supone también un mayor tamaño de archivo.

• Formato de archivo:
  • Los formatos más utilizados son JPG, PNG y GIF, aunque hay otros, estos son los más estandarizados. Aunque seguro que cada uno tendrá sus preferencias, hay que diferenciarlos a la hora de querer utilizarlos.
    • JPG permite una compresión de colores semejantes dentro de la imagen, con lo que reducimos mucho el peso del archivo perdiendo un mínimo de calidad, pero en la mayoría de los casos, inapreciable y muy beneficioso.
    • PNG se utiliza normalmente para crear imágenes con fondos transparentes, son más pesados los archivos pero permiten integrar las imágenes sobre fondos diferentes.
    • GIF es un formato antiguo, pero se mantiene por ofrecer imágenes en movimiento. También admite transparencias (sobre 256 colores), pero en este punto ha sido superado por el formato PNG al obtener mejores resultados. Estos archivos suelen pesar mucho al incluir varias imágenes que se van sustituyendo para dar la sensación de movimiento o cambio, por esto suelen ser de dimensiones reducidas.

Proceso para reducir el tamaño de las imágenes

Si disponemos de un editor gráfico para recortar las imágenes y bajarlas de peso, no tendremos problemas para adecuarlas a las dimensiones necesarias.

Si no es así, tenemos opciones muy interesantes en internet para realizar el proceso de forma online y gratuita. En este vídeo os explico como lo hago yo con una herramienta llamada Pixlr editor.