Рекомендации по подготовке графического сопровождения статей


При подготовке статей для публикации, для большей наглядности и привлекательности очень часто приходится сопровождать излагаемый материал графическими изображениями, а в иных случаях, без графики в статье просто не обойтись. А полноцветная, красивая графика это всегда большие объемы. Если мы готовим статью для журнала, то здесь нет проблем с выбором типа файла для представления картинок — размер файла не важен, главное качество. Совершенно иная ситуация с публикацией графических материалов в Интернет, здесь данные загружаются из сети, а каждый килобайт информации стоит денег и за него всегда кто-нибудь платит. Платит пользователь — гость сайта, платит владелец сайта, неговоря уже о том, что загрузка большого количества данных просто требует дополнительного времени, которого и без этого постоянно не хватает. Отсюда следует, что едва ли не первостепенное значение приобретает вопрос минимизации количества данных требуемых для передачи изображения . Если попытаться точнее сформулировать эту задачу, то необходимо оптимизировать изображение таким образом, чтобы при достаточном для восприятия качестве, размер файла изображения был минимальным. Эта задача полностью ложится на плечи автора, подготавливающего статью, и для каждой картинки последовательно решается выполнением двух операций (условий):

  1. Выбор наиболее подходящего формата хранения изображения;
  2. Выбор оптимальных значений параметров изображения внутри формата.

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

  1. Рассмотрим основные файловые форматы хранения, изображения и как правильно определиться с выбором
  2. Покажем как быстро провести оптимизацию изображения на примере программы Xat.com Image Optimizer
  3. Обсудим порядок сопровождения готовой статьи изображениями при направлении в редакцию iXBT

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

Раздел 1

На настоящий момент существует три основных формата изображений со сжатием, которые понимают браузеры —  GIF, JPG и PNG. Их надо уметь правильно применять, так как, повторимся, ошибка с выбором формата для конкретной картинки приведет или к значительной потере качества, или кнеоправданному увеличению размера, посмотрите на примеры:

Попытка применить формат GIF к приведенной ниже фотографии при одинаковом качестве приводит к увеличению размера файла в 4 и более раз:


Файл формата JPG — 8,03 КБ (8535 байт)

Файл формата GIF — 35,6 КБ (36504 байт)

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

Файл GIF Файл JPG Файл JPG
2,45 КБ (2516 байт) 2,48 КБ (2546 байт) 10,6 КБ (10879 байт)
Оптимальный формат и размер файла картинки При одинаковом размере файла, JPG явно проигрывает для данного изображения При одинаковом с GIF качестве размер файла формата JPG в 4 раза больше.

Итак, что же представляют собой форматы изображения и чем они отличаются? Рассмотрим только самые основные особенности этих стандартов.

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

При работе с GIF старайтесь устанавливать палитру в Adaptive или Optimized, тогда палитра будет содержать только те цвета, которые имеются в изображении и никаких лишних. Что это дает — можно попытатся уменьшить количество цветов в палитре, а визуальное качество не упадет. Размеры палитры, а значит и количество цветов в файле может варьироваться от 2 до 256. От размера палитры зависит и количество бит применяемых для кодирования. Так, для двух цветов достаточно 1 бита, для 4 цветов — 2х бит, для 8 цветов — 3х бит и т. д. по «степени двойки». Максимальная палитра кодируется 8 битами. Чем меньше палитра, тем меньше размер файла в байтах. Формат поддерживает режим interlaced — при этом картинка постепенно проявляется в браузере по мере загрузки. При использовании такого режима размер файла почти не меняется, а иногда становиться даже меньше.

JPG (а если быть более точным JFIF — JPEG File Interchange Format) — формат для сжатого хранения полноцветных (см. отличие от GIF) изображений на основе когерентности участков изображения). Сжатие JPEG использует мозаику размером 8×8 пикселов и при низком качестве изображения границы этих квадратиков могут наложиться и быть видимыми на картинке. Основано на свойстве человеческого зрения более чутко реагировать на изменение цвета и освещенности, а не на сам цвет как таковой. Так, информация о цветности внутри квадратиков, в процессе дискретных косинусных преобразований (DCT), трансформируется в информацию об изменении цветности. Сжатие происходит в несколько этапов, последовательно выполняемых с целью отбросить наименее ценные для глаза данные и тем самым значительно уменьшить их количество.По своей природе подразумевает потерю качества. Не поддерживает прозрачность и анимацию. Использует различные коэффициенты сжатия. Чем выше сжатие, тем меньше размер файла, но и хуже качество. Идеален для полноцветных фотографий с плавными переходами цветовых тонов. Если же на фотографии встречаются элементы с четкими границами, например буквы, то вокруг таких границ появляется характерный муар портящий изображение. Поэтому практически к каждой фотографии надо пробовать применять различные коэффициенты сжатия до получения удовлетворительного качества при минимально возможном размере файла.

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

