Una de las cosas más importantes para que tu web funcione es que cargue rápidamente y una de las razones por las que las web se ralentizan es porque contienen imágenes que no están optimizadas.

Lo ideal es que una imagen no pese más de 1MB. En el post de hoy os voy a dar unos consejos muy básicos a la hora de optimizar las imágenes de tu web y conseguir reducir esos KB que pesan de más en tu imágenes.

 

1 | RESOLUCIÓN

Tendemos a pensar que a cuanto más resolución mejor se verá la foto. Esto es cierto si la imagen va a ser impresa, pero si es para ver en pantalla da igual la resolución que tenga que se verá a 72 ppp (pixels por pulgada) Una pantalla no da más de si, así que podemos evitar que la imagen pese más de lo debido si en lugar de tenerla a 300 ppp la guardamos directamente a 72 ppp.

          EN PHOTOSHOP

Si cuentas con Photoshop cambiar la resolución de una imagen es tan sencillo como ir a Imagen > Tamaño de imagen y dónde pone Resolución: modificarlo a 72 (fíjate que está en pixeles/pulgada y no pixeles/centímetros)

          SIN PHOTOSHOP

Si no tienes Photoshop en tu ordenador no hay problema, cada vez hay más opciones online. Esta página sería una opción. Sólo tienes que poner 72 donde pone New Value DPI y subir la imagen.

 

2 | DIMENSIONES DE LA IMAGEN

Otro aspecto que tenemos que tener en cuenta a la hora de editar nuestra imagen para ser usada en la web son las dimensiones. Hay ocasiones que usamos imágenes enoooormes y que en realidad ocupa un espacio muy pequeño en la web. Por ejemplo, las fotos de Unsplash que usamos muchos a modo de stock (si no la conoces apúntatela, está muy bien) suelen estar a 72ppp pero con unas dimensiones de 6000px de ancho. Una animalada y peso inncesario para nuestra web. Las imágenes más grandes, como pueden ser las del slider o banner principal, no hace falta que sean más grandes que 1100px de ancho.

Aquí te dejo un esquema de posibles tamaños para que tengas una idea.

¿Cómo podemos saber cuánto mide y modificarlo?

         EN PHOTOSHOP

Entramos en el mismo apartado de antes, donde hemos cambiado la resolución, en Imagen > Tamaño de imagen y ahí verás las dimensiones en pixeles de tu foto. Si mantenemos activada la opción de Restringir proporciones, con cambiar el ancho nos cambiará automáticamente el alto sin deformar la imagen.

         SIN PHOTOSHOP

Puedes usar esta página, por ejemplo. Solo tienes que subir la imagen y poner el ancho y alto que quieras (si solo pones uno de los dos campos y dejas el otro en blanco te mantiene las restricciones) Luego le das a descargar imagen y listo, se te abre en otra ventana donde puedes dar al botón derecho del ratón y Guardar imagen.

 

3 | COMPRIMIR LA IMAGEN

Un último factor que podemos modificar sería la compresión de la imagen, de manera que se reduzca su tamaño.

         CON PHOTOSHOP

A la hora de guardar un jpg, te saldrá una pantalla con las Opciones. Por defecto sale a una calidad alta, en el número 12, pero reduciéndola un poco conseguiremos también reducir su peso. Aquí no te puedo decir un número exacto que poner porqué dependerá de la imagen, pero ves jugando y viendo la diferencia.

         SIN PHOTOSHOP

En este caso os dejo otra web para la compresión de imágenes tanto jpg como png.

 

 

Para rematar el post, os voy a dejar con un plugin para WordPress, WP Smush, que automáticamente te reducirá, optimizará y comprimirá las imágenes que subas a tu web. Y ahora estarás pensando “Podrías haber empezado por ahí…” pero no está de más saber otras opciones, no? 😉