Scaling a background image with css and html

I have a hard time scaling my image correctly with css and html. The css looks like this:

@media (max-width: 979px) {
.header-wrapper {
height: 388px;
background: url("../images/taikuri.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Then the html looks like this:

<header id="header" class="header">
<div class="header-wrapper"> <img src="./imag/taikuri.jpg"  
 alt="taikureita" width="2050" height="812"/>

I would like to scale the image somehow to get faster loading speed. GTmetrix page test gives me this advice: The following images are resized in HTML or CSS. Serving scaled images could save 49.1KiB (69% reduction).

The page is located at kim wist and I haven't been able to figure out the right way to do this so I have to ask for help.