Отправлено: 12.02.10 00:38. Заголовок: Форумная графика - худеем вместе

Вдруг захотелось принести пользу обществу. И рассказать, например, о том, как сделать свой сайт "полегче". О простых, доступных любому админу способах, не требующих понимания, что дает параметр "точек на дюйм" в Фотошопе или "глубина цвета" какая-нибудь.

Возьмем, например, графику ".jpg". По сути, это тот же архив, вроде zip или rar, в который упаковано изображение. Конечно, есть свои нюансы, более того, их немало, но по сути - это просто архив. Давайте, прежде чем говорить дальше, немного разберемся в практике архивирования.

Вот у нас есть строка, по условию, состоящая только из букв:

aaabbbcbcbcbс

есть архиватор, который может создавать вот такие конструкции: 3a = aaa, 3(ab) = ababab. Казалось бы, и о чем тут говорить? Говорить вот о чем: этим архиватором эту строку можно сжать по-разному. Смотрите сами:

aaabbbcbcbcbc = 3а3b3(cb)c
aaabbbcbcbcbc = 3а3bc3(bc)
aaabbbcbcbcbc = 3а2b4(bc)

Последний вариант на 1 символ короче, а строка та же самая, заметили? Вывод прост: сжимать одно и то же можно по-разному. Есть более и менее оптимальные алгоритмы. Простым пересохранением в другом "просмотрщике", использующем более совершенный алгоритм, можно добиться облегчения графики.

Я пользуюсь XnView. Бесплатная, удобная программа с хорошим функционалом. Сохраненные ею "жпеги" из фотошопа "худеют" зачастую в 2 раза, что весьма приятно: только что вы переживали, не много ли это - 40 кб на картинку, и вдруг они превращаются в 20. Совсем другой коленкор! Поглядеть и скачать ее можно здесь.

Но все-таки, жпег - это не просто архив. Формат жпег учитывает физиологию: человеческий взгляд различает не так много, с точки зрения компьютера, цветов. Если представить, что в нашей исходной строке a, b и с - это числа, соответствующие значению цвета, то, если эти цвета очень близки, жпег-архиватор вообще представит нам нашу строку так:

aaabbbcbcbcbс = 13a

потому что Вы все равно не отличите цвет а от цветов b и c - так зачем на них место терять? Все прекрасно, но можно захватить и объединить те цвета, которые человек все-таки различает. Так возникают искажения формата: картинка в жпег всегда искажена, иногда - незаметно, а иногда - очень даже заметно. Чувствуете - мы подошли к компромиссу: можно побалансировать на границе допустимых искажений, достигнув этим еще большего уменьшения размера (aaabbbcbcbcbс = 13a - 13 символов превратились в 3, но строку больше не узнать).

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

Пример такой программы: Advanced JPEG Compressor. Правда, с ней все грустно - продукт платный, забугорный. Впрочем, то, что буржуям платно, российскому пользователю достается по гуманитарной помощи, как правило.

Вот картинка Лиса:



ХnView пересохранением сделал из ее 28.82 Кб свои 28.4 Кб. Ерунда, 400 байт сэкономили, но если у Вас галерея в 100 таких картинок, юзеру уже на 35 Кб меньше загружать. А вот Advanced JPEG Compressor просто нагло ужал ее до 8.73 Кб без заметной моему глазу потери качества. А это уже почти 300%, однако. Такая вот загогулина.



К чему я это затеял? Да, да, конечно, чтобы быть полезным, безусловно, но все-таки - кто чем пользуется и как "облегчает" свою графику? :))

 Отправлено: 12.02.10 03:36. Заголовок: Dess пишет: но все-..

Dess пишет:

цитата:

но все-таки - кто чем пользуется и как "облегчает" свою графику? :))

Старый добрый Фотошоп.

Мне не раз приходилось слышать "А есть вот такая замечательная программа ***, она ужимает/увеличивает размер/добавляет четкости лучше Фотошопа!"
Не верю. Проще, чем в Фотошопе - да, возможно. Лучше - вряд ли.
Фотошоп - очень мощный инструмент, и крайне редко используются хотя бы 40% его возможностей.
Иногда удобнее воспользоваться маленькой отдельной программкой, дабы не загружать ради мелочи громоздкий пакет. Но говорить о том, что эта маленькая прога работает лучше Фотошопа я бы поостерегся.