PNG — значительно более новый формат для сжатия как индексированных, так и полноцветных изображений. При работе с индексированными изображениями, в некоторых случаях, способен дать полуторакратный выйгрыш по сравнению с GIF. Формат может применять различное количество бит для кодирования информации. Однако, многие графические редакторы, хотя и способны открыть любой PNG файл, могут сохранять данные в только в кодировках 24 или 8 бит. Даже если у вас в изображении используется всего 4 цвета они все равно будут кодироваться 8 битами. Расточительно, но настоящий момент надежно, так, например, самая последняя версия популярного HTML редактора Macromedia Dreamweaver 4.0 не может правильно отразить формат если он кодирован менее чем 8 битами. PNG не поддерживается браузерами ранних версий. Да и сейчас браузеры отражают только базовые фичи стандарта. Более того, разные браузеры по разному отображают яркостную составляющую PNG картинки. Эффективная сфера применения формата средние и большие изображения со значительными равномерно залитыми участками. Например скриншот окошка драйвера Windows (440×430 pix) ужимается PNG до 4,7 КБ при 11 цветах и дизеринге 10%. Формат GIF позволяеn получить 8,5 КБ при тех же установках. На малых изображенииях выйгрыш даваемый PNG уже менее значителен. Очевидно, у этого формата большое будущее, но пока подавляющее большинство приложений не будет готово к использованию различных модификаций PNG стандарта использовать его нужно очень и очень осторожно.

 

Раздел 2

В каких же случаях применять тот или иной формат? Сведем все вышесказанное в разделе 1 в таблицу:

Тип изображения GIF JPEG PNG*
1. Фотографии (большие) - да -
2. Фотографии (малого размера) да да -
3. Рисованные изображения да - да
4. Диаграммы и графики да - да
5. Текст в виде картинки да - да
6. Скриншоты системных окон Windows да - да

Примечание: Иногда, бывает сложно определиться с выбором правильного формата «на глаз», тогда попробуйте разные и оставьте лучший.

ОК, с форматом мы определились. Теперь опишем как быстро провести финальную оптимизацию при помощи Xat.com Image Optimizer. Загрузить ее можно по адресу: http://www.xat.com/internet_technology/download.html

Это небольшая и очень удобная программа для тех, кому надо сделать все быстро и без особых усилий (не пуская в ход тяжелую артиллерию в виде Corel Photopaint, Photoshop и др. :)). Причем, после инсталляции у нас на винте окажется две программки — Image Optimazer и Image Optimazer Professional. Первая из них не требует регистрации — её и рассмотрим. :))

Итак, поехали… Загружаем изображение в Оптимайзер и нажимаем кнопку  на панели слева.

После этого, на появившейся панели управления выбираем необходимый нам формат (File Type).

В случае JPG на этой же панели управления нажимаем кнопку автоматической оптимизации . В появившемся дополнительном окне наблюдаем как будет выглядеть оптимизированное изображение. В заголовке окна показан новый размер и процент ужатия от оригинала. Все! Обычно этого для большинства картинок достаточно. Осталось только сохранить оптимизированное изображение. Если получаемое изображение вас не устраивает по размеру или по качеству, можно дополнительно поработать имеющимися на панели бегунками наблюдая за производимым эффектом и размером файла в окне. В случае форматов GIF и PNG кнопка автоматической оптимизации отсутствует, поэтому, устанавливаем бегунок Dithering в положение 10%, а бегунок количества цветов в минимум. После этого начинаем постепенно увеличичать кол-во используемых цветов, пока не получим удовлетворяющее нас изображение. Прим. Если вы не видите панель управления на своем экране, вызовите ее нажатием соответствующей кнопки на панели инструментов сверху.

