Есть ли альтернатива background-size:cover для более высоких скоростей загрузки?

Question

Я использую Chrome, ниже приведен код моего фонового изображения. Это эффективно заставляет мое выбранное фоновое изображение покрывать весь экран за моими другими элементами, а также устанавливает его в оттенках серого. Он отлично работает, однако я определил этот размер фона: обложка значительно снижает скорость загрузки и удобство использования сайта.

Есть ли альтернатива "background-size:cover" (см. Строку #1), которая визуализирует тот же результат, но улучшает скорость загрузки сайта? Спасибо!

<div style='background: url("LARGE PHOTO URL HERE") no-repeat center center fixed;background-size: cover;' class="grayscale bg"></div>

<div id="background">

    <style>

        #supersized img{

            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

            filter: gray; /* IE6-9 */

            -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

        }

    </style>

</div>

Не уверен, являются ли они релевантными или нет, поскольку они являются идентификаторами, а не классами... поэтому я мог бы добавить их и не использовать их, но вот некоторые из них, возможно, также актуальны в моей таблице стилей:

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
    z-index: -1;
    display: none;
}

#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

Кажется, нет стиля #background.

Answer 1

Чтобы исправить низкую производительность на webkit, вы должны использовать это:

-webkit-transform: translate3d(0,0,0);

Применить к элементу с background-cover.