Мы всегда вам рады

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

Формат — спецификация структуры данных, записанных в компьютерном файле. Формат файла обычно указывается в его имени, как часть, отделённая точкой (обычно эту часть называют расширением имени файла, хотя, строго говоря, это неверно).При их правильном применении и, не пренебрегая некоторыми советами, можно достичь уменьшения времени загрузки Вашего сайта. Тем самым расположить к себе посетителя.
 
Немного теории:

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

Если еще нет, настоятельно рекомендую заняться этим в свободное время. Поставив себя на место пользователя, Вы поймете, насколько бы он был бы рад видеть сайт, который не напоминает ему наболевшее, а радует быстрой загрузкой. Ведь если его заинтересует содержание сайта и навигация, он, скорее всего, вернется снова. А этого от публики Рунета и всей сети Интернет не просто добиться.

Короткий перечень графических стандартов, показываемых стандартными браузерами без дополнительных "пристроек":

bmp
 
Если этот формат и показывается в браузере, то, скорее всего, только из-за того, что когда-то он был актуален, но это совсем не значит, что его стоит применять. Лучше просто забудьте о нем, если для вас время загрузки играет какую-либо роль.

 
Формат tif также из-за больших размеров не применим для интернет сайтов. Его место в типографии, поэтому пусть там и останется.
 
 
gif

Полное название - Graphics Interchange Format. Допускает максимально возможную глубину цвета - 8бит (256 цветов). Идеально подходит для отображения растровой графики. Обладает достаточно большим выбором вариантов сжатий и палитр. Также оснащен прозрачностью и возможностью анимации. Имеет 100% совместимость со всеми возможными ОС и ПО.

jpg

Joint Photographic Experts Group, создан для отображения фотографий. Своими характеристиками завоевал широкое применение как в интернете, так и в другом. Максимальная глубина цвета составляет 24бита (16,7 миллионов цветов). Имеет очень сильное сжатие, но при качестве менее 75% становится видным потеря качества.

png

Portable Network Graphics возник вследствие неувязок с патентами у gif формата и востребованностью нового, универсального формата для интернет. Хоть прямой потомок gif и jpg не смог полностью вытеснить своих предшественников, но имеет достаточно плюсов. Некоторыми из них является поддержка вплоть до 32битной палитры, многослойность, прозрачность, возможность добавления информации в файл, например, авторские права. Применим как для растровой графики,так и для фото.

Практическая часть:

Советую начинать оптимизацию с самого начала, при разработке макета. Тогда Вы сможете заменить некоторые графические части на html таблицы. Используя графический фон, не забывайте о том, что файлом будет заполнена вся указанная часть. Попробуйте его уменьшить, иногда достаточно для этого сделать графику 2х2 пикселя, а не 2х760. Создавая растровые графические элементы, заранее старайтесь применять по возможности как можно меньше цветов. Если это будет gif, соответственно 2, 4, 8, 16, 32, 64, 128 и 256 цветов.

Для интернет используйте вариант сжатия - WebSnap adaptive и не забывайте о черно-белом варианте графики, она занимает очень малые объемы. Большинство "старых вебмастеров" настолько привыкли к gif, что напрочь забывают о существовании png. Думаю, что зря, потому что на данный момент он открывается всеми стандартными браузерами, и, используя его, зачастую можно сжать графику там, где, как кажется, gif уже сделал все возможное.

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

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

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

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

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

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

И последнее, тщательно выбирайте хостинг провайдера для сайта, ведь именно он может запросто перечеркнуть все ваши старания на нет... Будьте профессионалами, проверяйте свои работы - тогда все будет OK! 
 
Публикация данной статьи возможна только при наличии ссылки на источник: http://money-internet.info
 
« Пред.   След. »

Мысли и слова великих людей

 
Учение без размышления бесполезно, но и размышление без учения опасно. /Конфуций/

Самое интересное на сайте


Богатство
Психовирус
Радость
Концепция
Безопасность
Мудрость
Шоубизнес

С Новым годом!


С Новым годом!

Онлайн бизнес

Онлайн бизнес Данный раздел сайта посвящён именно онлайн бизнесу. Только здесь вы получите быстрый доступ к последним и наиболее эффективным способам заработка в сети Интернет.

Бизнес идеи

Бизнес идеи Здесь вы сможете найти самые важные статьи о том как начать и развить свой бизнес в сети Интернет. Создание  бизнеса приносящего стабильный доход станет реальностью.

Оптимизация сайта

Оптимизация сайта SEO оптимизация – это определенный тип создания и редактирования текстов для web - сайтов. И знание этих секретов крайне важно для ведения бизнеса в интернете.

Удалённая работа

Удалённая работа Этот раздел сайта призван помочь тем, кто решил научиться вести бизнес в сети самостоятельно. А вот от того, как вы распорядитесь этими знаниями, будет зависеть ваш заработок.