Если же, поработав с бегунками, вы желаете достичь еще большей оптимизации (на практике максимум 5-10%), то можно воспользоваться дополнительными возможностями предоставляемыми Оптимайзером (они описаны в интерактивном руководстве http://www.xat.com/io/tutorial.html). Но чаще всего, это не обязательно. Получаемое изображение и так получается достаточно компактным.

Разумеется Image Optimazer — это совсем не единственный продукт в своем роде. Прекрасными возможностями обладают, например, такие гранды как — Corel Photopaint и Adobe Photoshop v.5.5. Там все выглядит немножко посложнее, но зато имеется полный контроль над происходящими процессами.

Раздел 3

Как правильно снабдить статью подготовленными изображениями?

Тексты авторских работ должны направляться в редакцию в виде файлов формата *.doc или *.rtf. Эти форматы поддерживают внедрение изображений, так что подготавливайте статью сразу с изображениями. Но, и это очень важно, в комплект поставки дополнительно добавьте все изображения, имеющиеся в статье, в виде отдельных оптимизированных файлов. (Кстати, в сам документ их можно внедрить по ссылке). Для удобства работы редактора при кодировании вашей статьи в HTML,  все картинки в статье пометьте, например, как Рис.1, Рис.2, Рис. 3 и т. д. а соответствующие им файлы изображений назовите img1.gif, img2.jpg, img3.gif и далее. Это значительно облегчит работу по подготовке вашей статьи к публикации и исключит возможные ошибки.

Пока не решены вопросы со 100% совместимостью формата PNG, стоит воздержаться от его применения при подготовке статей. Делая скриншоты стандартных окон Windows, например панелей настройки драйверов, старайтесь использовать базовую (Windows default) цветовую схему, т. е. черные буквы на сером фоне. Подготавливая графики и диаграммы не следует увлекаться красивыми градиентными заливками и фотографическими фоновыми изображениями, т. к. такой подход приведет к неоправданному увеличению размера файла изображения и вызовет раздражение у читателей использующих низкоскоростное модемное соединение.

Старайтесь, чтобы подготовленные вами изображения не превышали 15-20 КБ (для ориентировки — типичный размер большинства оптимизированных картинок 300×200 px составляет 5-10 КБ). Если необходимо вставить в статью изображение большого размера, то лучше отдельно подготовить его уменьшенную копию, а уже с нее редактор сделает ссылку на большое изображение. Если будет необходимо, читатель самостоятельно просмотрит большое изображение в отдельном окне браузера.




Дополнительно

Рекомендации по подготовке графического сопровождения статей

Рекомендации по подготовке графического сопровождения статей

При подготовке статей для публикации, для большей наглядности и привлекательности очень часто приходится сопровождать излагаемый материал графическими изображениями, а в иных случаях, без графики в статье просто не обойтись. А полноцветная, красивая графика это всегда большие объемы. Если мы готовим статью для журнала, то здесь нет проблем с выбором типа файла для представления картинок — размер файла не важен, главное качество. Совершенно иная ситуация с публикацией графических материалов в Интернет, здесь данные загружаются из сети, а каждый килобайт информации стоит денег и за него всегда кто-нибудь платит. Платит пользователь — гость сайта, платит владелец сайта, неговоря уже о том, что загрузка большого количества данных просто требует дополнительного времени, которого и без этого постоянно не хватает. Отсюда следует, что едва ли не первостепенное значение приобретает вопрос минимизации количества данных требуемых для передачи изображения . Если попытаться точнее сформулировать эту задачу, то необходимо оптимизировать изображение таким образом, чтобы при достаточном для восприятия качестве, размер файла изображения был минимальным. Эта задача полностью ложится на плечи автора, подготавливающего статью, и для каждой картинки последовательно решается выполнением двух операций (условий):

  1. Выбор наиболее подходящего формата хранения изображения;
  2. Выбор оптимальных значений параметров изображения внутри формата.

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

  1. Рассмотрим основные файловые форматы хранения, изображения и как правильно определиться с выбором
  2. Покажем как быстро провести оптимизацию изображения на примере программы Xat.com Image Optimizer
  3. Обсудим порядок сопровождения готовой статьи изображениями при направлении в редакцию iXBT

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

Раздел 1

На настоящий момент существует три основных формата изображений со сжатием, которые понимают браузеры —  GIF, JPG и PNG. Их надо уметь правильно применять, так как, повторимся, ошибка с выбором формата для конкретной картинки приведет или к значительной потере качества, или кнеоправданному увеличению размера, посмотрите на примеры:

Попытка применить формат GIF к приведенной ниже фотографии при одинаковом качестве приводит к увеличению размера файла в 4 и более раз:


Файл формата JPG — 8,03 КБ (8535 байт)

Файл формата GIF — 35,6 КБ (36504 байт)

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

Файл GIF Файл JPG Файл JPG
2,45 КБ (2516 байт) 2,48 КБ (2546 байт) 10,6 КБ (10879 байт)
Оптимальный формат и размер файла картинки При одинаковом размере файла, JPG явно проигрывает для данного изображения При одинаковом с GIF качестве размер файла формата JPG в 4 раза больше.

Итак, что же представляют собой форматы изображения и чем они отличаются? Рассмотрим только самые основные особенности этих стандартов.

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

При работе с GIF старайтесь устанавливать палитру в Adaptive или Optimized, тогда палитра будет содержать только те цвета, которые имеются в изображении и никаких лишних. Что это дает — можно попытатся уменьшить количество цветов в палитре, а визуальное качество не упадет. Размеры палитры, а значит и количество цветов в файле может варьироваться от 2 до 256. От размера палитры зависит и количество бит применяемых для кодирования. Так, для двух цветов достаточно 1 бита, для 4 цветов — 2х бит, для 8 цветов — 3х бит и т. д. по «степени двойки». Максимальная палитра кодируется 8 битами. Чем меньше палитра, тем меньше размер файла в байтах. Формат поддерживает режим interlaced — при этом картинка постепенно проявляется в браузере по мере загрузки. При использовании такого режима размер файла почти не меняется, а иногда становиться даже меньше.

JPG (а если быть более точным JFIF — JPEG File Interchange Format) — формат для сжатого хранения полноцветных (см. отличие от GIF) изображений на основе когерентности участков изображения). Сжатие JPEG использует мозаику размером 8×8 пикселов и при низком качестве изображения границы этих квадратиков могут наложиться и быть видимыми на картинке. Основано на свойстве человеческого зрения более чутко реагировать на изменение цвета и освещенности, а не на сам цвет как таковой. Так, информация о цветности внутри квадратиков, в процессе дискретных косинусных преобразований (DCT), трансформируется в информацию об изменении цветности. Сжатие происходит в несколько этапов, последовательно выполняемых с целью отбросить наименее ценные для глаза данные и тем самым значительно уменьшить их количество.По своей природе подразумевает потерю качества. Не поддерживает прозрачность и анимацию. Использует различные коэффициенты сжатия. Чем выше сжатие, тем меньше размер файла, но и хуже качество. Идеален для полноцветных фотографий с плавными переходами цветовых тонов. Если же на фотографии встречаются элементы с четкими границами, например буквы, то вокруг таких границ появляется характерный муар портящий изображение. Поэтому практически к каждой фотографии надо пробовать применять различные коэффициенты сжатия до получения удовлетворительного качества при минимально возможном размере файла.

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

