Какого разрешения должна быть фоновая картинка у сайта

[rulikch]

Добрый день!

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

При учете, что сейчас максимальное разрешение экрана 2600*1440.

Заранее благодарен.

[Switch74]

все зависит от ограниченй размеров сайта и схемы формирования фона, чаще всего он составной и состоит из

маленькой текстурки, которая множится на все тело сайта, а на ней накладываются картинки их может быть тоже несколько прижатых к top или bottom и left, right

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

[Vin]

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

Ну, тут следует уточнить: чем больше разных картинок, тем больше http-запросов, с каждым запросом скорость загружки падает. Но если взять два варианта: маленькое изображение с repeat'ом и огромное, то при прочих равных, естественно, быстрее будет маленькое.

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

[Switch74]

да, нюансов много, просто в данном вопросе ТС у меня еще больше вопросов возникает, для каждого бэка и реализации можно придумать много разных возможностей, где-то заменить на js можно, где-то несколько маленьких объединить в одну и показывать позиционирую только часть в нужных местах

[Radiocity]

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

При учете, что сейчас максимальное разрешение экрана 2600*1440.

Лучше не использовать такую технику.

Если Вы зайдете на сайт Единой России, то обнаружите фон шириной 3000px. Вес такого фона сокрушительный (более 300kb), что плохо влияет на загрузку сайта.

Edited April 13, 2012 by Radiocity

[DImas95]

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

При учете, что сейчас максимальное разрешение экрана 2600*1440.

Лучше не использовать такую технику.

Если Вы зайдете на сайт Единой России, то обнаружите фон шириной 3000px. Вес такого фона сокрушительный (более 300kb), что плохо влияет на загрузку сайта.

Это на 146% повышает радость от законченной загрузки сайта)

P.S. а как мне кажется, то 300кб для 3000 пиксельного фона это неплохо, или я не прав?

[weart]

Это на 146% повышает радость от законченной загрузки сайта)

P.S. а как мне кажется, то 300кб для 3000 пиксельного фона это неплохо, или я не прав?

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

[Vin]

Уж на сайт ЕР равняться не надо: вы посмотрите, какие там hover'ы — при наведении на новость появляется плашка на всю ширину; в шапке изображение слишком сильно сжато. Если уж делать большое фоновое изображение, то не таких безумных размеров. Посмотрите, как сделано здесь: http://www.grafpedia.com/, хотя этот сайт грузится дольше сайта ЕР, но на графтпедии много и других финтифлюшек и расположение серверов, видимо, играет роль.

[DImas95]

Насколько я понял из прочитанных только что статей, то оптимальное разрешение это от 72dpi до 96dpi

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

[Hell&Heaven™]

Насколько я понял из прочитанных только что статей, то оптимальное разрешение это от 72dpi до 96dpi

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

dpi для верстки не играет никакой роли, это с другой оперы кусок).

А так оптимальный формат PNG-8 и PNG-24 зависит от ситуации. В фотошопе жми сохранить -> для веба и там уже эксперементируй.

[alex_anderr]

В фотошопе "сохранить для веба" и формат:

1. jpg - для большинства случаев (картинки, градиенты). Качество от 51 до 80 для наименьшего размера.

2. png-24 - картинка с прозрачностью, если нужна

3. gif - можно поменьше размер сделать, но не подходит для градиентов и прочих "неровностей".

В кратце так.

Для экрана всегда 72 точки. Это то, что мы видим. Разрешения выше для полиграфии в основном.