четверг, 28 февраля 2013 г.

Обработка документов или чертежей в растровом редакторе изображений

Часто бывает что нужно показать некоторый документ. Это может быть справка или типульный лист, или просто автограф; и мы его просто сканируем и вставляем в качестве изображения. Вот например такой документ
Обычный лист сделаный на сканере. Но потом его обработали и сохранили в формате .JPEG - это обычный формат в котором сохраняют фотки в основной своей массе. Размер этого ни чем не призентабельного изображения всего какие то 150 килобайт. Все бы ни чего , как шумы на листе или цвет бумаги листа, блики и отражения можно было бы не заметить, но размер вот что больше всего поражает, тем более когда этот лист нужно посмотреть в инете, на котором нет ни чего примечательного кроме самого изображения. Сразу возникает вопрос, а как его можно сократить, если известно, что формат изображений в jPEG - наиболее ужимаемый и компактный, но как это оказалось совсем не так. И как сделать меньше сейчас мы расскажем здесь


Это тот же самый лист , но уже без огрехов сканирования, цвета бумаги, как ни странно имеющий размер всего 22 килобайта, т.е как минимум мньше в 5-6 раз, причем формат его уже не такой компактный ибо это файл в формате PNG, который как известно на порядок менее копактен. Вы можете спросить что случилось с листом, а ответ лежит просто на поверхности, перед вами тот случай когда умелое использование формата PNG сокращает объем графической информации существено, не нарушая целостности самого изображения.


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

** обратите внимание на множественные точки около изображения. Нет не огрехи сканирования, а спецефичные искажения связаные с кодированием в формате jPEG
(в данном случае само изображение передается с помощью PNG). Размер этого изображения 168 килобайт достаточно убедительный для понимания того , что много чего лишнего мы храним, когда хотим показать элементарную формулу используя формат jPEG - в основном предназначный для хранения цветных растровых изображений. Если все же сжимать в формате конкретном jPEG, то этот демонстрационный рисунок будет иметь размер - 28680 байт. Да компактнее по сравнению с форматом PNG, но все же достаточно большой для для такого простого демонстрационного рисунка.
Сразу возникает вопрос как удалить эти искажения на уже созданом рисунке. Для этого подходит инструмент "Порог". Он есть во многих растровых редакторах, ну коль мы работаем с GIMP, то про него и будем рассказывать. Как им пользоваться это отдельный разговор и для этого наверно нужно сделать отдельную заметку.
Либо через меню, либо через инструмент открываем сервис ПОРОГ и видим такую гистограмму

Сразу при открытии сервиса ПОРОГ происходи чистка с параметрами начального запуска, но мы усиливаем эффект установкой порога для перехода с черного в белый равным 200, а точку белого оставим на уровне 255.

Вот что в результате у нас получилось

**сразу заметим что используются только два цвета - черный и белый, но существенно уменьшился размер изображения. В нашем случае это 5237 байт. Как видим размер реально даже по сравнению с форматом jPEG как минимум в 4 раза меньше и хранится уже в формате PNG, т.е явно виден выигрыш при умелом использовании формата при передаче некторой совокупности изображений, а конкретно - черно-белых рисунков не имеющих полутонов.
Правда здесь есть одно маленькое но, которое обычно не существено для многих вариантов, а имено тот факт, что изображение на белом фоне. Ибо дизайнеры джи-пеговской школы очень любят иметь подложку настраиваемую под непосредственную обстановку веб-сайта, забывая сами при этом , что фон у сайта может сам реально динамически изменяться у клиента в зависимости от настроек браузера.
Чтобы решить эту проблему достаточно вместо белого фона применить прозрачный фон, и тогда в зависимости от веб-подложки фон рисунка будет реально подстраиваться под браузер автоматически, без всяких там танцев со свистульками и дудочками

** вот пожалуйста это изображение. Размер его еще сократился до 5060 байт, ибо в самом рисунке только 1 цвет - черный и для передачи прозрачного информация отсутствует
** Для показа возможности использования прозрачного фона я добавил цвет фона через атрибуты веб-документа и мы видим этот рисунок, ну к примеру на желтом фоне

ИТОГО - мы с помощью изменения формата изображения с традиционного jPEG (28680), на дизайнерский PNG (5060) , а так же очистив и преобразовав рисунок в одноцветный - реально сократили объем ч/б рисунка (чертежа) в 5.67 раз, добавив к нему возможность публикации на любом фоне, который может быть востребован веб-сайтом и браузером.
**Не забывайте есть еще вариант когда браузер автоматом имеет фон черного цвета и тогда он автоматом инвертирует изображения, так что инвертировать изображения имеющее только один цвет на порядки легче чем любое много цветное и более корректно