Оценка сайта и рассылки, подписка на рассылку, статьи по веб-дизайну, полезные скрипты PHP и javascript

Панель опций Сделать стартовой страницей Панель опций подписаться на RSS-ленту RSS-лента                         
 
.::Реклама::.

www.liex.ru - автоматическое размещение статей с прямыми ссылками
.::Наша кнопка::.
Наша кнопка
Хотите помочь нашему сайту? Установите нашу кнопку на свой сайт.
Получить код
.::Полезная ссылка::.
Лучший редактируюмемый каталог ресурсов
Лучший редактируемый людьми каталог ресурсов Интернета
.::Рекомендуем::.
.::Статистика::.

Статьи

Библиотека веб-мастера - "море" информации по веб-дизайну, которая пополняется посетителями сайта.


Главная :: Библиотека веб-дизайнера :: Вёрстка веб-документов

"Графика для Web"

Автор: Лопатин М.В.,
дизайн студия Skydesign

 

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

Форматов изображений, которые подходят для использования в web не так много. Чаще всего для этих целей используются три формата: GIF, JPEG, PNG. У каждого имеется свое применение.

Исторически сложилось так, что первым появился на свет формат GIF (Graphic Interchange Format), на основе алгоритма сжатия LZW, придуманного в 1977 году двумя израильскими математиками по фамилии Лемпель и Зив. В файлах формата GIF рисунок хранится в сжатом этим алгоритмом виде. Когда создавался GIF это было очень актуально, при низких интернет скоростях, чем меньше размер графического файла, тем быстрее загружается изображение. А так как используется сжатие, в относительно небольших файлах могут записываться достаточно большие рисунки. Еще одним из преимуществ данного формата является возможность один цвет сделать прозрачным. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая "прозрачный" пиксель, он просто игнорирует его и не печатает на экране.

Палитра цветов, используемая в GIF 8-битная (максимум 256 цветов). В графическом формате JPEG, например, используется до 16 миллионов цветов.

В файлах формата GIF могут быть сохранены анимированные изображения. Именно этот формат позволяет создавать файлы с чересстрочными (interlaced) изображениями. Чресстрочные изображения хранятся в gif-файле особым образом. В начале файла записываются строки с номером, кратным восьми, затем - четырем, и т.д. Таким образом, строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Таким образом, подобное изображение проявляется в окне загрузки постепенно, увеличивая свою четкость по мере загрузки новых порций данных. При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. И если картинка не нужна, то достаточно пролистать страницу дальше, чтобы рисунок ушел из окна просмотра броузера, или перейти по гиперссылке и дальнейшая загрузка изображения не произойдет. Хотя при современном ADSL интернете или на выделенном канале, вы этого даже не увидите, но для пользователей на обычном модеме это еще актуально и от такой оптимизации изображений все еще не стоит отказываться.

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

GIF, 8 бит, 32 цвета
3,5 Кb

JPEG, 24 бита
61% потери качества 3,7 Kb

Рис.3 и 4
Один и тот же рисунок с четкими контурами в формате JPEG и GIF, имеет практически один и тот же вес, но обратите внимание на разницу в качестве

В том случае, если используется изображение с плавными переходами цвета и отсутствием мелких четких деталей имеет смысл воспользоваться графическими файлами формата JPEG. Формат JPEG позволяет хранить изображения с высоким цветовым разрешением. Имеет две цветовых схемы 24 битовую (16,777,216 цветов) и 8 битовую grayscale (256 цветов)

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

114 KB

41 KB

32 KB

27 KB

19 KB

14 KB

Рис.5, 6, 7, 8, 9, 10
Приведенные изображения наглядно показывают область применения формата JPEG, а также разницу в качестве и размере, которой можно достигнуть, немного "поколдовав" над настройками практически в любой продвинутой графической программе.

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

Теперь, обязательно упомянем, об еще одном интересном и полезном формате PNG (Portable Network Graphics). Своим появлением формат PNG обязан все тому же формату GIF. Дело в том, что алгоритм сжатия LZW запатентован и принадлежит фирме Unisys. А формат GIF, который был создан на основе этого алгоритма, разработала фирма CompuServe, разработавшей этот формат. В 1994 году отношения между компаниями испортились, исходя из корыстных целей Unisys инициировал судебный процесс против CompuServe. В результате многочисленных перепитий формат GIF стал платным и его использование в программном обеспечении сильно ограничено. По традиции на любой платный продукт рано или поздно появляется бесплатная альтернатива, такой альтернативой стал PNG формат, который появился на свет 4 января 1995 года, когда Т. Боутелл а рамках Usenet конференции предложил создание свободно, альтернативного GIF формата. 1 октября 1995 года вышла первая версия 1.0 PNG, который стал полноправным сетевым форматом

