Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.


У страницы тяжелый background? Загрузим быстро :)

Такое бывает, когда фон у страницы является большой картинкой. Такие бекграунды могут весить 200-600кб, а этот как правило очень много, если сравнивать с объемом остального контента на странице. Да и выглядит процесс загрузки такого изображения не всегда хорошо.

Итак, делаем несколько изображений для разной ширины экрана: 1920, 1600, 1366, хотя, набор может быть другим, на ваше усмотрение. И по возможности одну небольшую текстуру по тематике фоновой картинки.
Затем каждое из изображений сохраняем в приемлемом качестве и минимальном - для jpg разница в размере будет около 8-10 раз.

В CSS пишем:
/* Начало документа */ 
body {background: url(bg-body.jpg) #33363a;} 

/* Конец документа */
@media screen and (max-width: 1366px) and (min-width: 1000px) {
   body {
      background: url(bg-body-1366.jpg) 50% 0 fixed,
      url(bg-body-1366-lq.jpg) 50% 0 fixed #33363a;
   }
}

@media screen and (max-width: 1600px) and (min-width: 1367px) {
   body {
      background: url(bg-body-1600.jpg) 50% 0 fixed,
      url(bg-body-1600-lq.jpg) 50% 0 fixed #33363a;
   }
}

@media screen and (min-width: 1601px) {
   body {
      background: url(bg-body-1920.jpg) 50% 0 fixed,
      url(bg-body-1920-lq.jpg) 50% 0 fixed #33363a;
   }
}
Суть такая - сначала будет загружена текстура на фон, затем оформлено остальное содержимое документа. После - согласно разрешению монитора применится соответствующее правило с бекграундом в два слоя - нижний слой в плохом качестве (например 50 КБ), а затем по мере загрузки сверху появится изображение в высоком качестве (например, 500 КБ).
Таким образом посетитель сначала будет отвлечен на контент страницы и не заметит загрузки фонового изображения. В худшем случае покажется, что фон становится четче.

 

 

Источник: https://dev.1c-bitrix.ru/community/webdev/user/94272/blog/10879/

Назад в раздел

Подписаться на новые материалы раздела:














CAPTCHA