|
|
|
|
Маленькие
секреты большого фона
|
|
Начнем с азов --- как вставить фон? В тэге BODY существует три атрибута --- BGCOLOR, BACKGROUND и BGPROPERTIES. BGCOLOR устанавливает цвет фона --- <BODY BGCOLOR=#FF0000> (в данном случае --- красный). Цвет можно описать как его названием, так и значением в палитре RGB (об этом как-нибудь в другой раз). Постарайтесь указать цвет фона, максимально приближенный к цвету вашей фоновой картинки --- когда она загрузится, переход от цвета фона к ней будет более плавным. Тэг BACKGROUND используется для вставления какой-либо картинки на фон вашей страницы. Для того, что бы при скроллинге она не передвигалась, используйте атрибут BGPROPERTIES=FIXED. Считайте, что ваша фоновая картинки приклеена намертво... Но только в броузере Internet Explorer 4 и выше. А теперь подумайте, стоит ли использовать этот атрибут? Ну вот, с азами разобрались. Теперь о более серьезном. Наверняка старые пользователи системы Mail.Ru помнят неприятный эффект
при прокручивании страницы (фон прорисовывался постепенно, причем довольно
сильно нагружая видео карту). В чем же дело? Все очень просто --- у Mail.Ru
был дизайнер, больной паранойей оптимизации. Мудрый парень решил --- зачем
вставлять большую картинку, если можно вставить маленькую? Дело в том,
что этот парень не знал, что формат GIF оптимизируется по горизонтали.
Он создал фон, состоящий из двух пикселей (ну или около того --- оригинала
у меня не сохранилось, а дизайн они сменили). То есть, для заполнения
экрана при разрешении 800x600 видео карте нужно было около 240000 (!)
таких картинок... Отсюда и столь большая загрузка видюхи и медленный скроллинг.
Вы спросите, а при чем тут оптимизация GIF? Все очень просто! Маленькая
двух пиксельная картинка занимает 35 байт. А вот если бы он создал этот
же фон, но размером, скажем, 200x70, то он бы занимал 240-250 байт. Разница
не столь велика, согласитесь. Естественно, что фоны составляют не только из маленьких кусочков, а ложат и целые фонище, на всю ширину экрана. Лично мне такой вариант больше нравится, хотя я неоднократно использовал и прошлый пример. Что же может подстерегать беднягу-дизайнера на этом нелегком поприще? Все, на первый взгляд, очень просто. Положил фон шириной 800 пикселей и необходимой высоты и все смотрится отлично. У вас. При разрешении 800х600. А вот попробуйте установить разрешение 1024х768. Что получается? Безобразие! Фон прорисовывается несколько раз по горизонтали. Ага! Смекалистый мальчуган-дизайнер теперь точно поставит максимальную ширину... 1024 пикселя. Он ведь и не догадывается, что у некоторых читателей его сайта могут быть мониторы с разрешением чуток поболее, чем у него. Поэтому мой вам совет --- ставьте ширину фона не менее 1600, а то и все 2000 пикселей. Хм... Уже слышу крики особо тяжело больных паранойей оптимизации --- «А! Размер ведь будет гигантским!». Сравним. Фон одной моей странички имеет размер 1600х340 и весит 3279 байт. Давайте обрежем его до ширины 1024 пикселей --- теперь он занимает 2943 байта. Итого, разница составляет 336 байт. Ну неужели из-за этого стоит сориться с некоторым процентом ваших посетителей? На мой взгляд --- нет. Вроде бы --- мелочи, а нет, многие дизайнеры ловятся именно на этих мелочах. Так что будьте впредь внимательнее. А теперь пойдите, и измените же наконец на ваших сайтах фон! |
айты
с девственно чистым фоном канули в лету. Сейчас практически каждый сайт
снабжен красивым фоном --- у одних это фотка любимой собачки Жучки, у
других бледные полосочки, а у третьих что-то свое, индивидуальное. Итак,
как вы уже догадались, эта заметка посвящена фонам.
Но при том же разрешении она бы прорисовывалась всего 35 раз! Вот тут
разница чувствуется. Счастливые обладатели мощных видео карт может быть
и не заметили этого, а вот те, у которых размер памяти в видюхе 1-2 Мб
(или того меньше) очень даже это заметили. Будьте уверены, они не раз
вспоминали этого дизайнера «добрым» словом!