Подкажите как оптимизировать доработку

[Ch0oJoy]

Добрый день! Сделал на сайте плавающие облака на фоне, но сайт стал заметно тормозить. Картинки сжал до минимума ( в общем получилось 450 кб.). подскажите пожалуйта как можно оптимизировать даную доработку?

<div id="clouds">
<div class="cloud c1"></div>
<div class="cloud c2"></div>
<div class="cloud c3"></div>
<div class="cloud c4"></div>
<div class="cloud c5"></div>
</div>

#clouds {
    position: fixed;
    top:0; left:0;
    width:100%; height: 100%;
    z-index: 1;
}

.cloud {
    position: absolute;
    width: 100%; height:100%;
    left: 0; top: 0;
}

@-webkit-keyframes cloudFly {
    from {
        -webkit-transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(-100%)
    }
}

@-moz-keyframes cloudFly {
    from {
        -moz-transform: translateX(100%)
    }

    to {
        -moz-transform: translateX(-100%)
    }
}

@keyframes cloudFly {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }

    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.c1 {
    background: url(../image/clouds/cloud1-c.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-animation: cloudFly 45s infinite linear;
    -moz-animation: cloudFly 45s infinite linear;
    animation: cloudFly 45s infinite linear
}

.c2 {
    background: url(../image/clouds/cloud2-c.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-animation: cloudFly 25s infinite linear;
    -moz-animation: cloudFly 25s infinite linear;
    animation: cloudFly 25s infinite linear
}

.c3 {
    background: url(../image/cloud3-c.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-animation: cloudFly 65s infinite linear;
    -moz-animation: cloudFly 65s infinite linear;
    animation: cloudFly 65s infinite linear
}

.c4 {
    background: url(../image/clouds/cloud4-c.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-animation: cloudFly 30s infinite linear;
    -moz-animation: cloudFly 30s infinite linear;
    animation: cloudFly 30s infinite linear
}

.c5 {
    background: url(../image/clouds/cloud5-c.png) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-animation: cloudFly 85s infinite linear;
    -moz-animation: cloudFly 85s infinite linear;
    animation: cloudFly 85s infinite linear
}

Оригинальные картинки подкрепил. Видел что на некоторых сайтах большие картинки весят всего 10-20 кб, как моно добится такого показателя с png картинками? Спасибо!

Облака ориг.rar

[ardashev06]

пробовали сжимать через https://tinypng.com/?