Change image in block on mobile to reduce load times

My client is unhappy with the load times for mobile usage on her website. I have reduced image sizes, and it's still not passing. I am now attempting to change the main banner images on certain pages to smaller images. For example, on the page referenced, I am using the code below (referenced from this site); however, it's not working. Could someone kindly have a look and let me know what I am doing wrong? Many thanks for considering my request.

@media only screen and (max-width: 640px) {
section[data-section-id="64a583d770414f55c2df2aa0"] #block-6561dc22af410a83fb81 {
#page .page-section:nth-child(1) .section-background img {
opacity:0 
}
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://images.squarespace-cdn.com/content/6345cf66a093cc730bf62cb5/ef3024cc-840c-46a3-a727-f28b8ba14365/Dominica_Victoria%2BFalls%2B1_karibu_adventures%2Bcopy.jpg?content-type=image%2Fjpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }
 }
}
 

This code only changes the size of the file, it can not the capacity of the file. You can compress it from your pc before uploading to SS site

and your code have some invalid class name, it should be

@media only screen and (max-width: 640px) {
section[data-section-id="64a583d770414f55c2df2aa0"] .section-background img {
opacity:0 
}
section[data-section-id="64a583d770414f55c2df2aa0"]  .section-background {
background-image: url(https://images.squarespace-cdn.com/content/6345cf66a093cc730bf62cb5/ef3024cc-840c-46a3-a727-f28b8ba14365/Dominica_Victoria%2BFalls%2B1_karibu_adventures%2Bcopy.jpg?content-type=image%2Fjpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }
 }

replace with your data-section-id