¿Cómo hacer que una foto pese menos?
Sin perder calidad, claro, que tú para tu web solo quieres lo mejor.
¡Aaaaay!
Tan bonitas, tan necesarias, tan molonas… las fotos son imperativas en tu web, pero si no las trabajas antes de subirlas pueden ser un auténtico dolor de cabeza para que la cosa chute.
¿Que por qué?
Pues porque las fotos son elementos audiovisuales que tienen un peso en kb —o mb— que los usuarios tendrán que descargar cuando se conecten a tu web desde su navegador.
Y si pesan mucho, tu web cargará horrible y el usuario se irá por patas. Cosas del WPO —Web Performance Optimization—.
¿Te imaginas entrando a Google y que su logo pesara 270 mb?
Es un caso exagerado, pero por ahí va el asunto: a las fotos hay que bajarles el peso antes de subirlas, pero sin que pierdan calidad.
¿Y eso cómo se hace?
Pues siguiendo dos sencillos pasos. Si lo haces así, en menos de 10 segundos tienes tu foto con menos peso sin perder un ápice de calidad.
La foto de portada de este post no la tomes como ejemplo, que este año las doce las estoy generando con una IA, pero no me está gustando cómo queda y no quiero dedicarle más tiempo.
Te voy a hablar de...
Venga, vamos con esos pasos, pero antes una pequeña aclaración.
En las fotos, el tamaño sí importa porque determina mucho el peso
Cuando te metes en un banco de imágenes y te descargas una foto, esta tiene unas medidas.
Generalmente, la h*stia de píxeles de alto por la reh*stia de píxeles de largo.
Tanto píxel solo sirve para cuando imprimes esa foto para un póster gigante, en formato físico.
En ordenador o móvil no te sirve de nada tener una foto con un largo de 6.000 px, salvo que quieras hacer un zoom tremendo y seguir viendo con nitidez.
Un ordenador con una resolución de FullHD tiene una pantalla de 1.920 píxeles de ancho. ¿Para qué colgar, entonces, una foto de 6.000 px? Una foto que, en ese caso, el navegador tendrá que cargar en su totalidad, aunque luego la muestre redimensionada.
Si hablamos de fotos principales de posts, con las pantallas en las que nos movemos hoy en día lo suyo es que tengan un tamaño de unos 1.200 píxeles. Te sobrarán unos 700 px por los lados, salvo que quieras una foto de ancho completo, en cuyo caso tendrás que irte a los 1.920 píxeles.
Tenlo en cuenta: el tamaño de las fotos en píxeles influye muchísisisisimo en su peso.
Por lo tanto, para bajarle el peso a una imagen sin perder calidad sus dimensiones será lo primero que tengas que mirar.
Y ahora sí, vamos con el paso a paso para bajar peso —de una imagen, que los kilitos de nuestra barriga no se van tan rápido, lamentablemente—.
Por cierto, a las capturas que publique para que veas el resultado, les voy a poner el peso real, para que no tengas que descargártelas a la hora de comprobar el peso.
#1 Ajusta el tamaño de la foto
Mi recomendación es que primero pienses dónde la vas a subir. A qué espacio en tu web.
Cuando te hablé de optimizar imágenes me puse más intenso con eso, pero aquí lo vamos a simplificar mucho y nos vamos a curar en salud.
- Foto principal de un post: déjala en unos 1.200 px de largo
- Foto intermedia de un post: déjala en unos 800 px
- Foto de una página de servicios que ocupa un trozo: déjala en unos 500 px
Y si tienes tus dudas, haz una regla de tres.
Mira tu pantalla y piensa que son unos 2.000 píxeles.
Si el espacio de la web es una tercera parte aproximadamente, pues haz que el largo de la foto sea 700 px. U 800 px y te aseguras.
Y si es la mitad, pues ponle 1.000 px de largo.
El paso a paso para cambiarle el tamaño a una foto
Lo primero es saber qué tamaño tiene. Para eso, si ya la tienes en tu disco duro, solo tienes que ver sus propiedades. Y si no, que te la estás bajando, mira:
Me he ido a mi banco de imágenes —Depositphotos— y he ido a buscar una que nos sirva de ejemplo.
La foto original la tienes aquí.
He elegido esa de un gintonic, que ayer se inauguró el verano y oye, pues como que apetece.
Mira el tamaño XL: la foto tiene 6.016 px de ancho.
Me la descargo y ya la tengo en mi ordenador, con un nombre muy feucho.
Y estoy seguro de que eso va a pesar muchos kb. De hecho, varios mb:
Pammmm: 6,1 mb de peso.
Hay que bajar el peso de esa foto como sea, y como decía… vamos a empezar por el tamaño.
Si despliego la pestañita de más información me sale el tamaño —que ya habíamos visto en Depositphotos—:
Y una vez sabes el tamaño, ¿qué herramienta usas para cambiarle el tamaño a la foto?
Mi recomendación es, sin lugar a dudas, Squoosh:
Cuando subes la foto original desde tu disco duro te sale así, en plan partida por la mitad.
A la izquierda, cómo se ve de forma original.
A la derecha, cómo se verá una vez le apliques los parámetros que tienes en la parte de abajo a la derecha.
¿Ves uno que pone «Resize»? Pues es ahí:
Con nuestro impecable dominio de la lengua de Shakespeare entendemos que esos 6.016 px son el ancho… algo que podemos editar y poner, suponiendo que vaya a ser una imagen principal para un post, 1.200.
Si lo hacemos, mira lo que se ve todavía más abajo. El valor del peso de la foto se actualiza:
La foto original pesaba 6,1 mb.
Una vez subida a Squoosh hace un ajuste automático y pasa a pesar 1,03 mb, todavía demasiado.
Tras cambiarle el ancho y pasar de 6.016 a solo 1.200, magia: ya pesa 62,8 kb.
Y esto, que parece un soberano co*azo, en realidad te cuesta hacerlo alrededor de 5 segundos.
#2 Ajusta la calidad de la foto
Y aquí viene la segunda clave: la calidad.
Y no hace falta que ponga más capturas, porque si te fijas en la de arriba hay una barrita que dice «Quality» con la que podemos jugar.
Por defecto, Squoosh la coloca en 75, pero si te da mal rollo porque crees que no se ve suficientemente bien la puedes subir a 100.
A más calidad, más subirá de peso.
La clave para bajarle el peso a la foto sin que pierda calidad es colocar esa bolita en un punto en el que sigas viendo la imagen con nitidez y el peso sea algo asumible.
Y con asumible me refiero a…
- Si es la foto principal del post y tiene 1.200 px de largo, no pasa nada si el peso ronda de los 300 kb
- Si es una foto de mitad de post y le das un ancho de 800 px, lo suyo es que no pase de los 150 kb
- Y si es una fotito pequeña que pones en alguna página de tu web, pues dependerá del tamaño. Pero vamos, que si no es muy grande yo te diría que intentes que nunca jamás permitas que pase de los 80-100 kb.
Ojo, ¿eh? Que esos límites son los que impongo yo mentalmente.
Otra persona seguro que te dice que es demasiado, pero bueno. Sentido común.
Ya estamos en la era del 5G, con un Internet del copón allá donde vayamos, con capacidad de reproducir vídeos sin despeinarnos y sin agotar la cuota de datos.
No pasa nada si la foto principal pesa 300 kb en vez de 140 kb, porque con las conexiones actuales se van a cargar fácil, fácil.
Hace unos años yo decía que esos 300 kb no pasaran de los 100 o 150 kb, pero la tecnología avanza y oye, la calidad de las fotos que subimos, también.
Mira, por razones de capacidad de mi hosting no voy a subir la foto del gintonic original —si este post sobre cómo reducir el peso de una foto lo leen 500 personas de golpe y se descargan una foto de 6 mb, adiós a 3 gb de cuota de disco en mi hosting—.
Te la pongo aquí, en la fuente.
Y aquí van unos ejemplos de cómo optimizarla, para que veas que se puede reducir el peso de una foto sin que pierda ni pizca de calidad:
Foto con tamaño original —unos 6.000 px de ancho— y calidad al 75. Peso: 1,06 mb.
La ves a menor tamaño porque en tu pantalla no caben los 6.000 px de ancho. Se ajusta.
Ahora a la original le vamos a reducir el tamaño, para que sea de 3.000 px de ancho y a una calidad de… 90, por ejemplo. Me sale con un peso de 488 kb:
¿Ves mucha diferencia con la anterior? Yo tampoco.
Vamos a bajarle a la original ahora el tamaño a 1.200 px y de calidad vamos a dejar 90. Sale con un peso de 159 kb:
¿Ves?
Apenas hay diferencia entre las fotos, y optimizando el peso de esta ya hemos conseguido que se sitúe en unos excelentes 159 kb, algo que no molesta en absoluto a la velocidad de carga de nadie.
Sobre el formato que menos pesa de una foto
Del formato de la foto no hemos dicho nada, pero cuando me la he bajado en original estaba en PNG, y al bajarla de peso Squoosh se ha cambiado a JPEG.
- Usa PNG solo cuando la foto tenga transparencias, como cuando quieres quitarle el fondo
- Usa JPEG para el resto de casos
- Y si quieres optimizar muy muy muy mucho mucho el peso, convierte la foto al formato WebP, algo recomendado por Google pero que de momento no he experimentado
Herramientas para bajar el peso de la foto
No te he nombrado más porque con Squoosh lo puedes hacer todo, pero a la hora de bajar el peso tienes un montón.
Las hay para reducir el tamaño, otras para bajarle la calidad automáticamente, otras que lo hacen todo…
En fin, aquí unas pocas más además de Squoosh. Todas gratuitas, por cierto:
Luego tienes plugins que le bajan el peso a tu imagen en la web una vez la subes a tu WordPress, pero meh.
Seguirían ocupando espacio en tu hosting y cuantos menos plugins, mejor.
A bajar peso de imágenes como si no hubiera un mañana
Venga, resumiendo, que es gerundio:
- Le cambias el tamaño a la foto y la dejas en 1.200 px como máximo
- Le cambias la calidad y ajustas a una en la que la foto se vea nítida y a su vez, no pese demasiado
Y hala, ya estaría la foto comprimida.
El proceso de optimización de una imagen continuaría con el nombre del archivo y el atributo ALT, pero eso ya otro día.
De momento, objetivo cumplido: ya hemos visto cómo bajar el peso de la foto sin perder calidad en cuestión de segundos —literalmente—.
¡A bajar kilos kilobytes!