Конечно, случаются исключения, но они так редки...

 Отправлено: 12.02.10 05:46. Заголовок: Riot (Radical image ..

Riot (Radical image optimizaton tool). Программа ужимает без заметной потери качества (Ужимаю до 90% процентов в Jpeg формат, качество остается на прежнем уровне). Рассчитано в основном на большие картинки. Но работал и с маленькими, так что примерное соотношение у меня получалось такое.
1.38 мб - 200 кб.
200 кб - 100 кб.
В любом случае закономерность указывает на сжатие минимум в два раза. Но есть и один минус, некоторые картинки, обычно на килобайт 5, оно не сжимает, а наоборот увеличивает на килобайт-другой.
Сама по себе программа удобная. Но и простая, расчитанная только на сжатие. в любом случае нажать на кнопку Open, выбрать и нажать на кнопку Save, чтобы получить результат, не сможет сделать далеко не каждый.

 Отправлено: 12.02.10 16:35. Заголовок: Шарль пишет: Но гов..

Шарль пишет:

цитата:

Но говорить о том, что эта маленькая прога работает лучше Фотошопа

Шарль, смотря в каком контексте. Я ведь говорю о сжатии графики. Видите ли, Word работает гораздо лучше Фотошопа, когда речь идет о наборе текстов :)). Так вот, сейчас речь идет о сжатии. И любая программа, предназначенная для этого, работает гораздо лучше фотошопа, который для этого вообще не предназначен.

Доказательство довольно элементарно (если оно вообще нужно): возьмите картинку Лиса, возьмите Фотошоп - и получите на выходе 8.73 кб без заметной потери качества. :)

 Отправлено: 12.02.10 17:45. Заголовок: Dess Верите ли - вч..

Dess
Верите ли - вчера как раз этим занимался, прочитав ваш пост. Возникает еще вопрос, что есть "видимая потеря качества" - для среднего человека это одно, для профессионального дизайнера и веб-дизайнера - совершенно другое.
Я занимаюсь дизайном и полиграфией последние двенадцать лет, для моего глаза приемлимая потеря качества была при ужатии Фотошопом картинки до размера 7,69 Кб (Quality - 15). Фотошоп версии CS4. Использовалось функция "сохранение для веб".

Кстати, сравнение некорректно - и упомянутая вами программа, и Фотошоп - для редактирования графики. Уместнее было бы сравнивать Ворд и Ноутпад или ОпенОфис.

 Отправлено: 12.02.10 23:31. Заголовок: Dess пишет: Ерунда,..

Dess пишет:

цитата:

Ерунда, 400 байт сэкономили, но если у Вас галерея в 100 таких картинок, юзеру уже на 35 Кб меньше загружать.

Для меня эта проблема очень даже актуальна. У меня, как вы все знаете огромный фотоальбом Монастыри и храмы Северо-запада. На каждой странице от 10 до 50, а иногда и более фотографий 800 на 600 px, 50-100 КБ каждая.

Фотошоп - CS2. Основной критерий до которого можно "облегчать" фотографию, это то чтобы был виден крест на фотографии общего плана церкви, как например здесь (самая первая фотография): http://palmernw.ru/preobr/preobr.html Купольные кресты в результате сохранения для web и так получаются достаточно размыты, а фотография весит целых 97.53 КБ!!!

 Отправлено: 13.02.10 21:46. Заголовок: Шарль пишет: Фотошо..

Шарль пишет:

цитата:

Фотошоп версии CS4.

Я не знал даже, что есть такой. У меня CS2. А то, как Вы ужали в Фотошопе - алгоритмизируется? Иначе говоря, можно ли составить руководство: "нажимай вот такие кнопки - и получишь результат"? Если можно - подЕлитесь? :)

