Главная страница ¬ HTML и CSS ¬ Советы ¬ Уроки

Большие картинки в бэкграунде: быть или не быть

Оригинал статьи: Webdesigner Depot СС-лицензия:

Опубликовано 11.04.10 / Автор перевода: Иван Саломатин

comments Комментариев 0

За счёт использования крупных фоновых изображений можно достичь впечатляющих визуальных эффектов. Веб-дизайнер имеет возможность управлять множеством настроек, которые обычно используются фотографами: такими как глубина резкости или фокусировка. Но фоновое изображение – это не обязательно фотография, это может быть крупная иллюстрация или даже видео.

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

ТЕХНИКИ ИСПОЛЬЗОВАНИЯ КРУПНЫХ ФОНОВЫХ ИЗОБРАЖЕНИЙ

Вообще, есть множество различных техник, но наиболее распространены следующие:

использование фотографий;
использование иллюстраций;
использование анимаций.

Фотографии и иллюстрации наиболее широко распространены, а вот анимации – пока используют, скорее, в качестве эксперимента, но, поскольку трафик становится всё дешевле, а скорости соединения всё возрастают, можно предположить, что в будущем гораздо большее количество сайтов будет построено с использованием анимаций в бэкграунде.

НАИБОЛЕЕ РАСПРОСТРАНЁННЫЕ ОШИБКИ

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

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

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

Изображение отцентрировано, размножено или отмасштабировано.

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

Взгляните на изображение ниже. Этот скриншот сделан при разрешении экрана 1024×768:

Как видите, при таком разрешении дизайн в полном порядке. А теперь взглянем на этот же сайт при разрешении 1680×1050:

Изображение, использованное в бэкраунде, отцентрировано. Оно выглядит как самое обычное изображение и не встроено в общий фон. Избегайте использования фоновых изображений подобным образом, убедитесь, что изображение достаточно большое для корректного отображения сайта на мониторах с наиболее распространёнными разрешениями. Лучшее решение – это смешивание границ изображения с общим фоном так, чтобы пользователи, просматривающие сайт на мониторе с большим разрешением этих границ не заметили (в Photoshop подобного эффекта можно добиться постепенно «растворяя» края изображения инструментом Eraser при малом – 10-30% – значении непрозрачности – прим. переводчика).

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

body {
background: url(”images/sample.jpg”) repeat-x;
}

Такой код устанавливает файл sample.jpg в качестве фона элемента body и размножает его по горизонтали. Значение параметра background-repeat:repeat-x множит изображение вдоль оси X. Существуют и другие значения этого параметра:

repeat-y множит изображение вдоль оси Y;
repeat-xy множит изображение и по горизонтали и по вертикали (значение по-умолчанию);
no-repeat запрещает размножение изображения.

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

Для того, чтобы корректно размножить изображение, вам следует убедиться в том, что края изображения и его копий примыкают друг к другу, образуя единый узор. Например, на следующем изображении показан неправильный «раскрой» - видны края каждого кусочка:

bad-tiles

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

good-tiles

Как видите, края каждого из фрагментов сочетаются с краями соседних, что даёт нам целостное изображение. А вот фрагмент, который в данном примере используется для создания фонового изображения:

the-tile

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

Наиболее распространённые графические форматы:

GIF – это формат изображений, который оптимизирован для простейшей графики, такой как текст или простые фигуры, круги, линии и т.п. Он не подходит для фотографий. Например:

Формат GIF, размер изображения: 3,3KB

sample-graphic

Формат JPEG, размер изображения: 13,5KB

sample-graphic

Очевидно, что формат JPEG не подходит для графики. Этот формат должен использоваться для фотографий.

Чтобы снизить время загрузки страниц вашего сайта, крупные фоновые изображения необходимо оптимизировать на столько, на сколько это возможно. Избегайте увеличения (растягивания) маленьких изображений, потому что при этом значительно снижается разрешение и появляется «зернистость». Взгляните на следующий сайт при высоком разрешении экрана:

Проблема в предыдущем примере в том, что фоновое изображение автоматически масштабируется на весь размер экрана, что вызывает появление «зернистости» изображения при просмотре сайта на мониторе с высоким разрешением.

ВЛИЯНИЕ КРУПНЫХ ФОНОВЫХ ИЗОБРАЖЕНИЙ НА ЗАГРУЗКУ КАНАЛА И ПРЕДСТАВЛЕНИЕ САЙТА

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

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

Взгляните на следующий пример:

А вот отчёт о загрузке канала:

twelve-net-report

12 запросов и суммарный трафик на загрузку страницы 627 KB. Это означает, что каждый раз, когда кто-нибудь заходит на этот сайт, он загружает в браузер 627 KB информации. Если сайт посещает хотя бы 50 человек в день, то суммарная нагрузка на канал составит 31,350 MB в день.

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

СОВЕТЫ И РЕКОМЕНДАЦИИ

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

Высокие разрешения – это далеко не всё, о чём следует помнить, создавая дизайн сайта. Необходимо позаботиться и о представлении сайта на дисплеях с малым разрешением… Что, если ваш сайт будут просматривать на мобильном телефоне? Веб-дизайнер должен проектировать сайт подо все возможные экраны для того, чтобы сайт был доступен как можно большей аудитории. Сегодня всё больше пользователей просматривают сайты с помощью мобильных устройств, таких как iPhone и различные смартфоны.

С помощью маленького Javascript-кода, вы можете переключать страницы стилей, на основании того, какой браузер и какое устройство использует посетитель. List Apart создали замечательный урок о том, как создать подобный «переключатель».

Другой подход – использование эмулятора мобильного телефона, с помощью которого вы сможете увидеть, как ваш сайт выглядит на дисплее конкретного телефона. Например, вы можете использовать iPhone-эмулятор – аддон для Firefox.

При оптимизации бэкграунда рекомендуется применять CSS-спрайты.

Если фото, которое вы хотите использовать в бэкграунде своего сайта, слишком маленькое или само по себе выглядит неуклюже, подберите такой фоновый цвет, чтобы создавалось ощущение целостности и завершённости дизайна. Например:

Ещё один трюк – создание сплошного фонового цвета на изображении, и в дальнейшем использование этого цвета в качестве фона на сайте для того, чтобы замаскировать края изображения.

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

Создавая сайты с крупным бэкграундом, используйте изображения порядка 1700 пикселей по ширине – такие изображения полностью займут дисплеи 95% существующих сегодня мониторов.