Las imágenes de un sitio son las principales responsables del consumo de ancho de banda. Por eso, tanto si queremos ahorrar datos de nuestro servidor como si queremos mejorar la velocidad de carga del sitio es importante que les prestemos atención.RIOT es una aplicación sencilla, gratuita y muy eficiente para conseguir esto. Podemos descargarla desde aquí:
http://luci.criosweb.ro/riot/
Cómo funciona
Una vez abierta la aplicación y cargada la imagen veremos esto:
Hay unos botones en el centro muy útiles. Los dos primeros sirven para agrandar y achicar las imágenes. El tercero sirve para que las imágenes muestren su tamaño real (cada píxel de la imagen ocupa un píxel de la pantalla). El cuarto reduce el tamaño para que podamos verla completa y el último invierte el orden de las imágenes (la original pasa a la derecha y viceversa), en cuanto lo soltamos vuelve a la normalidad.
El proceso de optimización de RIOT
Antes de comenzar tenemos que elegir el formato. JPG (o JPEG, es igual) es ideal para fotografías o imágenes con muchos detalles. PNG es preferible para imágenes con grandes áreas lisas, como dibujos. No es recomendable usar GIF: las imágenes se verán mal y el tamaño no es tan reducido como PNG.
En la parte superior podemos ver el tamaño de la imagen original y el de la imagen final:
Según la opción elegida veremos una serie de pestañas:
"JPEG Options"
Aquí se encuentra la opción "Quality" ("Calidad"). Tenemos que ir reduciendo la calidad hasta encontrar la calidad más baja que no se note en la imagen.
Si no nos molesta que esté en blanco y negro podemos activar "Grayscale". Donde dice "Chroma Subsampling" elegimos "High" (si la imagen se ve pixelada podemos probar con "Medium") y en "Encoding" ponemos "Progressive" (en imágenes de menos de 20 KB podemos probar con "Standard optimized" a ver cual nos da mejores resultados).
"Image adjustements"
En esta pestaña podemos cambiar el brillo, el contraste y el valor gamma de la imagen. Si no sabemos que significan estos valores podemos probar distintas combinaciones o dejarlos como estaban.
"Metadata"
Es importante saber que junto a muchas imágenes se guardan datos de, por ejemplo, la cámara con la que se tomó o la aplicación con que se editó. Por cuestiones de privacidad es recomendable eliminar esos datos especialmente si vamos a subir la imagen a Internet. Para hacerlo solo hay que marcar todas las casillas de esta pestaña.
"PNG Options"
La primera opción es "Color reduction" donde tenemos que elegir la cantidad de colores de la imagen. Las opciones van desde "True Color" (todos los colores del espectro, alrededor de 16.000.000) hasta "Dithered Monochrome", para imágenes en blanco y negro. Tenemos que elegir una opción en base a la variedad de tonos de la imagen o probar a ver cual es mejor.
Y si elegimos una de las opciones que comienzan en "Optimal..." podemos escribir la cantidad de colores manualmente en "Reduce colors to":
Es buena idea dejar activada la casilla "Best compression". Si queremos que la imagen vaya cargando gradualmente en lugar de aparecer de golpe es posible activar "Interlaced", pero la imagen va a pesar un poco más. Si la opción "Color quantization algorithm" aparece activa es recomendable usar "NeuQuant neural-net" y en "External optimizers" elegír "PNGout Xtreme" y dejar activa la casilla verde.
"Mask"
Si la imagen PNG tiene transparencias nos va a aparecer la pestaña "Mask". La primera opción "Keep transparency" nos permite conservar la transparencia. Solo sirve si vamos a guardar la imagen como PNG. Si vamos a guardarla en otro formato tenemos que elegir la opción "Blend with solid background" y el color, blanco por defecto, pero podemos cambiarlo.
Tamaño
Un poco más arriba a la derecha hay otra barra con opciones para rotar la imagen y una con el ícono
. Con esta opción se puede cambiar el tamaño de la imagen.
Si queremos insertar una imagen de mayor ancho que el ancho del texto de la entrada, esta no cabra completa, se deformará o se achicará desperdiciando píxeles. Por eso en el campo "Width" (ancho) ponemos el ancho de la entrada.
Presionamos Enter y vemos como el valor "Height" (alto) se adapta para que la imagen no se deforme (podemos evitarlo activando "Keep aspect ratio" pero la imagen se deformará). Otro opción es cambiar el tamaño con porcentajes con "Percent". Un último detalle, donde dice "Resampling filter" se recomienda usar "Lanczos3".
Si buscamos que la imagen pese una determinada cantidad de KB está el botón "Compress to size". En la ventana que se abre ponemos el tamaño, en KB, y la aplicación hace el resto. Obviamente, con un tamaño muy bajo la calidad será baja.
Optimizar imágenes en lote
Con RIOT es posible optimizar muchas imágenes de una vez. Abrimos una, elegimos todas las configuraciones y hacemos clic en "Batch". Podemos arrastrar todas las imágenes o agregarlas con la opción "Add images".
Si queremos rotar o cambiar el tamaño de una imagen hay que agregarla como tarea en "Additional tasks".
Después hacemos clic en "Settings" y lo dejamos así:
En "Output folder" elegimos una carpeta para guardar las imágenes que no sea la carpeta donde están las originales con el botón
. RIOT tiene la posibilidad de sobrescribir las imágenes automáticamente, pero por las dudas usamos otra carpeta (siempre cabe la posibilidad de que no nos guste el aspecto final).
Ppresioná "Start", las imágenes se irán convirtiendo y RIOT nos mostrara cuanto espacio ahorramos.
No hay comentarios.:
Publicar un comentario