Sprite/PNG графика-тяжелый сайт, о боже!
Мне нужно создать сайт с очень большой графикой (рваные бумажные фоны с прозрачными тенями на текстурированной графике и т. Д.) Один из способов сэкономить на размере файла - это сбросить все элементы фона в один PNG. Проблема в том, что этот файл теперь 180k. Если бы я разбил его на различные GIF и пару PNG, то это было бы ближе к 70k.
Это действительно имеет значение? Что "слишком велико" в наши дни для размера файла? Кто-нибудь заметит, если файл 180 или 70К?
5 ответов
Если ваши пользователи имеют быстрый доступ к вашему сайту (например, в интрасети), 180k вряд ли является проблемой. Если, с другой стороны, сайт используется "Обыкновенным пожилым человеком с юмористически медленной связью", это, вероятно, будет проблемой. Если ваши пользователи используют GPRS, но имеют бесконечное терпение, это, вероятно, не будет проблемой. Если сайт выдает миллион долларов тому, у кого есть терпение переждать время загрузки, скорость передачи данных не является проблемой. И так далее.
То, что я говорю, действительно зависит от ваших требований и ограничений. Это требует, чтобы вы знали (и впоследствии сказали нам, чтобы мы были более полезными) много вещей, прежде чем вы сможете сделать это близко к правильному.
Чтобы избежать этих надоедливых отрицательных ответов за очень правильные ответы, но просто не угодить кому-то, вот мой ответ:
180 Кбит делится на стандартную скорость передачи модема ADSL = 180 КБ / 100 КБ / с = 1,8 с = длительный срок службы.
Есть ли причина не использовать изображения меньшего размера? Похоже, вы уже разбили его, так почему бы не использовать более быстрый и быстрый метод?
С чисто релятивистской точки зрения, 70 КБ займет всего 38% времени загрузки, по сравнению с 180 КБ (приблизительно). Если вы ожидаете большой трафик или хотите быстрое время загрузки, каждый бит помогает.
Я уверен, что вы знаете, что разбиение на несколько изображений означает дополнительные подключения к серверу для их извлечения, с соответствующей задержкой на каждом и дополнительным размером заголовков запроса и ответа.
Поскольку браузеры ограничивают количество активных подключений к каждому серверу (зависит от версии браузера), это может занять больше времени, чем получение одного изображения. Обычный обходной путь для снятия ограничения - использование отдельного сервера "изображений" или псевдонима DNS, который сопоставляется с тем же хостом.
И если вам не нужна анимация, я всегда рекомендую PNG вместо GIF.
Убедитесь, что сайт выглядит нормально с отключенными изображениями (так, чтобы были заданы alt теги, ширина и высота, использовались правильные цвета), а затем разбейте изображения на группы. Если возможно, сгруппируйте все свои кнопки в одно изображение (используя спрайт-листы CSS), а все границы - в другое. Храните большие изображения в отдельных файлах (например, фон сайта, заголовки).
Чем больше изображений у вас есть, тем больше браузер может распараллеливать запросы. Однако, если вы разделите их слишком много, то разные изображения будут загружаться в разное время, что приводит к появлению частей сайта. Это немного компромисс, но это радость программирования:)
Чем лучше ваш сайт выглядит до того, как изображения станут видны, тем меньше пользователь будет следить за скоростью загрузки изображений.
Вы должны сравнить время, необходимое для запроса всех отдельных изображений, и время, необходимое для загрузки одного большого изображения. Проблема с HTTP-запросами.
Я предлагаю вам запустить несколько тестов с расширением Google Firefox, Pagespeed, чтобы увидеть, есть ли огромная разница между большим png или отдельными.
Одно преимущество, о котором я могу подумать, помимо того, что меньше HTTP-запросов, заключается в том, что ваш сайт будет загружаться сразу, а не постепенно по мере загрузки всей графики. Суть в том, как сказал Хенрик, что это зависит от ваших требований.