Optimizar imágenes para la web

Optimizar imágenes para la web

Que un sitio web sea rápido de cargar cada día es más fundamental, y en esto influye de manera muy importante el peso de las imágenes de sitio, siendo este el primer factor a revisar si quieres acelerar tu web. Hoy, para ayudar a conseguir optimizar imágenes para la web, quiero dejar algunos consejos y referencias que espero puedan ser de utilidad.

En esto… ¡el tamaño si importa!

Utilizar un tamaño de imagen equivocado es un error que aún se sigue cometiendo, aunque bien es vedad que cada vez ocurre con menos frecuencia. Usar imágenes más grandes de lo necesario hará que nuestro sitio sea tan pesado como un dinosaurio y por tanto tardará una eternidad en cargar, tiempo más que suficiente para que nuestros visitantes abandonen nuestro sitio cansados de esperar. Hemos de asegurarnos que la imagen tiene las mismas dimensiones que la zona en la que se mostrará.

Antes de que alguien lo pregunte, ya lo hago yo… ¿y que pasa con el responsive? Pues si, el responsive es un tema un poco diferente, aunque el principio general también le es de aplicación. Solución: Responsive Image Service, es el mejor servicio que he encontrado para hacer el proceso más sencillo.

Guarda para web

Si eres usuario de Photoshop utiliza la función “guardar para web”, e intenta encontrar el punto óptimo entre el tamaño del archivo y la calidad de la imagen. Aprovecha y revisa si de verdad necesitas cada una de las imágnes que aparecen en la web.

Elige el formato de imagen adecuado

Si hablamos de imágenes de mapa de bits, el JPG es el rey, aunque no hemos de olvidar el formato de archivo PNG y el formato GIF. Cada uno tiene sus particularidades, pero si tengo que utilizarlos en función de su mejor rendimiento, usare el formato PNG para las imágenes con transparencia, para imágenes animadas el formato GIF y para fotografías el formato JPG (mejor el de carga progresiva).

Otra opción es usar imágenes vectoriales, y aquí el que manda es el formato SVG. Este formato tiene beneficios frente a las imágenes de mapa de bits, como que no pixelan al aumentar su tamaño y que pesan menos.

¡Magia potagia!

Pero si no tienes tiempo y lo que necesitas es un poco de “magia”, siempre podemos recurrir a algún que otro software que lo haga todo por nosotros mientras tomamos un café:

Para Windows con licencia LGPL FileOptimizer.

Para Mac OS X la aplicación gratuita ImageOptim.

¿Tienes algún otro consejo o recurso que añadir?

7 thoughts on “Optimizar imágenes para la web

  1. Muy útil este post Eduardo, gracias, la verdad que yo tengo tarea con la optimización de imágenes pasadas en el blog, pero bueno, ya llevo tiempo haciéndolo medianamente mejor 🙂

  2. Gracias por el post. Es muy útil, ya que en mi caso siempre me ha costado optimizarlas. Un saludo 🙂

  3. Es muy importante la labor de optimización de imágenes, si no queremos que el usuario se aburra de esperar a que descarguen la imágenes de la web, o que Google nos pueda penalizar por ello.

    Interesante artículo.

  4. Muy interesante, como siempre! Un saludo.

  5. El eterno dilema, sacrificar resolución por poco peso. Afortunadamente, cada vez más, internet permite imágenes de más calidad y mayor tamaño.

  6. Dani, no es sacrificar resolución, es buscar la calidad optima para tu web sin perder calidad.

  7. Tus artículos sobre imágenes me interesan especialmente, ya que nos dedicamos a la fotografía. Muy útil la información!

Deja un comentario