Презентация по информатике на тему "Использование графических изображений на WEB-страницах"

Использование Использование графических графических изображений на Web- изображений на Web- страницах страницах

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

Подготовка изображений для размещения в WWW  Пути получения графического изображения: 1 - создание изображения в каком-либо графическом редакторе ; 2 - поиск в библиотеках графических изображений (ClipArt, Internet), 3 - сканирование с печатного экземпляра, 4 – с помощью цифрового фотоаппарата.  Большая часть времени при просмотре Web- страницы в браузере тратится на загрузку изображений. Поэтому не стоит перегружать страницу графикой, не несущей смысловой нагрузки.  При размещении больших графических файлов на сайте рекомендуется поместить о них текстовую информацию с указанием объема или их уменьшенную копию и организовать гиперссылку на полномасштабное изображение.

Компьютерная графика Компьютеры имеют дело с двумя видами изображений: • векторными; • растровыми. Векторные изображения имеют маленький Растровые изображения занимают большой объем и масштабируются без потери качества; объем и масштабируются с потерей качества.

Растровая графика Матрица с закрашенными ячейками представляет собой растровое изображение Ячейки матрицы являются элементами картинки (по- английски: picture elements). Сокращенно их можно было бы назвать PICTEL, но для удобства произношения эти ячейки называют PIXEL, что по-русски произносится как ПИКСЕЛЬ.

Задание цвета пикселя Цвет на компьютере формируется из трех основных цветов: 255 • красного (Red); • зеленого (Green); • синего (Blue). 0 Такое представление цвета называется: модель RGB. Для описания каждого из составляющих цветов требуется один байт информации (на каждый пиксель нужно 3 байта информации).

Объем изображения размером 800х600 1. Полное число пикселей в изображении составляет 800x600=480 тысяч пикселей. 2. Поскольку на каждый пиксель требуется по 3 байта, то объем памяти равен: 1 440 000 байт, то есть 1,37 мегабайт. 3. На компьютер пользователя со скоростью 3 килобайта в секунду картинка будет передаваться примерно 470 секунд, то есть около 8 минут.

Используемые форматы графических изображений:  GIF (Graphic Interchange Format) - формат графического обмена. GIF-файлы - это файлы растровых изображений, в которых используется не более 256 цветов. (прозрачная, анимированная графика и рисунки).  JPEG (Joint Photographic Experts Group) - JPEG - файлы представляют собой растровые изображения, в которых может быть использовано до 16.7 млн. цветов. При каждом сохранении такого файла качество изображения ухудшается. (фотографии)

(с сохранением качества изображения): • BMP- Bit Map Picture (Побитовая карта изображения). Изображение записывается на диск так, как оно хранится в памяти компьютера. Формат резервирует 3 байта на все цвета пикселя (24-х битный цвет), чем обеспечивает воспроизведение до 16,8 млн. цветов. Сжатие информации отсутствует.  Размеры файлов - довольно большие и зависят только от размеров изображения в пикселях.

• TIFF - Tagged Image File Format (Теговый формат файла изображения). Формат резервирует 3 байта на все цвета пикселя (24-х битный цвет). Возможно сохранение без сжатия, а также с использованием внутреннего сжатия  непосредственно в файле. Может сохранять несколько слоев изображения и области выделения. Позволяет иметь области прозрачности, в которых виден фон.

• PSD - PhotoShop Document: документ программы Photoshop. Резервирует 3 байта на все цвета пикселя, чем обеспечивает. Использует сжатие информации без потери качества. Выбрать (или отказаться) алгоритм сжатия нельзя. Экономичнее, чем формат BMP и сходен Сохраняет слои, области выделения, с TIFF. каналы.

• PNG-24 - Portable Network Graphic - Переносимая графика для работы в сети. Существует в двух разновидностях: 24-х битовый и 8-битовый форматы. потери Встроено качества. сжатие без

Форматы с ухудшением качества изображения: • GIF • JPEG • PNG-8

Как создать привлекательный Web-сайт? Содержание или контент - является одной из самых важных составляющих. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, то можно ставить вопрос о необходимости существования сайта как такового. Дизайн - вторая по важности составляющая хорошего сайта. От дизайна зависит, насколько привлекательны будут странички, т.е. в конечном счете, сколько людей дополнительно захотят прийти и посмотреть на Ваш сайт. Не забывайте, что встречают-то по одежке.

Как создать привлекательный Web-сайт? Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Вывод: странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). 48Кб - это максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней. Если требуется разместить информацию большего размера, то предупредите об этом пользователя или распределите информацию по нескольким страничкам.