• Оптимизатор фотографий JPEG для WEB • 
Оптимизатор фотографий JPEG для WEB фирмы WipSoft.
Размещенные в сообщениях ссылки на любой материал, который можно скачать и использовать для работы в фотопрограммах, необходимо в обязательном порядке сопровождать тегом [ spoil_zakon][ /spoil_zakon]. Не надо давать повод сомневаться в законности на нашем форуме.
В ДАННОМ ПОДФОРУМЕ ТЕМЫ НЕ ДОЛЖНЫ БЫТЬ БОЛЕЕ 10 СТРАНИЦ ИЛИ 100 СООБЩЕНИЙ. При достижении 100 сообщений в теме, необходимо в подфоруме создать новую тему с тем - же названием, но со следующей нумерацией (№ 01. № 02 и т.д.) !!! Заполненную тему не надо закрывать, а просто в новой теме в первом сообщении обязательно разместить ссылку на предыдущую тему - начало.
Теги к теме для индексации ботами поисковых систем. Это стоит заполнять! • Как видно из названия программы, она работает только с изображениями в формате JPEG • Теги к теме для индексации ботами поисковых систем. Это стоит заполнять!

    Оптимизатор фотографий JPEG для WEB

Сообщение Разместил Alikkoff 11 янв 2010, 14:45

Оптимизатор фотографий JPEG для WEB фирмы WipSoft. Программа бесплатная, скачать последнюю версию можно со страницы загрузок сайта разработчика, размер дистрибутива 1,8 Мб (версия 1.1).

Как видно из названия программы, она работает только с изображениями в формате JPEG. В большинстве случаев этого вполне достаточно, так как обычно фотографии делают именно в этом формате, а снимки в TIFF или RAW все равно для интернета оптимизируют в JPEG. Графические же форматы GIF или PNG, в основном, используются профессионалами, а уж они найдут способ сжать изображение и без программы "Оптимизатор фотографий..."
Страница загрузки
Итак, скачиваем, инсталлируем и запускаем программу. Загружаем изображение, нажав кнопку.
Sony Alpha A77 II (M2), Fujifilm X-M1, Panasonic Lumix DMC-LF1, Panasonic Lumix DMC-LХ7, FUJIFILM FINEPIX XP60, PANASONIC HDC-SDT750, Canon LEGRIA NV40

Alikkoff
Александр
Александр 

Оптимизатор фотографий JPEG для WEB

Сообщение Разместил Alikkoff 11 янв 2010, 15:04

1. Главное окно программы "Оптимизатор изображений JPEG"
В левой части главного окна выводится исходное (оригинальное) изображение, а справа - обработанное (оптимизированное). Все изменения отражаются на нем в реальном времени, а внизу под изображениями оригинала и результата обработки выводятся их параметры: размер фотографии в пикселах, разрешение и объем в килобайтах.

Обработку фотографии начинаем, как всегда, с установки "интернетовского" разрешения 72 dpi в выпадающем списке окна "Разрешение". При этом изменится размер изображения в пикселах и в килобайтах. Обычно результат сразу получается оптимальный и дальнейших действий не требуется. Сохраняете изображение кнопкой (Сохранить) и можете отправлять его почтой. Естественно, это быстро, но скучно, поэтому исследуем другие инструменты, предлагаемые авторами "Оптимизатора...".

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

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

Дополнительно уменьшить размер файла оптимизированного изображения можно кадрированием (обрезкой) его. Для этого нажмите кнопку "Обрезка". При помощи мыши выделите нужную область в правой части окна программы и нажмите на клавишу .

Кроме оптимизации изображения, программа позволяет выполнить небольшую коррекцию снимка. Для этого служит кнопка "Обработка" в правом нижнем углу главного окна. Доступные регулировки параметров изображения показаны на рис.2:

2. Коррекция изображения в программе "Оптимизатор изображений JPEG"
На мой взгляд, коррекция изображений в программе работает очень грубо и лучше ее не применять, а при необходимости, использовать любой фоторедактор.

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

Программа Оптимизатор изображений JPEG... российской разработки, и её описание на русском языке достаточно подробное. Файл справки небольшой, но информативный и содержит необходимые рекомендации по установке программы и описание всех элементов управления.
Sony Alpha A77 II (M2), Fujifilm X-M1, Panasonic Lumix DMC-LF1, Panasonic Lumix DMC-LХ7, FUJIFILM FINEPIX XP60, PANASONIC HDC-SDT750, Canon LEGRIA NV40

Alikkoff
Александр
Александр 

Оптимизатор фотографий JPEG для WEB

Сообщение Разместил Alikkoff 11 янв 2010, 15:05