Solo, AJP, который хвалил я и который ругал Шарль, дал вот такой результат: смотреть. 57.3 кб из Ваших 97-и. Правда, это я подвинул ползунок к "похуже, но поменьше", поэтому искажения видны.

 Отправлено: 13.02.10 22:18. Заголовок: Dess, спасибо, что о..

Dess, спасибо, что откликнулись.

Dess пишет:

цитата:

Solo, AJP, который хвалил я и который ругал Шарль, дал вот такой результат: смотреть.

Результат не понравился, НО Вы обрабатывали уже обработанную фотографию. Результат заведомо будет ужасен. Попробуйте обработать первоисточник (2592 x 1944 пик., 3252 Кб)

Тогда сразу будет понятно: лучше это или хуже.

Оффтоп: Кстати, вот иллюстрация к тому, что картинки лучше всё же класть к себе, а не на Радикал или ещё куда-то. Такую гигантскую фотографию Радикал загрузить-то загрузил, однако открывать отказался. Пришлось переложить её на народ.ру

 Отправлено: 13.02.10 23:58. Заголовок: Solo, не знаю, прави..

Solo, не знаю, правильно ли я понял ТЗ :), но я уменьшил размеры до 800*600 и "сжал". Вот оно: смотреть

68 кб с копейками. При этом ползунок я не трогал, он стоял "на умолчании", 50%. Т.е. качество можно повысить за счет того, что картинка будет "потяжелее" 68 кб.

 Отправлено: 14.02.10 20:29. Заголовок: Я попробовала сделат..

Я попробовала сделать то же самое в фотошопе CS-3. Вот результат:

Смотреть

Весит около 60 Кб. К сожалению, резкость оригинала потерялась.
В предыдущем варианте у Dess'а получаются такие полосы по небу, зато всё немного порезче, у меня полос нет, зато порасплывчатей.

 Отправлено: 14.02.10 22:40. Заголовок: Посмотрела. Нет, изв..

Посмотрела.
Нет, извините за прямоту, но мне всё-таки результаты Мэгги и Dessа не понравились. На данный момент никак не получается сделать хорошо и легко. Только что-то одно.
Так что пожертвуем трафиком посетителей))) Тем более, что на главной странице у меня стоит предупреждение: «Сайт рассчитан на посетителей, трафик которых не ограничен».

 Отправлено: 15.02.10 11:36. Заголовок: Solo пишет: Такую г..

Solo пишет:

цитата:

Такую гигантскую фотографию Радикал загрузить-то загрузил, однако открывать отказался

Оффтоп: Это частные проблемы, я загружал файлы по 3-5 мб - и всё открывалось.
Но иногда хост тупит, с этим ничего не поделать.
Так что держать действительно лучше у себя.

 Отправлено: 15.02.10 16:28. Заголовок: А вариант с небольшо..

А вариант с небольшой картинкой, кликабельной на большую с отличным качеством не рассматривался? Тогда можно и указать, что там таится 500к размеров 2000 на 3000.

 Отправлено: 16.02.10 11:59. Заголовок: Все чавой-то умеют в..

Все чавой-то умеют в фотошопе делать - и никто не делится. :))
Тоже буду свои необъятные познания жать! :)) Вот спросите, спросите меня, какая команда процессора делает так, чтобы колобок в "Диггере" съел чёртика - не скажу, что это команда "eat chertik, kolobok"! :))

 Отправлено: 16.02.10 19:31. Заголовок: Dess пишет: Все чав..

Dess пишет:

цитата:

Все чавой-то умеют в фотошопе делать - и никто не делится.

