статьи и информация о SEO
RSS иконка EMail иконка Домашняя иконка
  • Какие графические форматы используются в вебе

    Написано Июнь 21st, 2009 admin Нет комментариев

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

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

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

    Итак, начнем с небольшого теоретического ликбеза касательно самих графических форматов. Флэш рассматривать не будем — ему посвящена особая статья.

    Графических форматов чрезвычайно много, но в именно вебе, чаще всего, встречается только пять из них. Это — bmp, tif, gif, jpg, png.

    1. BMP ( англ. bitmap) — формат хранения растровых изображений. Вообще-то не один грамотный веб-мастер не станет использовать графику в этом формате для оформления своего сайта (равно как и для контентного наполнения) — размеры несжатой битовой карты чрезвычайно объемны. Просто забудьте о том, что браузеры поддерживают bmp.

    2. TIFF (англ. Tagged Image File Format) — формат хранения растровых графических изображений, который стал популярным форматом для хранения изображений с большой глубиной цвета. Этот формат поддерживается всеми браузерами, но из-за весьма крупных размеров в веб-дизайне не используется. Однако, «тиффы» иногда можно встретить в контентном наполнении различных сайтов — например, в качестве демонстрации «на печать» работ различных фотохудожников.

    3. GIF (англ. Graphics Interchange Format — формат для обмена изображениями). Максимально допустимая глубина цвета — 8 бит (256 цветов). Этот формат очень хорошо подходит для того, что бы отображать на веб-страницах растровую графику. Огромный выбор вариантов компрессии, а так же палитр сделало этот формат одним из самых распространенных в вебе. Ну а возможность делать анимированные картинки (и использовать их в качестве банеров, меню и проч.) породили целую индустрию гиф-анимации. Формат совместим на 100% со всеми известными на сегодняшний день операционными системами.

    4. JPEG (англ. Joint Photographic Experts Group — объединённая группа экспертов в области фотографии) — является самым распространенным форматом сжатия фотоизображений в вебе. Как следствие, сфера применения этого формата чрезвычайно широка. Максимальная глубина цвета 24 бита (16.7 миллионов цветов). Степень же сжатия присущая «джепегу» чрезвычайно велика. Но, следует помнить, что уже на 70-ти процентном уровне компрессии начинают быть заметными артефакты (потеря качества).

    5. PNG (англ. portable network graphics) — растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. В данное время, этот формат стал использоваться в вебе чрезвычайно широко, но еще пока не вытеснил jpg и gif. Плюсы png — поддержка палитры вплоть до 32 битов, возможность работать со слоями, добавление мета-даты в файл (авторские права и т.п.). png применяют не только для растровой графики, но и для обычных фотографий.

    Теперь немного о том, как следует грамотно работать на практике с вышеперечисленными форматами.

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

    Использование графического фона должно тоже быть рациональным — всегда старайтесь уменьшить графический файл до максимальных размеров. Например, в некоторых случаях достаточно сделать графический элемент размером 4×4 пикселя (а не 4X1520).

    В процесе создания растровой графики (элементы страницы и т.п.) старайтесь добиться применения наименьшего количества цветов — разумеется, на внешнем виде страницы это никак не должно сказываться. Например, формат gif имеет 2, 4, 8, 16, 32, 64, 128 и 256 цветов — поэкспериментируйте с этими показателями. Более того, помните, что рекомендуемый формат сжатия для веба — это WebSnap adaptive. Ну а если у вас есть возможность применить черно-белую графику, то обязательно сделайте это — уменьшение объема картинки будет весьма существенным.

    Настоятельно рекомендуется экспериментировать с форматом png — зачастую его использование дает несравненно более высокий эффект нежели использование gif. Как уже было сказано в начале статьи, этот формат поддерживается всеми браузерами и, являясь более поздней альтернативой знаменитому «гифу», обладает несравненно более совершенными показателями.

    Чрезвычайно важно помнить, что эксперимент с графическими форматами — это залог успеха. Что бы суметь добиться максимального качества сжатия (без потерь красивости веб-страницы и четкости изображения) необходимо использовать в своей работе сразу три формата одновременно, т.е. надо стремиться сочетать на одной странице gif, png и jpg.

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

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

  • 1. Если у вас на странице присутствует большой фрагмент графики имеющей один цвет, то целесообразно заменить его на html таблицу с необходимым цветом. Для этого просто в графическом элементе добавьте прозрачности и расположите его в вышеназванной таблице. Зачастую таким нехитрым способом можно весьма неплохо выиграть килобайты.
  • 2. Старайтесь уменьшить до максимума количество мелких графических элементов на странице. Даже несмотря на то, что вес их и будет не велик, скорость загрузки страницы, состоящей из большого числа элементов, будет очень затруднена — ведь браузеру потребуется время, что бы все скомпоновать.
  • 3. Многие веб-мастера забывают о CSS стилях. Их применение делает сайт не только более функциональным, но еще и улучшает его визуальные показатели. Иными словами, если имеется возможность выбирать между использованием CSS и графикой, то лучше остановить свой выбор на CSS.На этом будем ставить точку — помните, что только экспериментируя с графическими элементами вы сможете найти ту золотую середину, которая будет отвечать соответствию между качеством изображения и скоростью его загрузки.