При подготовке изображений для размещения в интернете или отправки по электронной почте требуется обеспечить необходимое в каждом конкретном случае качество при минимальном объеме файла. Для выполнения этого условия исходное изображение надо оптимизировать. Если вы хотите получить наилучший результат, то альтернативы Photoshop нет. Кроме того, лучшая программа создания сайтов Adobe Dreamweaver CS3 полностью интегрирована с Photoshop, так как, напомню, что компания Adobe приобрела в 2005 году фирму Macromedia, создателя Dreamweaver.

Работа по оптимизации изображений делится на два этапа: подготовка изображения в редакторе и процесс сжатия. Описания оптимизации обычно начинаются сразу с применения команды Save for Web (Сохранить для Web) или переходом в Image Ready, а предварительной подготовке не уделяется должного внимания. По умолчанию считается, что картинка уже отредактирована, то есть подготовлена к печати. А между тем, оптимизация для Web отличается от подготовки к печати весьма существенно. Кроме того, возможности редактора по изменению параметров изображения значительно шире, чем у Image Ready, да и работать в редакторе удобнее. Это относится, конечно, только к процессу подготовки к сжатию, а не к специальным функциям Image Ready для Web: создание карты изображения, GIF-анимации и самого процесса сжатия.

Итак, вы открыли изображение в Adobe Photoshop и выполнили необходимые операции по коррекции уровней, балансу цветов, насыщенности и кадрированию. Эти операции детально описаны во многих руководствах и на них останавливаться не будем. Чтобы не потерять оригинал, создадим копию изображения, и с ней будем дальше работать. Удобно для этих целей выделить отдельную папку, в которой будут храниться наши изображения для интернета и электронной почты.
Sony Alpha A77 II (M2), Fujifilm X-M1, Panasonic Lumix DMC-LF1, Panasonic Lumix DMC-LХ7, FUJIFILM FINEPIX XP60, PANASONIC HDC-SDT750, Canon LEGRIA NV40

Alikkoff
Александр
Александр 

  Оптимизатор фотографий JPEG для WEB

Сообщение Разместил Alikkoff 01 дек 2014, 13:46

Переходим к параметрам, влияющим на степень возможного сжатия изображения. Сначала определимся с размерами картинки, щелкнув правой кнопкой мыши по синей полосе над изображением и выбрав из выпадающего меню Image Size.

Разрешение (Resolution) задаем стандартное для Web - 72ppi, пропорции сохраняем (Constrain Proportions).Размер изображения в пикселях желательно задать минимально необходимый. Ориентироваться следует на самое распространенное разрешение экрана, которое в настоящее время составляет 1280х1024 (1280х800 для широкого экрана). Задавать больше этого значения нет смысла, если только вы не планируете использовать прокрутку, например, желая продемонстрировать удилище для спортивной рыбалки или воспроизвести картину "Маршал Буденный с конницей у гроба Ленина". Тут уж без прокрутки никак...

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

Основное правило при любом изменении размеров, кроме обрезки (Crop): старайтесь не менять общее количество пикселей в изображении без крайней необходимости, так как это ухудшает четкость картинки и создает дополнительные контурные искажения, повышающие, в конечном счете, обьем файла при сжатии. Это относится не только к оптимизации изображения для Web, но и к любым операциям в редакторе.

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

Падение контурной резкости при изменении числа пикселей в изображении вызывает очень неприятное явление: неоднозначность картинки на экране монитора. Пусть вы получили великолепное качество оптимизированного изображения и с чувством глубокого удовлетворения разместили его на сайте, но, если в браузере пользователя установлен масштаб показа страницы не 100%, то все ваши усилия были напрасны. Можете убедиться в этом немедленно: рассмотрите любой из скриншотов, помещенных на этой странице, при разных масштабах показа в браузере. Убедились?

Для разных браузеров падение резкости немного отличается в зависимости от способов интерполяции промежуточных значений пикселей, но все равно, это явление очень заметно. Кстати, оно проявляется даже в таком мощном редакторе, как Photoshop. Именно поэтому все операции с резкостью выполняются только при 100% масштабе.

Аналогичный эффект проявляется и в том случае, если вы на ЖК-мониторе установите разрешение, меньше максимального. Картинка на мониторе состоит из тех же пикселей, и попытка воспроизвести 1024х768 точек на экране с разрешением 1280х1024 приведет к ухудшению резкости. Если хотите, можете сразу проверить, изменив разрешение вашего монитора (правый щелчок на Рабочем столе - Свойства - Параметры - Разрешение экрана).

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