PNG — значительно более новый формат для сжатия как индексированных, так и полноцветных изображений. При работе с индексированными изображениями, в некоторых случаях, способен дать полуторакратный выйгрыш по сравнению с GIF. Формат может применять различное количество бит для кодирования информации. Однако, многие графические редакторы, хотя и способны открыть любой PNG файл, могут сохранять данные в только в кодировках 24 или 8 бит. Даже если у вас в изображении используется всего 4 цвета они все равно будут кодироваться 8 битами. Расточительно, но настоящий момент надежно, так, например, самая последняя версия популярного HTML редактора Macromedia Dreamweaver 4.0 не может правильно отразить формат если он кодирован менее чем 8 битами. PNG не поддерживается браузерами ранних версий. Да и сейчас браузеры отражают только базовые фичи стандарта. Более того, разные браузеры по разному отображают яркостную составляющую PNG картинки. Эффективная сфера применения формата средние и большие изображения со значительными равномерно залитыми участками. Например скриншот окошка драйвера Windows (440×430 pix) ужимается PNG до 4,7 КБ при 11 цветах и дизеринге 10%. Формат GIF позволяеn получить 8,5 КБ при тех же установках. На малых изображенииях выйгрыш даваемый PNG уже менее значителен. Очевидно, у этого формата большое будущее, но пока подавляющее большинство приложений не будет готово к использованию различных модификаций PNG стандарта использовать его нужно очень и очень осторожно.

 

Раздел 2

В каких же случаях применять тот или иной формат? Сведем все вышесказанное в разделе 1 в таблицу:

Тип изображения GIF JPEG PNG*
1. Фотографии (большие) - да -
2. Фотографии (малого размера) да да -
3. Рисованные изображения да - да
4. Диаграммы и графики да - да
5. Текст в виде картинки да - да
6. Скриншоты системных окон Windows да - да

