Sprite / PNG графика-тяжелый сайт, о мой

Question

Мне нужно создать сайт с очень большой графикой (рваные бумажные фоны с прозрачными тенями на текстурированной графике и т. Д.) Один из способов сэкономить на размере файла - это сбросить все элементы фона в один PNG.,Проблема в том, что этот файл теперь 180k.Если бы я разбил его на различные GIF-файлы и пару PNG-файлов, то он был бы ближе к 70 тыс.

Это действительно имеет значение?Что "слишком велико" в наши дни для размера файла?Кто-нибудь заметит, если файл 180 или 70К?

Answer 1

Если ваши пользователи имеют быстрый доступ к вашему сайту (например, в интрасети), 180k вряд ли проблема.Если, с другой стороны, сайт используется «Обыкновенным пожилым человеком с юмористически медленной связью», это, вероятно, будет проблемой.Если ваши пользователи используют GPRS, но имеют бесконечное терпение, это, вероятно, не будет проблемой.Если сайт выдает миллион долларов тому, у кого есть терпение переждать время загрузки, скорость передачи данных не является проблемой.И так далее.

То, что я говорю, действительно зависит от ваших требований и ограничений.Это требует, чтобы вы знали (и впоследствии сказали нам, чтобы мы были более полезными) много вещей, прежде чем вы сможете приблизиться к правильному.

Чтобы избежать этих надоедливых отрицательных голосов за очень правильные ответы, но просто-не-пожалуйста-кто-то, вот мой ответ:

180k, деленное на стандартную скорость передачи модема ADSL = 180kB / 100kB / s = 1.8s = длительный.

Answer 2

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

С чисто релятивистской точки зрения, 70 КБ займет всего 38% времени загрузки, что 180 К (приблизительно). Если вы ожидаете большой трафик или хотите быстрое время загрузки, каждый бит помогает.

Answer 3

Убедитесь, что сайт выглядит нормально с изображениями, отключенными вначале (поэтому задайте alt теги, ширину и высоту, используйте правильные цвета), а затем разбейте изображения на группы. Если возможно, сгруппируйте все свои кнопки в одно изображение (используя спрайт-листы CSS), а все границы - в другое. Храните большие изображения в отдельных файлах (например, фон сайта, заголовки).

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

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

Answer 4

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

Поскольку браузеры ограничивают количество активных подключений к каждому серверу (зависит от версии браузера), это может занять больше времени, чем получение одного изображения. Обычный обходной путь для снятия ограничения - использование отдельного сервера «изображений» или псевдонима DNS, который сопоставляется с тем же хостом.

И если вам не нужна анимация, я всегда рекомендую PNG вместо GIF.

Answer 5

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

Я предлагаю вам запустить несколько тестов с расширением Google Firefox, Pagespeed , чтобы увидеть, есть ли огромная разница между большим png или отдельными.

Одно преимущество, о котором я могу подумать, помимо того, что меньше HTTP-запросов заключается в том, что ваш сайт будет загружаться сразу, а не постепенно по мере загрузки всей графики. Однако, как сказал Хенрик, суть в том, что это зависит от ваших требований.