Оптимизируем графику для сайта (чуть-чуть теории)

Не смотря на то, что чрезмерное обилие графических элементов на страницах сайта отрицательно влияет на скорость загрузки web-страницы, совсем без графики не обойтись.

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

Графику на web-страницах обычно называют web-графикой. Такую графику можно создать с помощью традиционных графических редакторов, например, в программе Adobe Photoshop. Есть и другие программные средства, разработанные специально для создания web-графики. Например, программа Adobe Fireworks.

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

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

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

Сперва о видах изображений в компьютерной графике. В компьютерной графике бывают растровые и векторные изображения.

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

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

Другим параметром растрового изображения является глубина цвета или битовое разрешение. Битовое разрешение характеризует объём цветовой информации, используемой для описания каждого пикселя рисунка. Чем больше глубина цвета, тем шире диапазон доступных цветов и тем точнее их представление в оцифрованном изображении. Каждый пиксель рисунка представляется определенным количеством бит – от 1 до 24. Разумеется, чем больше глубины цвета, тем больше и объём графического файла.

Скорей всего вы ни раз замечали, как при увеличении рисунка, изображение приобретало совсем не приглядный вид: становилось похожим на мозаику из квадратов, ломанных линий… Это потому, что при масштабировании (изменении размеров) растровых изображений качество ухудшается.

На web-страницах, как правило, используется растровая графика.

Теперь несколько слов о форматах изображений.

Любое изображение хранится в определённом формате. Для web-графики стандартными считаются форматы JPEG, GIF и PNG.

Формат  JPEG – самый популярный формат для хранения фотореалистичных изображений. Рисунки, сохранённый в формате JPEG, иногда имеют мозаичную структуру, т. е. заметное на глаз разбиение изображения на прямоугольные области. Обычно формат JPEG рекомендуют использовать для фотографий, на которых снижение качества, сопутствующее сжатию по этой технологии, наименее заметно.

Формат GIF был разработан для ускорения пересылки файлов по телефонным линиям. Хотя со времён появления этого формата пропускная способность модемов значительно увеличилась, требования к компактности файлов, передаваемых по сети, по-прежнему актуальны. Страница, которая со всем своим текстом и графикой занимает свыше 40-50 Кбайт, может долго загружаться из Интернета. По этой причине формат GIF, главным достоинством которого является малый размер фалов, до сих пор сохраняет своё место основного графического формата Всемирной паутины.

В отличие от JPEG формат GIF пользуется сжатием без потерь, но имеет довольно ограниченную палитру цветов.
Для GIF-изображений характерен «постепенный» показ изображения по мере его загрузки из сети. То есть, при отображении GIF-файла на странице строки рисунка появляются на экране не подряд, а в определённом порядке: сначала каждая 8-я, затем – каждая 4-я и т. д. Полное изображение показывается в четыре прохода. Такая система позволяет понять, что отображается на картинке ещё до того, как она полностью загрузится.

Формат PNG пока не получил столь широкого распространения, как предыдущие два.

Какой же формат лучше использовать для разных типов рисунков?

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

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

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

Какого же размера должен быть рисунок для web-страницы? Вообще-то, вес изображений принято рассчитывать, принимая во внимание скорости наиболее распространённых модемов. Но возможности и модемов и вообще сетей год от года растут, поэтому я не стану забивать вам голову какими бы то ни было цифрами (ведь они меняются с изменением возможностей техники). Скажу иначе: изображение для web-страницы нужно делать как можно меньшего веса, но без заметного влияния на качество изображения.

В следующих статьях перейдём от теории к практике: рассмотрим, как оптимизировать изображения в программах Adobe Photoshop и Adobe Fireworks.

Успеха.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Как оптимизировать изображения в программе Adobe Photoshop

Как оптимизировать изображения в программе Adobe Fireworks

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Новое на сайте

Другие статьи...

Видеокурсы

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Разделы Сайта