Uno de los primeros retos a los que me enfrenté como webmaster de este blog, fue el relacionado con las imágenes. Necesitaba comprimir imágenes (JPG, PNG, GIF) con un nivel de exigencia muy alto si quería optimizar los recursos del servidor y que además cargaran rápido.
Hoy os voy a explicar los 2 métodos que utilizo para editar y comprimir imágenes como un verdadero ninja. Durante los últimos 3 años he probado de todo, pero al final, esto es lo que mejor me funciona, así que quiero compartirlo con vosotros.
Cómo comprimir una o varias imágenes de golpe de la forma más sencilla posible
Lo que mucha gente recomienda para comprimir imágenes es utilizar programas como Photoshop u otros editores multimedia del estilo. Algo que está muy bien, pero este tipo de aplicaciones no suelen ser baratas precisamente y además traen un montón de funciones pro que a mí personalmente me sobran solo quiero hacer un par de retoques y comprimir unas fotillos, no crear un corto de animación de 8 minutos-.
Cómo editar y comprimir una imagen sin instalar ninguna aplicación
Cuando lo único que necesito es comprimir una imagen y ajustar sus márgenes y el tamaño utilizo una herramienta web llamada Pixlr Express. Es una aplicación online que vio la luz de la mano de Autodesk hace años los mismos del Autocad-, y que ahora ha adquirido otra compañía (123RF). Pero vayamos al grano…
La cosa es que sigue siendo gratuita y funciona igual de bien. No solo eso, sino que no requiere registro y nos permite editar imágenes, añadir filtros, tipografías y un buen puñado de efectos. Yo hace tiempo que la tengo en la carpeta “favoritos” de mi navegador.
Para comprimir una imagen con Pixlr Express solo tenemos que cargar la imagen en el editor y darle a “Save”. A la hora de guardarla la herramienta nos permitirá aplicar el nivel de compresión deseado (desde 0% hasta 100%).
Por supuesto, la calidad de la imagen irá en consonancia con el nivel de compresión que apliquemos. Como recomendación personal, os aconsejaría que aplicarais un nivel de compresión del 65% respecto al original. Es ese punto en el que la imagen todavía se ve bien y su peso se reduce drásticamente.
Cómo comprimir varias imágenes de golpe y en cascada
Si tenemos varias imágenes trabajar con Pixlr puede hacerse un poco pesado. Para estos casos, utilizo un programa gratuito llamado RIOT (Radical Image Optimization Tool), especialmente diseñado para comprimir imágenes JPG, GIF y PNG.
RIOT nos permite cargar una imagen, ajustar el nivel de compresión y ver una previsualización de cómo quedaría una vez aplicada la compresión. Esto nos viene genial para ajustarla lo máximo posible y que todavía se vea bien.
Pero la verdadera magia de RIOT está en su función “Batch”. Desde aquí podemos cargar varias imágenes de golpe (por ejemplo, todas las imágenes contenidas en una carpeta o subcarpetas) y comprimirlas en cascada. Para ello solo tenemos que pulsar sobre el icono de “Batch”, seleccionar la carpeta de destino (Output folder) y la carpeta de origen (Add images -> Add all images from folder). Una vez tenemos todo a nuestro gusto, basta con pulsar sobre “Start” para realizar la compresión en masa para todas las imágenes seleccionadas.
La diferencia entre comprimir imágenes una por una y hacerlo de esta manera es sencillamente abismal. Imaginaros que tenéis que optimizar todas las imágenes de un trabajo de la universidad, o peor, todas las imágenes de vuestra página web.
El nivel de compresión perfecto para las imágenes de un blog o página web
Como os comentaba un poco más arriba, el nivel de compresión perfecto es del 65% para páginas web. Pero esto solo es una recomendación personal…
Pero si tenemos una página web y queremos el nivel de compresión “perfecto” seguro que querremos algo más que la recomendación personal de un chalado que se hace llamar “el androide feliz”.
Para estos casos, Google cuenta con la conocida página para webmasters Pagespeed Insights. Esta herramienta, además de decirnos la velocidad de carga de nuestra web y darnos algún que otro consejo, también nos permite descargarnos una copia de todas las imágenes que contiene una URL concreta. Estas copias de las imágenes estarán 100% optimizadas.
Para descargar las imágenes debemos introducir la URL donde cuelgan las mismas, y pulsar sobre el botón de “Analizar”. Una vez completado el análisis, desde la pestaña “Ordenador” nos desplazamos casi hasta el final, y pulsamos sobre el link “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página”. Automáticamente obtendremos un archivo ZIP con dichos recursos ya optimizados.
Espero que este tutorial os sea de ayuda. Si hubiera podido leer algo así cuando empecé con este proyecto, seguramente me habría ahorrado muchos dolores de cabeza.
P.D: Post dedicado a mi “yo” del pasado. ¡A ver si aprendes, chaval!