Улучшение загрузки фонового изображения на сайте

Мой сайт имеет фоновое изображение и когда я загружаю его в первый раз; Я вижу кнопки и т.д. и изображения, загруженные о втором или два после того, как, изображении Оригинального размера был 1,1 MB и после прочтения следующего поста я уменьшить его до КБ и до сих пор загрузка изображения потребуется время ...Улучшение загрузки фонового изображения на сайте

Crystal, G. 5 Easy Ways to Help Reduce Your Website’s Page Loading Speed. Hub Spot. 2015-08-03.

Есть ли другой способ его улучшить?

Я использую меньше, как следующее:

.intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: white; 
    background: url(../img/intro-bg-compr.jpg) no-repeat bottom center scroll; 
    /* ... */ 
}

источник

2016-12-19 John Jerrby

Вы ничего не можете поделать с загрузкой изображения. Вы можете добавить высоту, хотя, если она похожа на местозаполнитель для изображения, и он досуживает тасование вокруг вашего контента, пока он загружает – Sudheer

@Sudheer - можете ли вы привести пример как? –

Поскольку это фоновое изображение, вам не нужна высота. он имел в виду, если бы у вас был блок текста после изображения, приписывая hegiht, он оставил пространство, необходимое для изображения, вместо того, чтобы текст отскакивал вверх и вниз, пока он не загрузится. Здесь не применимо. Единственное, что вы можете сделать, это проверить кеш. установите его так, чтобы пользователь загружал только один раз в первый раз. – monxas

спас вас ваш JPEG с чересстрочной разверткой? Это может помочь в восприятии времени загрузки.

https://en.wikipedia.org/wiki/Interlacing_(bitmaps)

Я также имел успех оптимизации изображений с помощью https://tinypng.com/

В качестве альтернативы рассмотреть вопрос о предоставлении обратной связи с пользователями, что страница все еще грузится, создавая кок: http://www.ajaxload.info/

источник

2016-12-19 13:44:00 AndFisher

Спасибо, но можете ли вы дать практический пример, что я должен делать? –

Чередование должно быть опцией в функции экспорта JPEG вашего предпочтительного редактора изображений – AndFisher

Полезный инструмент: http://imgonline.com.ua/rus/make-jpeg-progressive-without-compression.php –

function backGroundDiv() { document.GetElementById('intro').style.background="../img/intro-bg-compr.jpg" no-repeat bottom center scroll; 
} 

window.onload= backGroundDiv;

Если вы запускаете этот код в своей части страницы и исправляете этот css;

.intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: white; 
}

Это работает. Надеюсь, это сработает для вас.

источник

2016-12-19 13:51:33

Что он делает, помимо добавления зависимостей JavaScript? – AndFisher

Следить за

Шаг 1: Откройте изображение в Photoshop. Шаг 2: Нажмите «Сохранить как». Шаг 3: После сохранения Как вы получите параметры JPEG. Выберите Progressive Option и дать количество сканирования и нажмите кнопку OK, чтобы сохранить

это улучшит время загрузки фонового изображения в вашем site.Your фоне качество изображения будет увеличиваться сканирование с помощью сканирования.

источник

2016-12-19 14:07:36

Улучшение загрузки фонового изображения на сайте

ответ

Смежные вопросы