Установив размеры изображения, переходим к его подготовке для дальнейшего сжатия. Требования оптимизации для форматов JPEG, GIF и PNG отличаются, что связано с разными алгоритмами сжатия. Для получения минимального размера сжатого файла в JPEG и PNG-24 надо избегать резких контрастных переходов и мелких деталей, причем шумы на изображении - это тоже мелкие детали и, следовательно, шум может сильно увеличить размер конечного изображения. Для GIF и PNG-8 нежелательны плавные градиентные переходы и широкая палитра цветов.
Sony Alpha A77 II (M2), Fujifilm X-M1, Panasonic Lumix DMC-LF1, Panasonic Lumix DMC-LХ7, FUJIFILM FINEPIX XP60, PANASONIC HDC-SDT750, Canon LEGRIA NV40

Alikkoff
Александр
Александр 

  Оптимизатор фотографий JPEG для WEB

Сообщение Разместил Alikkoff 01 дек 2014, 13:47

Оптимизация изображений в формате JPEG и PNG-24
Для просмотра, как уже выяснили, устанавливаем масштаб 100% и обрабатываем фильтрами повышения резкости.

Для просмотра, как уже выяснили, устанавливаем масштаб 100% и обрабатываем фильтрами повышения резкости.

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

Затем применяем фильтр размытия Despeckle (Filter - Noise - Despeckle) и регулируем глубину его действия (Ctrl+Shift+F). Обычно достаточно уменьшить размытие примерно до 50%, добиваясь сохранения мелких деталей при минимальной контурной резкости, необходимой для просмотра на экране монитора. Помните, что при сильном шарпенинге (повышении резкости) возрастает объем сжатого файла, особенно для больших изображений.

Шумы убираем фильтром Reduce Noise (Filter - Noise - Reduce Noise) или любой специальной программой, например, Neat Image или Noise Ninja.

Далее переходим к сжатию изображения, выбрав File - Save for Web (Файл - Сохранить для Web) или Ctrl+Shift+Alt+S. Переходить в Image Ready для этого нет смысла, так как команда Save for Web является составной частью Image Ready с теми же функциями сжатия. Устанавливаем режим просмотра одновременно двух изображений, нажав 2-Up.

Слева у нас выводится оригинальное изображение, справа - оптимизированное сжатое.

Под сжатым изображением показаны основные его характеристики: алгоритм и параметры сжатия, размер и время загрузки в браузере при определенной скорости интернет - соединения. Для выбора интересующей вас скорости кликните правой кнопкой мыши по изображению.

Под сжатым изображением показаны основные его характеристики: алгоритм и параметры сжатия, размер и время загрузки в браузере при определенной скорости интернет - соединения. Для выбора интересующей вас скорости кликните правой кнопкой мыши по изображению.

В правом углу расположены основные регулировки сжатия. Щелкнув по стрелке в окне Quality (Качество), выводим шкалу и ползунком регулируем степень сжатия, контролируя качество по изображению в правом окне. Если результат сжатия, то есть "вес" полученного файла при должном качестве, нас не устраивает, что для пытливого веб-дизайнера характерно в 99% случаев, жмем Cancel. Вернувшись таким образом в редактор, повторяем манипуляции с Unsharp Mask, Despeckle и Reduce Noise с другими параметрами. Следует учесть, что последовательность применения этих трех фильтров то же сказывается на результате. Методом "шаг назад, два шага вперед" постепенно добиваемся максимального сжатия при удовлетворяющим нас качестве картинки. К сожалению, полученные установки фильтров для оптимизации изображения уникальны для каждого случая, но отличия не очень значительны, и после нескольких экспериментов вы будете представлять силу воздействия каждого фильтра на окончательный результат оптимизации изображения.

Для облегчения жизни удобно назначить для наших трех фильтров быстрые клавиши вызова. Напомню, для этого надо выбрать в Photoshop команду Edit - Keyboard Shortcuts. После этого вы всегда сможете повторно вызывать фильтр с предыдущими установками, нажав Ctrl+Alt+(клавиша фильтра).

Если вы хотите, чтобы изображение появлялось на экране монитора постепенно, установите флажок Progressive. Иногда это несколько увеличивает, а бывает, наоборот, уменьшает размер файла, но для больших изображений оправдано, так как повышает удобство просмотра. Параметр Blur лучше не использовать, так как он значительно грубее, чем Despeckle.

В палитре параметров сжатия есть специальная функция для очень ленивых - автоматическая оптимизация изображения. Для ее выбора установите флажок Optimized и нажмите кнопку с треугольником над ней. В выпадающем меню выберете Optimize to File Siz

В появившемся окне можно задать желаемый размер оптимизированного изображения и формат: либо определенный вами - Current Settings, либо предоставить его выбор программе - Auto Select GIF/JPEG. Жмем ОК и получаем результат, который может удовлетворить только очень непритязательного пользователя. Как почти любая автоматизация в Photoshop - эта функция практически неприменима, но для общего развития знать о ней надо.

