¿Cómo optimizar tu web para que cargue más rápido?

Artículo escrito por Isa Macías, profesora del curso Diseño web sin código con Elementor y Wordpress

Creo que una de las frases que más he repetido a mis clientes desde que soy diseñadora web es “¡Por favor, optimiza las imágenes de tu web!”. Soy muy pesada con este tema, lo confieso, pero no te imaginas la de personas que cometen el error de incluir en su sitio fotografías o ilustraciones ENORMES, que pesan una barbaridad y que no tienen el formato de imagen correcto. Y esto es TERRIBLE porque:

1. Hace que tu web tarde muchiiiiiísimo en cargar, lo que provoca que el usuario se aburra de esperar y haga clic en el icono de cerrar pestaña sin haber visto tu sitio ¡Y eso es lo último que queremos!

2. Y además, hace que el servidor de tu web se llene prontísimo, teniendo que contratar constantemente más espacio (y pagar más dinero), cuando realmente no es necesario.

No te miento, preparar las imágenes antes de subirlas a tu web no es precisamente el Coachella, vamos, que es un proceso más bien aburrido, pero te recomiendo mucho que le dediques tiempo. Sería una pena tener un diseño web súper currado, como el que te enseño a crear en el curso ‘Diseño web sin Código con Wordpress y Elementor’, y unos textos muy bien escritos, pero no prestar nada de atención a las imágenes de tu web.

A continuación, te cuento los ajustes que yo suelo realizar para optimizar bien las imágenes de un sitio web, encontrando el equilibrio entre peso y calidad. Para que me entiendas bien, cuando hablo de calidad me refiero a que tus imágenes no se vean pixeladas, ni pierdan nitidez. Yo realizo todos estas configuraciones con Adobe Photoshop, pero realmente cualquier programa de edición de imágenes que sepas utilizar te valdría.

El tamaño
Depende mucho de las medidas que tenga tu sitio, te pongo un ejemplo, si tu web tiene un ancho máximo de 1600px, entonces:
- Si quieres que la foto o ilustración ocupe todo el ancho del sitio, debe tener 1600px de ancho.
- Si quieres que la imagen ocupe la mitad del sitio, el ancho debería ser 800px.
- Si quieres que ocupe menos espacio, puedes ir probando con una medida inferior a 800px, por ejemplo 600px o 460px.

El formato
El formato de imagen que menos pesa es .jpg por lo tanto es el ideal para utilizar en tu sitio web. Si vas a incluir alguna imagen con fondo transparente, entonces lo mejor es utilizar .png.

La resolución
Con una resolución de 72ppp es más que suficiente.

El peso
Es difícil establecer aquí una norma general, pero yo normalmente hago lo siguiente:
- Para imágenes muy grandes que ocupan todo el ancho de pantalla, intento no pasar nunca de 300KB.
- Para el resto de imágenes intento que pesen entre 50KB y 100KB ¡Y si es menos, mejor!

Para encontrar este equilibrio entre peso y calidad que hablábamos antes, también puedes echar mano de un optimizador de imágenes, en este documento que he preparado te cuento cuál utilizo yo y cómo funciona, en serio, soy súper fan de este tipo de programas porque se consiguen resultados muy brutales.

Además, en el documento encontrarás también un resumen de todo lo que te cuento en este artículo, junto con algún tip más, para que lo tengas siempre a mano cuando te toque preparar las imágenes de tu web.

Espero que te sirva ¡Y gracias por leerme!