SEO: Софт и информация
 
 
Основы SEO - статьи о Контенте



Какие графические форматы используются в вебе


grafika formaty

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

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

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

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

Графических форматов чрезвычайно много, но в именно вебе, чаще всего, встречается только пять из них. Это - 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-таблицы. Использование графического фона должно тоже быть рациональным - всегда старайтесь уменьшить графический файл до максимальных размеров.

Например, в некоторых случаях достаточно сделать графический элемент размером 4x4 пикселя (а не 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.
На этом будем ставить точку - помните, что только экспериментируя с графическими элементами вы сможете найти ту золотую середину, которая будет отвечать соответствию между качеством изображения и скоростью его загрузки.





обсудить на форуме
другие статьи для начинающих вебмастеров



Похожие статьи:

Статьи о контенте

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


Human Emulator - автоматизатор ваших действий в браузере

             


Реклама в Яндексе и Google
   
Группа в ВКонтакте Группа в Facebook Группа в Google+ Группа в Одноклассниках
   
   
  Полезное  
сайт с информация о том как собирать данные
магазин полезных товаров для вебмастера
   
   
  Содержание  
 
   
  Обсуждения  
   
  Сервис  
   
   
   
 
   
   
   
Copyright © since 2006 bigfozzy.com All Right Reserved.
 

Отсюда вполне легально можно брать статьи, пожалуйста, с указанием ссылки на источник :-)
(ссылка на тематический ресурс будет и вам полезна и нам будет приятно)



Яндекс.Метрика