Ну почему? Очень даже можно поделиться ;)
Если при сохранении картинки нажать на ссылку "Сохранить для web", то потом можно выбрать расширение (png, jpg, gif или какое-нибудь другое - там большой список) и покрутить настройки, которые откроются на том или другом формате. Можно достаточно сильно ужать вес. Вот только качество всё равно: чем легче картинка - тем хуже. Но всё-таки в CS3 уже стало лучше "облегчать" вес картинок, чем в предыдущих версиях фотошопа. Думаю, что в CS4 ещё лучше. Только у меня его нет (((

 Отправлено: 03.03.10 22:43. Заголовок: Кстати, о фотошопе: ..

Кстати, о фотошопе: почему-то в нём нет программки, которая раскладывала бы гифовский анимированный рисунок на кадры. Если като-нибудь знает: была такая программка для создания анимации, очень простенькая, в которую если загнать анимированный рисунок - она его сразу раскладывала на слайды. Подскажите, как она называется! А то, не помня названия, я не могу её найти ((.

У меня фотошоп CS-3. Может, в нём такая функция есть, но я почему-то не могу её найти, хотя упорно ищу.

 Отправлено: 04.03.10 01:01. Заголовок: Мэгги пишет: была т..

Мэгги пишет:

цитата:

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

Adobe ImageReady
Это вроде как часть пакета CS студии сейчас.

 Отправлено: 04.03.10 12:46. Заголовок: гость Большое спаси..

гость
Большое спасибо! Как раз она и была, теперь я вспомнила.

 Отправлено: 04.03.10 18:43. Заголовок: Нет, всё-таки это не..

Нет, всё-таки это не та программка. У меня в CS3 действительно есть встроенная функция анимации, которая раньше в Adobe была отдельно. Но к сожалению, я не могу в ней разложить гиыовское анимированное изображение на отдельные слайды. Когда я помещаю рисунок в фотошоп, он сразу же оставляет только один слайд и с этим я пока ничего сделать не смогла.

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

 Отправлено: 18.03.10 10:00. Заголовок: Мэгги, но Image Read..

Мэгги, но Image Ready это делает.
Открываете в нем свой gif
Он у Вас виден как набор кадров. Справа каждый кадр показан как "слой".
Отмечаете нужные для сохранения слои.
В меню File выбираете Export -> Layers as Files. Вам дают окошко с настройкой записи.

В нем, в рамке FileOptions выбираете кнопкой Shoose... папку, куда сохранить,
в рамке Save Options ставите для Export значение Selected Layers (можно и все слои в виде файлов сохранить),
в рамке Format Options выбираете формат сохранения (например, JPEG).

Ну и жмете кнопку Ок.

Может быть, есть еще способ, "одной кнопкой", но я его не знаю. :)

 Отправлено: 18.03.10 10:47. Заголовок: Dess Если это тот I..

Dess
Если это тот Image Ready, который сейчас встроен в фотошоп - то увы, я просто не могу в нём открыть картинку, не запуская сам фотошоп. А фотошоп тут же "берёт руководство" на себя и не даёт открыть все кадры. Открывает только какой-то один - и всё (((

Если, конечно, есть ещё такой Image Ready, который можно скачать без фотошопа - это здорово. Но я пока не нашла ((( Или искать не умею.

Но вообще, попробую слегка посражаться с фотошопом, вдруг повезёт.

 Отправлено: 18.03.10 14:36. Заголовок: А пробовали так: по ..

А пробовали так: по файлу gif-а правой кнопкой, выбрать в меню "Открыть с помощью", а в предложенном списке выбрать "Image Ready"?

 Отправлено: 18.03.10 14:56. Заголовок: Dess Знаете, не про..

Dess
Знаете, не пробовали. Сейчас попробую )))))))))))))))))))

________________________
Через пять минут: увы-увы, не предлагает мне компьютер такой программы (((

 Отправлено: 19.03.10 02:02. Заголовок: А там есть такой пун..

А там есть такой пунктик - "Выбрать". И, щелкнув по нему, Вы попадаете в файловое окошко, в котором просто идете по пути C:\Program Files\Adobe\Adobe Photoshop CS3, находите файл ImageReady.exe и выбираете его. Галку "Всегда открывать с помощью этой программы" ставить не надо. :)

 Отправлено: 19.03.10 14:17. Заголовок: Dess Я поняла: у ме..

Dess
Я поняла: у меня нет этой программки в фотошопе ((( Я пыталась её найти, но увы, в папке с фотошопом ничего подобного нет. Наверное поэтому я и не могу открыть анимированные файлы.
Но каким тогда образом фотошоп делает анимацию - это другой вопрос.