Приветствую вас, уважаемый читатель, в новом видеоуроке курса Photoshop для веб-мастера. Сегодня мы поговорим о форматах сохранения графики для сайта.

В интернете завоевали популярность три графических формата:

1. GIF
2. JPG
3. PNG (варианты PNG-8 и PNG-24).

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

Форматы сохранения графики

Давайте познакомимся с нашими подопытными форматами GIF, PNG, JPG подробно.

Формат GIF

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

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

Единственное, что влияет на качество сохраняемого изображения – это ограничение по максимальному количеству используемых цветов. Максимум цветов в формате GIF равен 256.

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

К простым изображением можно отнести:

• Текст, представленный на сайте в виде картинки.
• Схему (карта проезда, чертеж и т.д.).
• Логотип.

Преимущества GIF:

• Поддержка прозрачности (т.е. на изображении, сохраненном в формате GIF, могут присутствовать прозрачные участки, через которые просвечивается подложка под картинкой).
• Поддержка анимации (т.е. в файл GIF-формата можно сохранять несколько изображений, которые циклично переключаются, одно-за-одним с установленной временной задержкой).

Недостатки GIF:

• Алгоритмы сжатия, применяемые в данном формате, являются устаревшими и серьезно проигрывают сжатию PNG-8 (о котором пойдет речь ниже). Еще бы, ведь по данным Википедии, применяемый в GIF метод сжатия был разработан в бородатом 1978 году и проигрывает PNG-формату 5 – 25% веса картинки. Подробнее об алгоритмах сжатия написал в своей статье технолог студии Артемия Лебедева Сергей Чикуенок.
• Для разработчиков серьезным минусом данного формата была его патентная защита, но, слава Богу, она истекла в 2006 году.

Формат PNG

Встречается в PNG-8 и PNG-24 разновидностях.

PNG-8 – представляет собой сжатый формат хранения графической информации без потерь, очень похожий на GIF-формат. Все тоже ограничение по максимальному количеству цветов (256). Но, в отличии от устаревшего GIF, PNG-8 эффективнее сжимает картинки.

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

Преимущества PNG-8:

• Более продуктивный алгоритм сжатия, в отличии от GIF.
• Поддержка прозрачности сохраняемого изображения.

Недостатки PNG-8:

• Как и у всех остальных форматов, кроме GIF, отсутствует поддержка анимированного изображения.

PNG-24 – в отличии от своего собрата, данный формат не имеет ограничение в 256 цветов, а прекрасно работает с миллионами цветов сложных изображений.

Формат PNG-24 представляет собой сжатый формат хранения графической информации без потерь. Вследствие этой безпотерьности нельзя регулировать степень сжатия. Поэтому, изображения в формате PNG-24 могут занимать гораздо больше места, нежели изображения в JPG-формате (о котором пойдет речь ниже), при относительно одинаковом внешнем виде.

Преимущества формата PNG-24:

• Поддержка прозрачности и полупрозрачности (т.е. вы можете оперировать прозрачностью изображения не только в измерениях “прозрачное-непрозрачное”, но и плавными переходами градиентообразной прозрачности, от полной непрозрачности к полной прозрачности).
• Работа с миллионами цветов.

Недостатки формата PNG-24:

• С прозрачностью данного формата не умеет работать IE6, но с этой проблемой можно успешно бороться (о том, как побороть проблемы прозрачности в IE6 для формата PNG-24 я рассказывал в 7-м видеоуроке по блочной верстке сайта).
• Из-за принципиальных особенностей алгоритмов сжатия данного формата, нельзя установить степень компрессии и полноцветные изображения могут занимать непозволительно много места.

Формат JPG

JPG представляет собой сжатый формат хранения графического изображения с потерями. Степень потерь можно регулировать при сохранении в данный формат, например, посредством программы Photoshop (при помощи ползунка Качество диалога сохранения для веб и устройств; я наглядно показываю как это делать в видеоуроке к данной статье).

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

Также как и PNG-24, JPG работает с миллионами цветом, а значит, хорошо подходит для хранения сложных изображений фотографического качества.

Преимущества формата JPG:

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

Недостатки формата JPG:

• Полностью отсутствует поддержка прозрачности.

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

Эксперимент: какую картинку в какой формат лучше сохранять

Я проделал эксперимент, сохранив в разные форматы различные типы изображения и, таким образом, наглядно подтвердил сделанные выше выводы.

Как сохранять изображения в Photoshop и настраивать форматы сохранения

На этот вопрос я постарался дать ответ в видеоуроке. Приступайте к просмотру

Видео с сервиса RuTube:

Первая часть видео с сервиса YouTube:

Вторая часть видео с сервиса YouTube:

---

Из-за алгоритмов сжатия видео сервисами YouTube и RuTube, мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (23.5 Мбайт *.wmv).

P.S. Сегодня в записи имеет место первый постовой на блоге, встречайте seo и заработок в интернете от практика SeoProfy.

С уважением, Андрей Морковин.