Формат PNG имеет три цветовых схемы ("truecolor", "grayscale" и индексированная палитра), много достоинств и новых полезных возможностей. PNG намного удобнее при создании изображений, так как имеет усовершенствованный альфа-канал, в отличие от GIF, число его уровней доведено до 254, что дает более широкие возможности для создания многослойных изображений, имеется улучшенное сжатие данных Deflation (на 5-20% сильнее чем в формате GIF) без потерь, что делает этот формат отличным, для хранения промежуточных стадий редактирования. Например, при каждом открытии с последующим сохранением изображение в JPEG-формате необратимо теряет информацию о пикселях, в отличие от PNG. Поэтому PNG идеально подходит для сохранения фотографий, на которых недопустимы никакие потери, идеально применим на изображениях со сплошными областями. Сохранение в формате PNG поможет сохранить качество изображения. Оригинальная схема двумерного чередования данных и возможность использования гамма-коррекции (межплатформенное управление яркостью изображения), на которой мы остановимся подробнее, также являются достоинствами этого формата. Имеется возможность сохранения компрессированных или некомпрессированных текстовых вставок для хранения информации о копирайте или других целей. Кстати, для хранения текста, PNG подходит намного больше чем JPEG.

Существует правда маленький недостаток у этого формата, хотя недостаток ли? PNG не поддерживает множественные изображения, анимацию, PNG изначально был предназначен лишь для одного изображения. Для передачи множественных изображений используется расширенный формат MNG.

Немного подробнее о гамма-коррекции. При переносе графического файла с одного компъютера на другой, например, с PC на Macintosh, или с одной операционной системы на другую (Linux-Windows), могут быть различия в интерпретации изображений: изображения выглядят темнее или светлее. Соотношение между цифровой информацией и реально отображаемым цветом на мониторе и называется гамма. Встроенная в PNG гамма коррекция работает по следующему принципу: данные настройки дисплея, видеокарты и софта (информация о цветовой гамме) записываются в файл и при переносе на компьютер другой конфигурации изображение остается неизменным.

И напоследок, наглядно проиллюстрируем на нескольких изображениях все недостатки и преимущества форматов GIF, JPEG и PNG.

GIF

A. 1.1k GIF

B. 12.3k GIF

C. 10.9k GIF
JPEG

D. 4.3k JPEG

E. 2.5k JPEG

F. 6.8k JPEG
PNG

G. 1.2k PNG

H. 4.3k PNG

I. 5.9k PNG

 

Дата публикации: 27.08.07

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


В этом списке может оказаться и Ваша статья!

Если Ваша статья относится к тематике данного сайта, то Вы можете прислать её нам, заполнив специальную веб-форму на сайте в разделе " Статьи" или отправив её на наш e-mail: .

Ваша статья будет рассмотрена администрацией сайта, и, если она удовлетворяет нашим требованиям, будет опубликована на нашем сайте в течение 1 - 5 дней. (1-2 дня - при платной регистрации).

Мы будем Вам очень благодарны. Ссылка на Вас гарантируется!


Что почитать ещё?

  1)Подсказки по работе в системе Google Adsense;
2)Как проиндексировать сайт в поисковой базе Google менее чем за 24 часа?;
3)Доменные имена. Как выбрать хорошее имя для своего сайта;
4)SEO-специалист делится своими секретами;
5)Двадцать шесть способов получения качественного трафика на ваш сайт.

Главная :: Библиотека веб-дизайнера :: Раскрутка сайта

"Веб-дизайн - это просто! Теория и практика"
Эта рассылка создана специально для тех, кто не хочет иметь проблем с созданием, поддержкой и раскруткой своего сайта. Полезные и интересные статьи по веб-дизайну в Ваш почтовый ящик. Мы ответим на все ваши вопросы, связанные с разработкой и поддержкой сайта;

RSS-канал
Все свежие новости об обновлениях на сайте, а также новости на тему веб-дизайна, хостинга, web-программирования и других тем тем, связанных с веб-дизайном. Если вы следите за нужной информацией, то получите информацию первым через наш RSS-канал, даже не заходя на наш веб-сайт.
Экономьте Ваше время с Vitaweb!

Субъективная оценка Вашего веб-сайта.
Специально для Вас был создан наш новый сервис, целиком и полностью посвящённый целенаправленной критике Ваших сайтов. Мы оценим Ваш сайт со всех позиций оптимизации, юзабилити и прочих немаловажных как для разработчика, так и для Вашего посетителя, моментов. Порой безупречный в глазах разработчика проект может оказаться совсем противоположным по мнению Вашего посетителя.  

Не проходите мимо: Рекомендуем Домашние клопы: как избавиться навсегда самостоятельно в Москве  
Связь с автором сайта:

.::Поиск::.
.::Новости::.
  
05.08.2013
Новое онлайн интервью: вопросы Роману Ширяеву (Пузату);

04.07.2013
Теперь вы можете снова подать заявку на БЕСПЛАТНУЮ оценку сайта;

15.04.2013
Социальная сеть: опыт создания высоконагруженного проекта Подробнее.


.::Опрос::.
"На какой язык вы ориентируетесь при создании сайта? "

PHP;
PERL;
C;
ASP;
AJAX;
JAVA;
Python;
Javascript/Vbscript;
"Чистый" HTML.

.::Реклама::.



RotaPost
Копирование информации с этого сайта на другие ресурсы разрешено только при наличии видимой ссылки на наш сайт.
Электронная почта редактора сайта: audit(@)vitaweb.pp.ru (уберите скобки). 2005-2014 год. 18+.