Ya la tienes. Has logrado la gran foto. Y ahora, te dispones a subirla a tu próximo post, pero… ¿está optimizada? Subir fotos directamente desde tu móvil puede hacer que la carga de tu web se ralentice mucho, perjudicando tu SEO y la experiencia del usuario. Con las cámaras que hoy por hoy incorporan los móviles, no es de extrañar que tengamos unas fotos que pesen varios megas. Incluso los de gama media, o móviles con algunos años de antigüedad pueden hacer fotos muy buenas, pero también muy pesadas.
Entrando muy poquito en la teoría, nos encontramos con tres problemas:
- Las dimensiones (medida en píxeles)
- La densidad de píxeles (medida en píxeles por pulgada, ppp)
- El tamaño o «peso» (medido en bytes, Kilobytes, Megabytes)
Las dimensiones de la imagen y la densidad de píxeles, son las causas de que el tamaño crezca desmesuradamente.
Por lo general, para ilustrar una entrada o algún apartado de tu web, la foto no debería pesar más de 100 Kb.
Entonces si he sacado la gran foto y «pesa» 2, 3 o 20Mb ¿cómo hago para optimizar la foto y que no afecte a la velocidad de carga de mi web?
Hay 3 opciones:
- Utilizar un optimizador online: tinypng.com o kraken.io son solo dos ejemplos que funcionan muy bien.
- Usar dos pasos:
- Reducir el tamaño de la foto en un editor de imágenes: recomiendo photopea.com. Es online, gratuito, y funciona perfecto para esto.
- Pasar la imagen obtenida por el optimizador online del punto anterior.
- En WordPress, utilizar un plugin como Smush que se encarga del trabajo cuando subes la foto, aunque no es todo lo óptimo que nos gustaría, pero ayuda.
En cuanto a la segunda opción, utilizando un editor de imágenes prácticamente no es necesario usar la tercera. A mí me gusta trabajar de esta manera, así que voy a ir un poco más en detalle aquí.
Supongamos que mi imagen tiene este tamaño:
Ahora voy a photopea.com y empieza la magia:
Abrimos la imagen que queremos modificar y buscamos la opción Image > Image size
Aquí podemos modificar las dimensiones y la densidad (DPI). Con 72 DPI o ppp para una web es correcto. Pero las dimensiones… ¡en este caso son enormes! Una foto de 700 px se verá correcta y pesará bastante menos. Luego de modificarla, podemos ir a File > Export file as JPG y podremos elegir la calidad. Con un 70% de calidad suele funcionar bastante bien. Haz pruebas y busca la calidad que más te guste.
Una vez exportado, puedes pasar la foto por el optimizador.
En este caso he utilizado tinypng.com, y el resultado es:
Y con dos pasos sencillos, hemos reducido una foto casi 35 veces el tamaño!!!
Y la foto tras ser optimizada, se ve así:
Quizás en otras fotos y con otras dimensiones, la variación no sea tan abismal, pero seguro que será determinante.
¿Tienes alguna duda o utilizas otra herramienta o forma para optimizar imágenes? ¡Te leo en los comentarios!
