Generar diferentes tamaños de imagen en Xamarin Forms

¡Hola!
Cuando tenemos que crear las imágenes para una aplicación Xamarin, nos encontramos con que tenemos varias resoluciones que generar. En la siguiente lista se muestran las resoluciones y un ejemplo de tamaño:
Android
LDPI: x0.75 (36×36)
MDPI: x1.0 (Tamaño base) (48×48)
HDPI: x1.5 (72×72)
XHDPI: x2.0 (96×96)
XXHDPI: x3.0 (144×144)
XXXHDPI: x4.0 (192×192)
iOS
Tamaño base: x1 (48×48)
@2: x2 (96×96)
@3: x3 (144×144)
Me ha ocurrido que se me hace bastante pesado generar todas las resoluciones y os voy a enseñar una pequeña herramienta para generarlas automáticamente partiendo de la imagen con mayor resolución.

Buscando la información sobre las diferentes resoluciones, me acabo de encontrar este post, donde Chase Florell (MVP Xamarin) muestra una herramienta que ha creado para generar las diferentes imágenes (si lo hubiese visto antes...). Así que si queréis, podéis dejar de leer el post y utilizar directamente su herramienta, que estoy seguro de que funciona mejor :)

He alojado la web en Azure, no sé cuánto tiempo durará, pero mientras esté activa la podéis utilizar: http://imagegeneratoruiweb20180702110002.azurewebsites.net/

Os voy a mostrar una cutre pequeña herramienta para poder generarlas automáticamente (el código está disponible aquí). La herramienta se basa en, partiendo de la imagen con mayor resolución (en nuestro caso xxxhdpi x4), generar dos carpetas, una con las imágenes iOS y otra con las imágenes Android, con las diferentes resoluciones. Si echamos un vistazo al código, se pueden hacer algunas cosas más jugando con la clase ImageOutputProperties, que describe para la imagen de salida cosas como resolución, carpeta de destino, etc:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

        ImageOutputProperties imageOutputProperties = new ImageOutputProperties();
 
        //ImageName se utiliza, por ejemplo, para generar las imágenes
        //en iOS @x2 y @x3
        imageOutputProperties.ImageName = new ImageName()
        {
            Prefix = "pre", //Añade un prefijo al nombre de salida de la imagen
            Suffix = "suf" //Añade un sufijo al nombre de salida de la imagen (@2x, @3x)
        };
 
        //FolderPath genera la carpeta de salida de la imagen
        //Si la propiedad IsAbsolute es false, se utiliza como 
        //origen la carpeta actual de la aplicación
        imageOutputProperties.FolderPath = new FolderPath()
        {
            IsAbsolute = false,
            Path = "/iOS"
        };
 
        //Formato de salida de la imagen
        imageOutputProperties.ImageFormat=ImageFormat.Png;
 
        //ImageDimensions especifica la resolución de salida de la imagen
        //Resolución definida por porcentaje
        imageOutputProperties.ImageDimensions = new ImageDimensions()
        {
            Percentage = 1.5 //la imagen de salida sería un 1.5 más grande 
        };
        //Resolución definida por valor
        imageOutputProperties.ImageDimensions = new ImageDimensions()
        {
            Resolution = new Size(128, 150) //la imagen de salida sería de 128x150px
        };
 
        //Si es false, en caso de que exista un archivo con el mismo
        //nombre en la carpeta de destino, se lanza una excepción y 
        //no se sobreescribe
        imageOutputProperties.OverwriteFile = false;

Para generar las imágenes (que es lo que seguramente te interese) olvidándonos del código, hay dos proyectos; uno para escritorio, ImageGenerator.UI.Desktop y otro que se despliega como web, ImageGenerator.UI.Web. Vamos con el primero.
Para ejecutar la aplicación de escritorio, basta con establecer ImageGenerator.UI.Desktop como proyecto de inicio, pulsar F5 y veremos lo siguiente:
Lo primero que salta a la vista es que tiene una interfaz altamente atractiva y usable 🙂 Lo único que tenemos que hacer es seleccionar la carpeta de destino donde queremos que se generen nuestras imágenes, y seleccionar las imágenes que nos interesa redimensionar. Os recuerdo que la redimensión se hace basándose en que la imagen seleccionada es el tamaño x4. Pulsamos el botón Generar y vemos la salida.
Si quisiéramos modificar las imágenes que se generan para cambiar resoluciones, añadir nuevas imágenes, etc., lo podemos hacer marcando la opción en la parte inferior que dice «Formato de salida personalizado». Al pulsarlo se abre un cuadro de diálogo donde poder seleccionar un archivo json que contendrá una lista de ImageOutputProperties (lo que vimos un poco más arriba en código). En el propio proyecto hay un archivo de ejemplo:
Si cuando trabajáis con Xamarin no utilizáis Windows (como es mi caso), la aplicación anterior obviamente no os va a funcionar (bien la podía haber hecho multiplataforma con Xamarin…). Para resolver esto, está el proyecto ImageGenerator.UI.Web que podéis subir por ejemplo a Azure simplemente dando botón derecho encima del proyecto y pulsando Publicar. Le echamos un vistazo:
De nuevo, una interfaz muy potente. El proceso sería el mismo que antes; seleccionamos las imágenes, pulsamos el botón Generar y cuando se hayan generado las imágenes se nos descargaría un archivo comprimido donde estarán las imágenes redimensionadas.
El código no está muy probado, así que no aseguro que funcione como se espera… especialmente los proyectos de las apps de escritorio/web. Por ejemplo, la web acumula los archivos que va generando en la carpeta App_Data y no los borra nunca 🙂

¡Un saludo!