Changing image size using code (not only for mobile)

Site URL: https://www.cuentamelobooks.com/

Hi smarter people than me,

I'm having a frustrating time uploading images to my site. If you have a look, there are small illustrations scattered in the home page and other pages. These were done in Adobe Illustrator. If I save then as 2500 px wide pngs (Squarespace's recommendation), they are way to big and reducing their size using space blocks either makes them too small or still too big. I have used photoshop for reducing their size (what you see now on the site), but they look blurry. So I'm thinking maybe the way to go is code? I've seen other threads with code for reducing image size in mobile, but couldn't find anything for reducing the size in all formats. Thank you in advance for your help. 

Also if there's a better way of doing this that's not code, I will happily hear suggestions. Thanks!

You can use CSS to resize image size. Which images?

H, I've attached screen grabs of the homepage with the images circled in black. There are others in different pages, but just so you see which ones I mean. Thank you for your help

.image-block-outer-wrapper img {
    width: 50px !important;
    height: auto !important;
}
.image-block-outer-wrapper .image-block-wrapper {
    padding-bottom: 50% !important;
}

Hi, this didn't work very well. Some of the images, like the one in the footer ended up being too small. Is there a way to reduce the size of each individual illustration? Thank you for your help