Формат PNG-24 соединяет в себе черты JPEG и GIF: поддерживает 24-битный цвет, сохраняет прозрачность и очень хорошо передает полутона. Размер получаемых изображений обычно больше, чем в JPEG, но бывают исключения. Поэтому есть смысл при оптимизации изображения попробовать и PNG-24.
Sony Alpha A77 II (M2), Fujifilm X-M1, Panasonic Lumix DMC-LF1, Panasonic Lumix DMC-LХ7, FUJIFILM FINEPIX XP60, PANASONIC HDC-SDT750, Canon LEGRIA NV40

Alikkoff
Александр
Александр 

  Оптимизатор фотографий JPEG для WEB

Сообщение Разместил Alikkoff 01 дек 2014, 13:48

Оптимизация изображений в формате GIF и PNG-8
Для графических изображений с небольшим количеством цветов, большими однотонными участками и текстом, например, диаграммы, логотипы, скриншоты и простые рисунки, лучше применять сжатие в форматах GIF и PNG-8. При подготовке изображений для этих форматов надо стремиться к уменьшению количества цветов, отсутствию градиентов (плавных изменений насыщенности и цветового тона) и краевых окантовок. Формат PNG-8 обычно дает лучшие результаты, чем GIF. Для выбора формата используем выпадающее меню окна Preset

Оптимизация изображений в формате GIF и PNG-8
Для графических изображений с небольшим количеством цветов, большими однотонными участками и текстом, например, диаграммы, логотипы, скриншоты и простые рисунки, лучше применять сжатие в форматах GIF и PNG-8. При подготовке изображений для этих форматов надо стремиться к уменьшению количества цветов, отсутствию градиентов (плавных изменений насыщенности и цветового тона) и краевых окантовок. Формат PNG-8 обычно дает лучшие результаты, чем GIF. Для выбора формата используем выпадающее меню окна Preset.

Для регулировок доступны следующие параметры: алгоритм сжатия, размытие (Dither), прозрачность (Transparency) и количество воспроизводимых цветов (Colors). Последний параметр наиболее важен. Уменьшайте количество цветов до приемлемого уровня, а затем поэкспериментируйте с алгоритмом сжатия. Обычно наилучший результат при минимальном объеме дает выбор Selective.

Затем переходим к регулировке сглаживания. Эта функция позволяет имитировать недостающие цвета несколькими соседними пикселями. Обычно используется режим Diffusion, а для градиентов - Noise. Конкретное значение размытия устанавливаем в окне Dither с помощью выпадающей шкалы.

Также, как и в случае с оптимизацией изображения в формате JPEG, наилучшего результата можно добиться только вручную методом последовательных приближений, добиваясь наилучшего соотношения качество/размер файла. Здесь может быть удобен режим одновременного показа четырех изображений (кнопка 4-Up в левом верхнем углу): исходного и трех разных вариантов в GIF и PNG форматах.

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

Форматы GIF и PNG позволяют сохранять прозрачность. Это позволяет наложить изображение на фон страницы. Без применения прозрачности вы ограничены прямоугольной формой кадра изображения. Для создания прозрачных областей их надо выделить или создать маску в редакторе. Например, на логотипе "Фото", расположенном в правом верхнем углу этой страницы, прозрачная область окружает смайлик.

Создана такая прозрачная область следующим образом :

Сначала я нарисовал смайлик "Фото";
Инструментом Magic Wand Tool (Волшебная кисть) выделил область вокруг смайлика;
Сам смайлик выделил командой Select - Inverse (Выделение - Инверсия);
Для перемещения смайлика на отдельный слой применена команда Layer - New - Layer Via Copy (Слой - Новый - Слой через копирование);
Отключил фоновый слой Background щелчком в окне Layer по изображению глаза на строке. При этом фон заменяется на "шахматное поле" - прозрачную область;
Выбрал команду File - Save for Web (Файл - Сохранить для Web), формат PNG-8, установил флажок Transparency и оптимизировал изображение с необходимыми параметрами.
Sony Alpha A77 II (M2), Fujifilm X-M1, Panasonic Lumix DMC-LF1, Panasonic Lumix DMC-LХ7, FUJIFILM FINEPIX XP60, PANASONIC HDC-SDT750, Canon LEGRIA NV40

Alikkoff
Александр
Александр 

Вернуться в Все для фоторедактирования. Софт, материал, уроки



 • Блок вывода аналогичных по названию других тем нашего форума • 
Как видно из названия программы, она работает только с изображениями в формате JPEG