Примечание: Иногда, бывает сложно определиться с выбором правильного формата «на глаз», тогда попробуйте разные и оставьте лучший.

ОК, с форматом мы определились. Теперь опишем как быстро провести финальную оптимизацию при помощи Xat.com Image Optimizer. Загрузить ее можно по адресу: http://www.xat.com/internet_technology/download.html

Это небольшая и очень удобная программа для тех, кому надо сделать все быстро и без особых усилий (не пуская в ход тяжелую артиллерию в виде Corel Photopaint, Photoshop и др. :)). Причем, после инсталляции у нас на винте окажется две программки — Image Optimazer и Image Optimazer Professional. Первая из них не требует регистрации — её и рассмотрим. :))

Итак, поехали… Загружаем изображение в Оптимайзер и нажимаем кнопку  на панели слева.

После этого, на появившейся панели управления выбираем необходимый нам формат (File Type).

В случае JPG на этой же панели управления нажимаем кнопку автоматической оптимизации . В появившемся дополнительном окне наблюдаем как будет выглядеть оптимизированное изображение. В заголовке окна показан новый размер и процент ужатия от оригинала. Все! Обычно этого для большинства картинок достаточно. Осталось только сохранить оптимизированное изображение. Если получаемое изображение вас не устраивает по размеру или по качеству, можно дополнительно поработать имеющимися на панели бегунками наблюдая за производимым эффектом и размером файла в окне. В случае форматов GIF и PNG кнопка автоматической оптимизации отсутствует, поэтому, устанавливаем бегунок Dithering в положение 10%, а бегунок количества цветов в минимум. После этого начинаем постепенно увеличичать кол-во используемых цветов, пока не получим удовлетворяющее нас изображение. Прим. Если вы не видите панель управления на своем экране, вызовите ее нажатием соответствующей кнопки на панели инструментов сверху.

Если же, поработав с бегунками, вы желаете достичь еще большей оптимизации (на практике максимум 5-10%), то можно воспользоваться дополнительными возможностями предоставляемыми Оптимайзером (они описаны в интерактивном руководстве http://www.xat.com/io/tutorial.html). Но чаще всего, это не обязательно. Получаемое изображение и так получается достаточно компактным.

Разумеется Image Optimazer — это совсем не единственный продукт в своем роде. Прекрасными возможностями обладают, например, такие гранды как — Corel Photopaint и Adobe Photoshop v.5.5. Там все выглядит немножко посложнее, но зато имеется полный контроль над происходящими процессами.

Раздел 3

Как правильно снабдить статью подготовленными изображениями?

Тексты авторских работ должны направляться в редакцию в виде файлов формата *.doc или *.rtf. Эти форматы поддерживают внедрение изображений, так что подготавливайте статью сразу с изображениями. Но, и это очень важно, в комплект поставки дополнительно добавьте все изображения, имеющиеся в статье, в виде отдельных оптимизированных файлов. (Кстати, в сам документ их можно внедрить по ссылке). Для удобства работы редактора при кодировании вашей статьи в HTML,  все картинки в статье пометьте, например, как Рис.1, Рис.2, Рис. 3 и т. д. а соответствующие им файлы изображений назовите img1.gif, img2.jpg, img3.gif и далее. Это значительно облегчит работу по подготовке вашей статьи к публикации и исключит возможные ошибки.

Пока не решены вопросы со 100% совместимостью формата PNG, стоит воздержаться от его применения при подготовке статей. Делая скриншоты стандартных окон Windows, например панелей настройки драйверов, старайтесь использовать базовую (Windows default) цветовую схему, т. е. черные буквы на сером фоне. Подготавливая графики и диаграммы не следует увлекаться красивыми градиентными заливками и фотографическими фоновыми изображениями, т. к. такой подход приведет к неоправданному увеличению размера файла изображения и вызовет раздражение у читателей использующих низкоскоростное модемное соединение.

Старайтесь, чтобы подготовленные вами изображения не превышали 15-20 КБ (для ориентировки — типичный размер большинства оптимизированных картинок 300×200 px составляет 5-10 КБ). Если необходимо вставить в статью изображение большого размера, то лучше отдельно подготовить его уменьшенную копию, а уже с нее редактор сделает ссылку на большое изображение. Если будет необходимо, читатель самостоятельно просмотрит большое изображение в отдельном окне браузера.