Footer image resolution changing once uploaded

Site URL: https://gar-bagpipe-6p38.squarespace.com/

2079738510_logoresolutionchanging.mov 

Hi all, I am getting a weird issue with the image insert on the footer of my draft website. 

When the logo is uploaded, it appears in high resolution, however, when saved, the resolution breaks in quality and I am not sure why? The scale of the png file is higher than 1500px in height which should not be a problem. 

Can anyone help with this? Video is attached.

Also, would anyone know how to reduce the size of the logo for the mobile? 

Draft website info: 

https://gar-bagpipe-6p38.squarespace.com/
Password: Astor1234

2079738510_logoresolutionchanging.mov

To change footer logo, add this to Design > Custom CSS

/* Mobile Footer logo size */
@media screen and (max-width:767px) {
	footer.sections .image-block {
		width: 30% !important;
}
}