Calcular nuevo tamaño de imagen al redimensionar manteniendo el aspect-ratio

Normalmente, decir que antes todo era más sencillo, sea en el ámbito que sea de lo que se está hablando, cualquiera podría decir que suena a viejo gritando al cielo.

No puedo decir que no añoro aquellos tiempos en los que maquetar una web se basaba en calcar el diseño que habías hecho en Photoshop, sin importar las resoluciones en las que se tuviese que mostrar esa web. Recuerdo la evolución del estándar de tamaño para el contenedor principal de una web, al principio era de 640px de ancho, un tiempo después aumentó a 768px y más adelante se incrementó a 960px (qué modernidad!), justo cuando empecé a dedicarme profesionalmente al desarrollo web.

Si bien es cierto que todo era más sencillo, también habían otros problemas con los que teníamos que lidiar, que no desearía ni a mi peor enemigo (IE6, enterrado estás mejor).

Como curiosidad a anotar, en los primeros días de la web, era necesario indicar tanto el width como el height de toda imagen que añadieses en una página web para que se mostrase con sus dimensiones correctas, sobre todo en la época de maquetación con tablas.

Esto tenía todo el sentido del mundo cuando la web era un medio estático, para nada flexible y que solamente se visualizaba en ordenadores de escritorio y/o portátiles. Pero cuando llegó el momento de los dispositivos móviles y la aparición de las primeras webs responsive, la necesidad de que las imágenes se adaptasen al dispositivo hizo que la regla pasase a ser que no se debía asignar ni width ni height a estas imágenes, solamente un max-width: 100% para asegurarse que la imagen no se saliese de su contenedor.

Cuando se trabaja con CMS tipo WordPress, por ejemplo, las imágenes introducidas en su gestor multimedia asignan automáticamente sus parámetros y puede ser que prevalezca la altura asignada en su HTML, de ahí que se prodigase la utilización, en los reset de la época, del maravilloso height: auto para que la imagen se adaptase en alto automáticamente.

Con el tiempo y con la tendencia actual de priorizar el rendimiento de la web y de los CLS, FOUT, FOIT y demás, la recomendación de asignar width y height a las imágenes, ha vuelto. Tal vez os preguntaréis, si habéis llegado hasta aquí, qué tiene que ver todo esto con el título del post, así que voy al grano.

En ocasiones, y por razones de diversa índole, he tenido la necesidad de obtener el nuevo tamaño de una imagen para reducirla o ampliarla en la maquetación. Por lo general, suele bastar con abrir la imagen con un programa de edición (tipo Photoshop o similares) y redimensionarla manteniendo su aspect-ratio. Como digo, he tenido la necesidad por diversas razones, pero últimamente me encuentro con este problema, sobre todo, cuando trabajo con SVGs.

El tema es que cuando necesitas hacer esto repetidas veces, el paso extra de abrir un programa adicional, abrir la imagen con él, redimensionarla, etc., se me antoja tedioso e innecesario.

De aquí que se me ocurriese crear esta pequeña herramienta que me soluciona el problema en cuestión.

Simplemente se trata de un pequeño script que, dadas unas dimensiones base que se deben introducir con un par de inputs y tras introducir el nuevo tamaño que se desee, calcula el width o el height acorde, sin perder el aspect-ratio de la imagen.

Antes de ponerme manos a la obra con esta herramienta, estuve buscando arduamente por internet, alguna página que ya lo hiciese, ya que este tipo de utilidades suelen estar ya solucionadas desde tiempos inmemoriales por los verdaderos héroes de internet, pero me extrañó no encontrar ninguna que hiciese exactamente esto que describo.

Tengo claro que es algo muy personal por mi parte y que puede que nadie necesite utilizar nada parecido nunca en su vida, pero igual me equivoco y a alguien le ayuda.