Vamos a ver como optimizar las imágenes para la web de forma óptima. Ya sabemos cuan importante es la velocidad de carga de nuestra página web, y vimos una manera de optimizar nuestras imágenes usando solo herramientas en línea. Ahora vamos a optimizar las imágenes de una forma que es aún mejor.
Vamos a hacer todo, o casi todo, en el escritorio, con lo cual el proceso será más rápido. Usaremos para ello GIMP que es un programa gratuito y muy potente, que además es multiplataforma (de hecho si usa alguna distribución de Linux seguramente lo conoce).
Lo de utilizar un programa tan potente puede resultar un poco intimidante, ya veremos como lo que vamos a hacer no tiene demasiadas complicaciones. Tiene, por otro lado, la gran ventaja de que puede preparar las imágenes para la web un poco más de lo habitual…
Por citar algunos ejemplos de lo que se puede hacer fácilmente
- aclarar u oscurecer una imagen
- aclarar solo las sombras de la imagen
- convertir la imagen a blanco y negro
- enderezar la imagen
- simular que es un dibujo o una pintura
Un breve ejemplo
Como la explicación es intencionalmente detallada, se hizo muy larga y puede dar la sensación de que es algo complejo cuando no lo es.
Entonces buscamos algún video explicativo, como no encontramos ninguno que vaya directo al punto nos decidimos a grabar uno nosotros mismos. Sepan disculpar lo modesto de la producción, lo importante es que en poco más de tres minutos y sin apurarse explicamos el proceso completo. Igual conviene leer el artículo porque responde dudas que suelen surgir.
Instalar GIMP
Simplemente, vamos a la página oficial de GIMP y lo instalamos, si usa Linux seguramente está en sus repositorios. Lo abrimos y estamos listos para trabajar.
Optimizar nuestra imagen
2 reglas a tener en cuenta siempre
- Siempre, pero siempre, conservar la imagen original, ya que confundirse es muy fácil. Puede ser que nos hayamos confundido con la relación de aspecto (la proporción ancho/alto). A veces empezamos recortando y había que redimensionar antes, o al revés, o simplemente no nos gusta cómo quedo. O tantas otras cosas que nos pueden pasar.
- Siempre trabajar con la máxima calidad posible, idealmente sin pérdidas. Tanto WebP como PNG son aptos para esto. Una vez que tengamos la imagen exactamente como la queremos, recién ahí la comprimimos. Ya veremos cómo.
Primer paso: recortar la imagen
Lo primero que necesitamos es elegir qué imagen vamos a subir, obviamente. Para nuestro ejemplo vamos a usar una captura de pantalla de nuestro sitio web.
La vamos a abrir en GIMP, o simplemente la arrastramos y soltamos. Se va a encontrar con algo parecido a esto.
En nuestro ejemplo, lo primero que vamos a hacer es recortar nuestra imagen. Es lo más habitual. Sobre todo porque GIMP nos da la posibilidad de fijar la relación de aspecto. Esto es muy útil porque muchos temas requieren una relación de aspecto determinada.
Arriba, en esta imagen, puede verse (está un poco más oscura) que hemos seleccionado la herramienta recortar. Es importante que esté seleccionada la opción «eliminar píxeles recortados» (por defecto viene así).
El último de los cuatro casilleros que se ven es donde podemos seleccionar que respete la proporción de aspecto, en la imagen no está seleccionado. Puede seleccionarlo e indicar exactamente que relación de aspecto necesita, puede verse justo abajo. No tiene que limitarse a relaciones habituales, por ej. 2:3 puede poner exactamente la relación que requiere.
También tiene las opciones de usar un tamaño fijo, una anchura fija o una altura fija. La opción de tamaño fijo puede ser sumamente útil, ya sea porque solo necesita esa parte de la imagen o, más habitual: usted ya redimensionó la imagen, pero es un poco más ancha o más alta de lo que debiera.
Así se vería una vez que hallamos seleccionado lo que queremos conservar. Se hace simplemente estirando o contrayendo desde los bordes o las esquinas. Las esquinas siempre respetan la proporción, los bordes nos permiten modificarla si no fijamos la relación de aspecto.
Podemos mover la selección arrastrándola desde cerca del centro, si seleccionamos tamaño fijo, es lo único que podemos hacer.
Una vez seleccionada el área deseada, hacemos doble clic en el centro, o apretamos enter y se realizará el recorte. ¿No quedo como queríamos? Nos vamos a Edición > Deshacer y lo hacemos de nuevo.
Le va a mostrar una línea punteada según las dimensiones anteriores de la imagen, no se preocupe por eso, la imagen se recortó perfectamente.
Por favor, haga la prueba, con una vez que lo haga, sepa dónde están las opciones, ya está: la segunda vez será cosa de unos instantes.
Redimensionar la imagen
Redimensionar la imagen es más fácil. Es cuestión de ir a Imagen > Escalar imagen.
Simplemente, ingresa el valor en píxeles de ancho o de alto deseado y el otro se ajusta automáticamente. Lo único que tiene que asegurarse, es de que el icono de la cadena a la derecha de Anchura y Altura este con el eslabón cerrado, para que mantenga la proporción, caso contrario su imagen puede «estirarse». Viene así por defecto, si necesita cambiarlo solo hay que hacer clic en él.
Oprimimos Escalar y terminamos con eso.
Guardar / Comprimir la imagen
Lo que vamos a hacer ahora es exportar la imagen. No guardar. Si la guardamos lo que hacemos es guardarla en un formato de edición avanzada, con capas y demás cosas: es un formato que no nos sirve. Así que vamos a Archivo > Exportar como…
Elegimos donde la vamos a guardar, modificamos el nombre de la imagen y elegimos en que formato la vamos a exportar.
La forma de elegir el formato de exportación no es la más elegante que podamos imaginar, pero tampoco nos complica. Lo que tenemos que hacer es cambiar la terminación del archivo (esos tres o cuatro caracteres después del último punto). Vamos a reemplazar los existentes por «WebP» y oprimimos exportar. Nos va a aparecer la siguiente ventana.
Comprimirla usando GIMP
Acá tenemos dos opciones. Podemos ir variando la calidad de la imagen hasta hacerla lo más «liviana» posible sin que se deteriore demasiado la calidad y guardar desmarcando todas las casillas de guardar EXIF y demás, eso solo le agrega peso y no nos interesan. Los datos EXIF pueden interesarnos si es un sitio de fotografía, ya que guardan información técnica de cómo se sacó la foto, apertura del diafragma, tiempo de exposición, modelo de la cámara, etc. Pero en general no nos interesa.
Puede seleccionar el «Tipo de la fuente», es decir, si es una foto, un dibuja, un texto, etc. para una mejor optimización y le da clic en exportar. Si este es el camino elegido, eso es todo.
Como curiosidad así quedaría nuestra imagen si ponemos calidad 0.
A diferencia de JPG, WebP trabaja bastante bien con imágenes muy comprimidas, si en JPG usted solía usar una calidad de 80 %, con WebP puede ir mucho más abajo. Las diferencia de compresión es notable. Y con AVIF muchísimo más, pero para eso habrá que esperar un poco.
Comprimirla con la ayuda de un panda ð
La otra opción, quizás más recomendable si quiere reducir el tamaño del archivo sin que haya una pérdida visible en la calidad de la imagen, sea usar una muy buena herramienta en línea: TinyPNG.
Para esto lo que vamos a hacer es seleccionar la opción sin pérdida. Los datos EXIF, XMP, etc. no importa, ya que la herramienta los va a retirar.
Exportamos y subimos a TinyPNG (a pesar del nombre acepta PNG, JPG y WebP). Una vez que subió inmediatamente los comprime y podemos descargarla.
Si va a trabajar con varias imágenes puede dejar este último paso para el final, subirlas en grupo y descargarlas todas juntas en un archivo ZIP. Acá está la captura de pantalla de cuando subimos algunas de las imágenes que usamos en este artículo.
Como notará, la disminución en el tamaño de los archivos es notable, esto sin que haya pérdidas perceptibles en la calidad. Si quiere ir más lejos, va a tener que comprimirlas usando GIMP. Pero aconsejamos mucho esta alternativa como una forma de mantener una buena calidad de imagen disminuyendo el tamaño del archivo.
Nótese que subimos un archivo AVIF que, nos hace saber que no lo soporta. Como dijimos: habrá que esperar.
Así nos quedó la imagen, el tamaño del archivo es de solo 23 Kb.
AVIF
Solo por curiosidad exportamos la imagen a AVIF… sin ninguna optimización el archivo es de apenas 13.5 Kb… impresionante. La pregunta es ¿puede verla en su navegador? Si no la ve, quizás necesite una actualización.
Esta misma imagen la subimos Sqoosh (ya mencionada en otro artículo) le pusimos una calidad 10 % y obtuvimos una imagen con un diminuto archivo de ¡7 Kb! Tenga en cuenta que el texto es muy cruel con la compresión de imágenes y que exageramos la compresión deliberadamente. Se ve así.
Esperamos que este artículo les haya servido, si les sirvió cuéntennos, si tienen alguna duda los leemos en los comentarios. Si quiere un sitio web, contrátenos :).