HTML, Excel, Word, SEOОсновы Html ⇒ Работа с html-графикой

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
HTML профессионально
Внешний лист стилей
Форматирование таблиц
Форматирование гиперссылок
Форматирование изображений

 

Работа с html-графикой (ч.4)



Уменьшение разрешения изображения

Уменьшение глубины цвета изображения

Прозрачность фона изображения

Чередующиеся изображения GIF

Уменьшение разрешения html изображения

Уменьшение разрешения изображения позволяет сократить объем графического файла, а значит и время его загрузки браузером. Однако, следует учитывать тот факт, что уменьшение разрешения ведет к потере качества изображения. Большинство мониторов отображают графику с разрешением 72 пикселя на дюйм. Такое разрешение вполне приемлемо, если пользователи не собираются получать с изображения печатные копии.

Чтобы уменьшить разрешение изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Атрибут LOWSRC позволяет воспроизвести в окне браузера изображение низкого разрешения в течение времени пересылки на компьютер пользователя исходного высококачественного изображения.

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

<IMG SRC="высокое разрешение.jpg" 
LOWSRC="низкое разрешение.jpg" 
WIDTH="500" HEIGHT="400">

Уменьшение глубины цвета html изображения

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

Формат GIF поддерживает палитру 256 цветов. Если будете преобразовывать в этот формат картинку, содержащую более 256 цветов, то похожие цвета будут подменяться "средним" цветом. А вот если преобразовывать в этот формат рисунок, с небольшой палитрой цветов, то может оказаться, что в изображении используется менее 256 цветов (например, флаг Украины содержит всего два цвета - синий и желтый, т.е. вместо 256 можно использовать 2 цвета, что существенно сократит объем файла). Таким образом, можно просто "выбросить" ненужные цвета.

Следует заметить, что не стоит уменьшать глубину цвета изображения в формате JPEG, т.к. в этом случае мы добьемся обратного эффекта - сокращение палитры приведет к росту файла изображения. Чтобы уменьшить глубину цвета изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Прозрачность фона html изображения

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

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

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

Чередующиеся html изображения GIF

Формат GIF обладает еще одним полезным свойством - он поддерживает режим чередования изображения при его загрузке. Что это такое?

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

Чтобы снабдить изображение свойством чередования надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.



В начало страницы



В начало страницы