Editar imágenes para GitHub

Reducir el tamaño de las imágenes

Aunque GitHub es muy potente y soporta imágenes de gran tamaño, es importante subir las imágenes reducidas para mejorar la experiencia del usuario que consulte el manual.

Por ello, se va a explicar a continuación una forma muy sencilla de reducir el tamaño de estas imágenes que se van a subir durante la edición de los manuales. Para ello se va a utilizar una aplicación gratuita squoosh.app.

Con esta aplicacion solamente se puede redimensionar la imagen y reducir su tamaño de archivo (peso).

En cualquiera de los casos, una vez que se haya entrado en Squoosh.app, lo siguiente será pegar desde el portapapeles o arrastrar la imagen a la aplicación.

Añadir la imagen a squoosh.app

Al añadir la imagen, se observa a la izquierda el peso original de la misma, y a la derecha el peso y la reducción que aplicado el software. Se observa una reducción considerable solo por añadir la imagen a squoosh.app

Reducción de imagen inicial

Top ↑

Redimensionar una imagen

Si la imagen que se va a insertar es excesivamente grande en dimensiones, esto no tendrá mucho sentido, lo máximo que se mostrará será una imagen de unos 2400px. Para ello, hay una opción llamada Resize que sirve para cambiar las dimensiones de la imagen.

Botón resize

Al activar esta opción se observan dos campos que muestran las dimensiones de la imagen. En ese caso, lo único que hay que hacer es ir a Resize, activar la opción y cambiar solamente el ancho de imagen (Width).

Modificación del ancho de imagen
Ancho de imagen modificado

Con este redimensionamiento de imagen veremos que se produce una reducción de tamaño de archivo considerable.

Diferencia en el peso de la imagen al cambiar las dimensiones

Top ↑

Reducir el tamaño de archivo de la imagen

Pero además, si no ha hecho falta redimensionar la imagen, pero el peso del archivo sigue siendo alto, existe la opción de cambiar la calidad de la imagen.

Para ello, lo único que hay que hacer es mover el deslizador de Quality hacia la izquierda para reducir este tamaño. En todo momento, veremos debajo cuánto se reduce el peso de la imagen.

Deslizador Quality

En este ejemplo se observa la calidad de la imagen reducida a 75, que es la reducción que introduce el programa por defecto y el peso de la imagen, que es de 230kb.

Deslizador y peso de la imagen a la calidad reducida por defecto

A continuación, se observa cómo el peso se reduce a 109kb cuando el deslizador se desplaza a calidad 35.

Deslizador y peso de la imagen tras reducir la calidad

En la pantalla se ve, sobre la imagen, un divisor que permite ver a la izquierda la imagen a calidad original y, a la derecha, la imagen con la nueva calidad. Lo óptimo es encontrar un punto en el que la imagen no se pixele, pero el peso de la misma no sea demasiado alto.

A continuación se ve cómo, al reducir a calidad 35 la imagen, ha disminuido bastante el peso de la misma, pero no se aprecia pérdida de la calidad sobre la propia imagen.

Comparador de imagen antes y después de la reducción

De esta forma, se podrán subir al manual imágenes optimizadas, pero de calidad. Aunque lo habitual es que solo haya que pasar la imagen por el programa sin necesidad de tocar ningún ajuste.

Última actualización: