Веб-студия: создание сайта, раскрутка сайта, веб-дизайн, редизайн, продвижение сайта, оптимизация сайта

Создание сайтов. Продвижение сайтов. Оптимизация сайтов

8-916-134-36-30; 8-903-125-43-31

 

Плавные кривые 4

  На главную

 

 

Поиск по сайту

Вверх
Анимационные кнопки
Восприятие графики
Градиентные фоны
Графические форматы
Оформление таблиц
Дизайн сайта 1
Дизайн сайта 2
Дизайн сайта 3
Дизайн сайта 4
Дизайн сайта 5
Зачем нужна графика
Мозаичные фоны
Обрамление фото 1
Обрамление фото 2
Обрамление фото 3
Обрамление фото 4
Обрамление фото 5
Плавные кривые
Плавные кривые 2
Плавные кривые 3
Плавные кривые 4
Плавные кривые 5
Применение теней
Прозрачность
Псевдографика
Псевдографика (2)
Псевдофоновый рисунок
Стили веб-дизайна
Сжатие графики
Специфика веб-графики
Фон сайта
Фотоблог
Вопросы и ответы

  

 

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

 

Примеры дизайна графических элементов с закруглёнными краями.

 


 

 

 

 

 

 

В современном веб-дизайне закругления создаются за счёт графических элементов (рисунков). Иные альтернативные способы, такие как применение языка 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 для определения типа, формата и внешнего вида элемента страницы. Многие элементы имеют открывающие и закрывающие теги, определяющие начало и конец данного элемента.

 

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

 

 

 
Резюме

 

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

создание сайта. реконструкция сайтов Наши услуги:

 

▪  Разработка сайтов, записанных на CD диске (рекламных копий сайтов), для просмотра как через Интернет, так и без Интернета;

  Создание сайта;

  Редизайн сайтов;

  Рекомендации по  использованию  Интернет – технологий;

  Консультации по применению Интернет в бизнесе;

  Поддержка сайта на долгосрочной основе;

  Работа с иногородними и иностранными клиентами;

  Разработка сайтов, адаптированных для просмотра на мобильных телефонах и смартфонах;

  Разработка бизнес плана создания сайта;

▪  Подбор контента сайта;

  Создание сайтов на английском и иных языках;

  Аудит сайтов;

  Оценка стоимости сайтов;

  Раскрутка сайтов.

 

 


 

 

Rambler's Top100 Rambler's Top100

 

 

 

 

 Skype: antula-moscow | antula@antula.ru

Создание видеороликов | Архитектурные проекты | Заказать сайт

Copyright © 2002-2017 Сергей Пыхтин