Antes de nada, considero que no deberías usar innerHTML para actualizar un elemento html, y mucho menos asignarle un template desde JS, si lo haces por practicar o probar esta bien, esta perfecto, pero si es un proyecto mas bien serio o quieres usar buenas practicas, el innerHTML solo lo recomiendo usar cuando deseas rapidamente AGREGAR contenido HTML dentro de una etiqueta existente o cambiar de tal manera el contenido html del elemento siempre y cuando este sea muy diferente al original (que sea algo completamente distinto a lo que tenias), cosa que no es tu caso, aparte recuerda que no hay necesidad de actualizar los elementos HTML por tu cuenta, ya que exceptuando la etiqueta template, estos se actualizan solos, por otro lado he aqui un ejemplo:
document.getElementById("resultado").innerHTML='<img src="foto.png" id="foto" style="width:200px; height:200px;"/>'+'<button onclick="encoger()">Boton de la funcion</button>';
Lo que estas haciendo realmente ahi es siempre asignandole un valor constante a ese elemento, y lo que intuyo yo es que ese template lo estas usando con otro boton para regresar la imagen al tamaño original, por lo que podrias simplemente cambiarlo por:
const elemento = document.getElementById("resultado");
elemento.style.width = "200px";
elemento.style.height = "200px";
Y para hacer esto mas eficiente aun y escribir menos lineas de codigo podrias en vez de declarar la variable elemento dentro de la funcion ejercicio2, declararla globalmente, de esta manera:
//Variables globales declaradas fuera de todas las funciones y arriba del todo:
const ejercicio2Resultado = document.getElementById("resultado");
const variable = document.getElementById("variable");
const foto = document.getElementById("foto");
function ejercicio2(){
//Uso de las variables declaradas anteriormente
ejercicio2Resultado.style.width = "200px";
ejercicio2Resultado.style.height = "200px";
//Para el caso de la constante llamada variable, deberias hacer una cosa u la otra
//Dependiendo si el elemento es un input o si el elemento no es un input, si el
//Elemento es un input, asignale a la propiedad value de esta manera:
variable.value = getComputedStyle(foto, null).getPropertyValue('width');
//En caso de que el elemento html guardado en la constante llamada variable, no sea
//de tipo input, deberias usar textContent:
variable.textContent = getComputedStyle(foto, null).getPropertyValue('width');
//Recuerda usar la que mas te convenga y borrar la otra ya que si colocas las dos
//para el caso de la constante llamada variable posiblemente obtengas un error.
}
Ahora, como haz podido ver, hay algo que ha cambiado en tu código, y es que en vez de por ejemplo hacer algo como:
variable.value = foto.style.width;
Se hace algo como:
variable.value = getComputedStyle(foto, null).getPropertyValue('width');
En tu caso no es necesario realizar este proceso, pero te comparto esta forma por si la necesitas despues, en tu caso cuando accedes a la propiedad style directamente de un elemento y dentro de ella le asignas algun estilo al elemento desde el JS, la propiedad existira y sera accesible por medio de javascript simplemente mediante algo como:
elemento.style.atributoCSS;
Pero dado el caso de que nunca asignes un valor directamente desde javascript y necesites los valores que pusistes en el css, la propiedad style en el atributo css que te interesa estara indefinido, por esta razon te comparto de una vez las funciones getComputedStyle y getPropertyValue, que vienen de la mano las dos, de esta manera obtendras de manera correcta las propiedades css alojadas o aplicadas directamente desde un archivo css.
por otro lado la funcion encoger es muy sencilla de manejar, simplemente debes primero obtener el ancho y alto actual de la imagen y luego a cada uno de esos valores restarle 5px:
function encoger(){
foto.style.width = parseInt(foto.style.width) - 5 + "px";
foto.style.height = parseInt(foto.style.height) - 5 + "px";
variable.textContent = foto.style.width;
//Recuerda que en caso de que tu elemento sea tipo input, deberias usar value en vez
//De textContent:
//
//variable.value = foto.style.width;
//
//Y recuerda tambien que si las propiedades que necesitas vienen directamente desde un
//Archivo css, deberas utilizar las funciones getComputedStyle y getPropertyValue
//Una tras otra en vez de la propiedad style del elemento para obtener el valor
//Real de un css aplicado desde una hoja de estilos:
//
//foto.style.width = parseInt(getComputedStyle(foto, null).getPropertyValue('width')) - 5 + "px";
}