Как правильно оформлять длинный лендинг?

Question

[holymotion]

Дан такой лендинг( лишнюю информацию я скрыл), у каждого раздела фактически своя картинка(учитывая сложные узоры на них, вырезать будет целый геморрой). Соответственно страница будет грузиться долго, из-за большого количества изображения. Подскажите пожалуйста, как можно "ускорить загрузку?", есть может быть какие-нибудь методы? Можно ли это сделать без JS, AJAX и т.п. Или же обязательно нужна "подгрузка" ?

Comments

[Sergej]

PNG|Gif - фон цветом в css.
Изображение прогоняем через пару оптимайзеров.
На выходе получим килобайт 180-200

Answer 1

[Peyoter]

Можно посмотреть в сторону lazy-load для экранов ниже 2-го.
Можно отдавать фоны изображения в зависимости от размера экрана, хотя многие скажут что это изврат.
Можно нормально сжать или png с прозраночтью или jpg.

Но даже пять экранов в минимальном сжатии не проблема.

Answer 2

[zooks]

Данные изображения сохраняешь в PNG-8 и все - размер будет минимальный.

Comments

[holymotion]

ну тогда произойдёт потеря качества изображения

[zooks]

holymotion: а разве вы используете изображения без потерь вроде bmp и tiff?

Answer 3

[zuraavl]

или вообще svg

Answer 4

[Василь Бойко]

кого вы слушаете????
вам советую, и я делаю так:

<div class="header">
  <div class="wrapper">

  </div>
</div>

<div class="block-1">
  <div class="wrapper">

  </div>
</div>

а картинки сохраняйте в jpg
ctrl+alt+shift+s
качество 80

Comments

[zooks]

Сколько эмоций ради совета JPEG в качестве 80. Вы бы еще 100 забубенили на подобные картинки.

Answer 5

[Kjuri]

где длинный? не вижу длинного. Фоны можно отлично сохранить в jpg. 8-9 качество PS. визуально это будет не сильно хуже. Каждая фоновая картинка потянет 150Кб приблизительно.