На главную страницу ЗАО Софткей
 Главная   Новости   Статьи   Пресс-релизы   Рассылки 
 
MS O365 test

Прокрустово ложе для графики

12.02.2003 / Программы / Александр Якутский

Смело сохраняйте экранную графику с разрешением 1 dpi!Недавно мне довелось вступить в переписку с одним из читателей нашего издания. Читатель интересовался, с каким разрешением необходимо сохранять графику для последующей публикации в Сети? В различных онлайновых банках хранятся графические файлы с установленным разрешением, как правило, 72 пикселя на дюйм (dot per inch, dpi), хотя нередко можно натолкнуться на разрешение 96 и даже 300 dpi. Какой вариант предпочтительнее? Пришлось отвечать, что наиболее подходящее разрешение для отображения на экране - 1 dpi. Или 1200 dpi. Или любое другое значение. Именно так, не удивляйтесь.

Все дело в том, что монитору абсолютно безразлично, что за картинку ему подсовывают, с каким разрешением она сохранена. Его интересует лишь размер в пикселях. Скажем, если размер картинки 800х600, и это совпадает с выбранным видеорежимом, то картинка займет весь экран, а при видеорежиме 640х480 изображение целиком на экран не вместится. Реальное же графическое разрешение определяется техническими характеристиками самого монитора, не более того.

Предположим, вы работаете в режиме 800х600 пикселей. Сколько в таком случае пикселей умещается на диагонали рабочей поверхности экрана? Вспоминаем теорему Пифагора и с легкостью вычисляем: ровно тысяча. Теперь возьмем линейку и измерим высоту и ширину рабочей поверхности, в сантиметрах. У меня получилось 27х20 см. При таких размерах диагональ рабочей поверхности равна 33,6 см или 13,22 дюйма. Разделим количество пикселей, умещающихся на диагонали, на ее длину. Получилось что-то около 76 пикселей на дюйм, dot. Это - графическое разрешение моего монитора. Причем, в данный момент времени. А теперь я воспользуюсь меню настройки монитора и "сожму" рабочую поверхность по горизонтали. Нетрудно догадаться, что графическое разрешение изменится, точнее, увеличится. А картинка размером 800х600 как занимала весь экран, так и занимает. Что же, ее разрешение тоже увеличилось? Нет, конечно. Так сколько dpi нужно указывать при сохранении файла, чтобы он корректно отображался на экране любого монитора в любой момент времени? Сколько ни укажи, на всех все равно не угодишь, верно?

И последний, сугубо эмпирический эксперимент. Возьмите любой графический файл, откройте его в Photoshop и сохраните несколько версий с разным графическим разрешением. При этом следите, чтобы ширина и высота изображения, в пикселях, не изменялись. Теперь откройте все сохраненные таким образом файлы и найдите среди них хотя бы одно отличие. Не нашли? Что и требовалось доказать.

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

"Кстати", - спросил я своего собеседника в очередном письме, - "Какой программой графику оптимизируете?". "Photoshop 6.0. Точнее, прилагающейся к нему ImageReady 3.0", - был ответ. Что ж, продукты компании Adobe - чуть ли не стандарт работы с графикой. Но, если в области полиграфии Adobe действительно нет равных, то для оптимизации онлайновых публикаций есть продукты и поэффективнее. Например, Ulead SmartSaver Pro 3.0.

Проведем небольшой эксперимент. В комплект поставки Photosop 6.0 входят несколько файлов-образцов. Возьмем один из них - Astronaut(CMYK).tif. Качественный снимок, вполне подойдет для наших задач. Правда, файл велик и придется немного его преобразовать, прежде чем начинать экспериментировать. Во-первых, приведем его к цветовой модели RGB, поскольку будем отображать картинку на экране. Во-вторых, уменьшим физический размер. При ширине 200 пикселей высота файла составляет 155 пикселей. Все готово к оптимизации объема. Нажимаем комбинацию клавиш Shift+Ctrl+M - и файл переносится в ImageReady, в которой и будет происходить оптимизация.

Попробуем сохранить этот фотоснимок в формате JPEG. На вкладке Optimize выбираем JPEG, устанавливаем значение Quality (Качество) на 75% и ставим галочку напротив опции Optimized. ImageReady тут же подсчитывает размер оптимизированного файла: 20 419 байт.

Теперь откроем наш файл в SmartSaver Pro и проделаем сходные манипуляции:

Параметры оптимизации для JPEG-формата
Параметры оптимизации для JPEG-формата

Оказывается, что из прокрустова ложа SmartSaver выйдет файл размером 12 447 байт. Почти сорок процентов экономии, шутка ли! Впрочем, нам ведь нужно не только ускорить загрузку картинки в браузер. Неплохо было бы еще сохранить ее качество. Хотя бы на приемлемом уровне. Хорошо, вставим оба файла на эту страницу. Для сравнения. Кстати, заодно попробуйте угадать, какой из файлов оптимизирован в ImageReady, а какой - в SmartSaver?

Различия есть, хотя бы в цветовой гамме, в уровне яркости и т.п. Но и тот, и другой файл вполне могут быть опубликованы на веб-странице, не правда ли? Так зачем тогда использовать файл более "тяжелый"? Вывод очевиден: для оптимизации используем SmartSaver. Кстати, файл, подготовленный с его помощью, помещен слева.

Сходные результаты будут получены и при преобразовании в формат GIF. На этот раз воспользуемся файлом Ducky.tif. Приведем изображение к размеру 183х200 пикселей, а затем проиндексируем его и применим алгоритм LZW-сжатия. Другими словами, преобразуем в формат GIF. В обеих испытуемых программах укажем следующие параметры оптимизации: палитра Optimized (Adaptive в ImageReady), количество цветов - 256, Dither - 100%. Как видим, качество изображения вновь вполне сопоставимо:

Что же касается объема файлов, то SmartSaver вновь более экономичен: 10 872 байта против 16 293! Налицо 33% экономии. Неплохо, да?

Однако внимательный читатель не преминет спросить с сарказмом: "Если SmartSaver так хорош, то зачем автор держит на своей персоналке еще и Photoshop? Для подобных экспериментов, что ли?" Нет, конечно. Дело в том, что SmartSaver потому так и называется (позвольте перевести это название как Умный или жесткий сохранятель), что великолепно оптимизирует графику для Паутины. Он работает с готовыми картинками, а вот возможности создания и редактирования изображений в него не заложены. Он не поддерживает фильтры, не работает со слоями, не управляет цветовыми и прочими характеристиками изображения. Вот и приходится для этих целей использовать старый добрый Adobe Photoshop, альтернативы которому я пока не нашел. Кстати, ничего не посоветуете?

Ссылки по теме:

Автор статьи: Александр Якутский


Рубрики статей
Все статьи
Аналитика
Программы
Игры
Интернет
Авторские права
Интервью
События в мире ПО
Рассылки
Новости мира ПО
Статьи: Мир ПО
Статьи: Программы
Статьи: Игры
Архив выпусков
  «   Апрель 2018   »  
Пн Вт Ср Чт Пт Сб Вс
      1
2345678
9101112131415
16171819202122
23242526272829
30      
Поиск в архиве

Логин / пароль:
запомнить




Наши партнеры:

 САПР и графика



Написать редактору  | RSSЭкспорт новостей и обзоров


Rambler's
Top100 Rambler's Top100

Разработка компании «Битрикс»
Разработано
«Битрикс»


Copyright © 2001-2018 ЗАО «Софткей»