Фото как размеры фона домашней страницы сайта?

Question

надеюсь, что этот вопрос в порядке на stackoverflow.Я хочу использовать фотографию в качестве фона для домашней страницы сайта.Фотография будет занимать всю страницу.Однако я не знаю, в каком разрешении я должен сделать фотографию.Я думал о разрешении 1920 x 1200 пикселей, чтобы люди с 24-дюймовым экраном не видели «края» фотографии.Однако достаточно ли это велико?Я беспокоюсь о том, чтобы сайт выглядел нормально на экранах размером более 24 дюймов.

Также кто-нибудь знает, как мне оптимизировать фотографию, чтобы она загружалась как можно быстрее?Спасибо.

Answer 1

В целом, это, кажется, вопрос компромиссов. Чем лучше разрешение, тем медленнее загружается страница, которая ничего не делает. Стоит ли замедление, чтобы иметь лучшее разрешение и избежать пикселизации?

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

Я бы подошел к этому следующим образом:

1. Какое максимальное разрешение у вас ДОЛЖНО быть, чтобы ваша фотография выглядела "хорошо"? Затем сделайте свою фотографию в этом разрешении. Если ваша цель - 24 дюйма, посмотрите, какие разрешения этот монитор размера «обычно» поддерживает, и нацельтесь на это.

2. Какое количество цветов вы хотите? (или, возможно, ч / б / оттенки серого). Если вы уменьшите количество цветов (предпочтительно до «веб-безопасных» цветов), вы сможете загружать быстрее с тем же разрешением.

3. Такая программа, как Photoshop (или Gimp), вероятно, даст вам наибольшую мощность в настройке этих параметров.

Вас волнует, отображается ли только часть фотографии, когда у вашего зрителя меньше окна?

Я знаю, что это не полный ответ, но такие вещи редко бывают (ИМХО).

Answer 2

Для решения, которое будет работать в большинстве современных браузеров, вам нужно будет поместить изображение в div с z-индексом меньше, чем остальная часть вашей страницы (см .: Растянуть и масштабировать фон CSS )

Что касается создания фотографии 1920x1200, которая будет сжиматься до небольшого размера, я бы порекомендовал попробовать меньший размер (например, 960x600) и посмотреть, хорошо ли он выглядит на вашем 24-дюймовом экране.Есть много программ, которые позволят вам указать размер файла для вашего сжатия (например, FastStone Resizer), чтобы вы могли поэкспериментировать и посмотреть, что приемлемо.В общем, фотографии с меньшей детализацией и / или глубиной цвета будут сжиматься лучше.

Другая проблема, с которой вы столкнетесь, - это соотношение сторон.Даже если предположить, что ваш веб-сайт всегда открыт в полноэкранном браузере, а не в окне, иногда этот экран будет иметь соотношение 16: 9, а иногда 4: 3.Вы можете попытаться создать фотографию с хорошим «сладким пятном» в соотношении 4: 3 и отрегулировать ваш div, используя некоторый Javascript, основываясь на текущем соотношении сторон окна.