Многим нравится дизайн сайта, в котором границы
рисунков, таблиц и других элементов, используемых для оформления
сайта, сглажены или закруглены.
Примеры дизайна графических элементов с закруглёнными краями.
|
В современном веб-дизайне закругления создаются за счёт
графических элементов (рисунков). Иные
альтернативные способы, такие как применение языка
XML, поддерживаются не
всеми версиями браузеров (Интернет-обозревателей). |
В каждом изображении
углы закруглены с помощью 4 рисунков. Сами квадраты представляют
собой ячейки таблицы. В результате создаётся иллюзия графического
рисунка в виде прямоугольника с закруглёнными углами. Этим достигается
уменьшение размера рисунка в Кбайтах. Следовательно, уменьшается
время загрузки страницы сайта.
В случаях, когда цвет рисунков отличается от
безопасного, возможно различие в
отображении цвета углов таблицы (ячейки) и самой таблицы (ячейки).
Это - основной недостаток оформления таблиц со закругленными углами
за счет использования графических рисунков.
Об оптимизации веб-графики
Оптимизировать веб-графику можно несколькими
способами, в зависимости от формата графики. Наиболее популярными
форматами являются два растровых файла: формат JPEG и GIF. (GIF -
Graphics Interchange Format; JPEG - Joint Photographic Experts Group).
JPEG-формат хорошо передает цветовые и тоновые размытые границы.
Файлы формата JPEG хорошо масштабируется в браузере. При этом
файлы в формате JPEG, по сравнению с форматом GIF, хуже передает
ровные плоскости цвета.
В формате JPEG могут быть сохранены
изображения с количеством до 16 миллионов цветов.
GIF-формат хорошо передает ровные плоскости
цвета, жесткие (строгие) границы. Файлы формата GIF имеют
максимальную компрессию, допускают прозрачный фон, но, по сравнению
с форматом JPEG, хуже масштабируются в браузере, искажают цветовые и
тоновые переходы (градиентные фоны).
Палитра формата GIF ограничена 256 цветами. Как правило,
используется для сравнительно простой веб-графики.
Файлы формата GIF при сохранении сжимаются по
горизонтали (технология "run length encoding"). Это означает, что
изображения, которые состоят, в основном, из горизонтальных линий,
будут сжиматься без искажений (потерь). Но если большую часть
изображения составляют вертикальные линии, то при сжатии будут
потери, сжиматься изображение будет хуже, а это приведет к
увеличению объема сжимаемого файла, а, следовательно, и к увеличению
времени загрузки.
Приемы оптимизации веб-графики
1. Использование прогрессивной
развертки (метод оптимизации формата
JPEG и GIF).
В случае записи изображения в стандартном формате, вывод на экран
монитора осуществляется горизонтальными полосками и до загрузки
всего изображения определить смысл изображения затруднительно.
При записи
файла в прогрессивном формате изображение появляется сразу целиком,
но в грубой форме, и постепенно улучшается. Это дает посетителям
возможность сразу же приблизительно оценить, стоит ли ожидать полной
загрузки файла, что позволяет немного сэкономить времени при
просмотре веб-страниц.
Прогрессивная развертка
JPEG поддерживается всеми
браузерами, но не каждый пакет графических программ может записывать файлы в
этом формате.
2. Уменьшение количества цветов в
палитре GIF-файла - сокращение количества используемых в палитре
цветов.
Сокращение размера файла происходит при уменьшении параметра
"глубина цвета" (color depth), который определяется как количество
бит, используемых для записи цвета. Для GIF-изображений этот
параметр изменяется в диапазоне от 1 до 8 бит, которым соответствуют
2, 4, 8, 16, 32, 64, 128 и 256 цветов. Данный прием имеет
широкое применение.
3. Разбиение изображения на части -
заключается в разбиении изображения на несколько частей и сохранении
их с различными значениями параметра "глубина цвета".
Использование этого приема имеет смысл, только если
полученные изображения в сумме занимают меньше памяти, чем исходное.
При этом могут возникнуть проблемы в различии цветопередачи
отдельных изображений на мониторах с разными настройками.
4. Сокращение изображения до
минимального повторяющегося фрагмента - сокращение размеров
исходного изображения или его части до минимального повторяющегося
фрагмента (теоретически, до пикселя).
Полученное изображение
растягивается до исходного с помощью атрибутов width и height тега
img.
5. Удаление "ореола" -
заключается в том, что цвет фона и цвет, который должен быть
невидимым, должны совпадать.
Смысл
"ореола" заключается в следующем.
Иногда при помещении на веб-страницу
GIF-файла, содержащего невидимый слой, изображение оказывается
искаженным из-за эффекта "ореола", который заключается в том,
что на границе видимого и невидимого слоев может возникать цветной
контур ("ореол").
Объясняется эффект "ореола" тем, что для имитации плавного перехода
между цветами в графических редакторах часто используется функция
"сглаживание", которая создает на границе
промежуточные цвета. Эти цвета и являются причиной "ореола",
возникающего, если цвет, назначенный невидимым, сильно отличается от
цвета фона, на который наложено изображение.
Примечание
Изменение размеров графического рисунка средствами браузера
(использование атрибутов "width" и "height" тега
img) приводит
только к изменению отображаемых на экране монитора геометрических
размеров. Размер же самого рисунка в Кб и время его загрузки при этом не изменяется.
Тег - текстовая строка, используемая в
html для определения типа, формата и внешнего вида элемента
страницы. Многие элементы имеют открывающие и закрывающие теги,
определяющие начало и конец данного элемента.
Чрезмерное увлечение применением графики
увеличивает сложность разработки сайта, отвлекает посетителей от
основной информации, т.е. товаров и услуг, представленных на сайте,
увеличивает время загрузки страниц и стоимость создания сайта.
Резюме
Заказывая графику при создании дизайна сайта или
при редизайне веб-сайта, следует руководствоваться здравым
смыслом, техническими возможностями просмотра сайта посетителями и
учитывать бюджет сайта. |