При подготовке изображений для размещения в интернете или отправки по электронной почте требуется обеспечить необходимое в каждом конкретном случае качество при минимальном объеме файла. Для выполнения этого условия исходное изображение надо оптимизировать. Если вы хотите получить наилучший результат, то альтернативы Photoshop нет. Кроме того, лучшая программа создания сайтов Adobe Dreamweaver CS3 полностью интегрирована с Photoshop, так как, напомню, что компания Adobe приобрела в 2005 году фирму Macromedia, создателя Dreamweaver.
Работа по оптимизации изображений делится на два этапа: подготовка изображения в редакторе и процесс сжатия. Описания оптимизации обычно начинаются сразу с применения команды Save for Web (Сохранить для Web) или переходом в Image Ready, а предварительной подготовке не уделяется должного внимания.
По умолчанию считается, что картинка уже отредактирована, то есть подготовлена к печати. А между тем, оптимизация для Web отличается от подготовки к печати весьма существенно. Кроме того, возможности редактора по изменению параметров изображения значительно шире, чем у Image Ready, да и работать в редакторе удобнее. Это относится, конечно, только к процессу подготовки к сжатию, а не к специальным функциям Image Ready для Web: создание карты изображения, GIF-анимации и самого процесса сжатия.
Как сохранить для web в фотошопе — Уроки фотошопа для начинающих
Итак, вы открыли изображение в Adobe Photoshop и выполнили необходимые операции по коррекции уровней, балансу цветов, насыщенности и кадрированию. Эти операции детально описаны во многих руководствах и на них останавливаться не будем. Чтобы не потерять оригинал, создадим копию изображения, и с ней будем дальше работать. Удобно для этих целей выделить отдельную папку, в которой будут храниться наши изображения для интернета и электронной почты.
Переходим к параметрам, влияющим на степень возможного сжатия изображения. Сначала определимся с размерами картинки, щелкнув правой кнопкой мыши по синей полосе над изображением и выбрав из выпадающего меню 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 нежелательны плавные градиентные переходы и широкая палитра цветов.
Оптимизация изображений в формате JPEG и PNG-24
Для просмотра, как уже выяснили, устанавливаем масштаб 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 Size.
В появившемся окне можно задать желаемый размер оптимизированного изображения и формат: либо определенный вами — Current Settings, либо предоставить его выбор программе — Auto Select GIF/JPEG. Жмем ОК и получаем результат, который может удовлетворить только очень непритязательного пользователя. Как почти любая автоматизация в Photoshop — эта функция практически неприменима, но для общего развития знать о ней надо.
Формат PNG-24 соединяет в себе черты JPEG и GIF: поддерживает 24-битный цвет, сохраняет прозрачность и очень хорошо передает полутона. Размер получаемых изображений обычно больше, чем в JPEG, но бывают исключения. Поэтому есть смысл при оптимизации изображения попробовать и PNG-24.
Оптимизация изображений в формате 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 позволяют сохранять прозрачность. Это позволяет наложить изображение на фон страницы. Без применения прозрачности вы ограничены прямоугольной формой кадра изображения. Для создания прозрачных областей их надо выделить или создать маску в редакторе. Например, на логотипе «Фото», расположенном в правом верхнем углу этой страницы, прозрачная область окружает смайлик.
Создана такая прозрачная область следующим образом (рис.1):
- Сначала я нарисовал смайлик «Фото»;
- Инструментом Magic Wand Tool (Волшебная кисть) выделил область вокруг смайлика;
- Сам смайлик выделил командой Select — Inverse (Выделение — Инверсия);
- Для перемещения смайлика на отдельный слой применена команда Layer — New — Layer Via Copy (Слой — Новый — Слой через копирование);
- Отключил фоновый слой Background щелчком в окне Layer по изображению глаза на строке. При этом фон заменяется на «шахматное поле» — прозрачную область;
- Выбрал команду File — Save for Web (Файл — Сохранить для Web), формат PNG-8, установил флажок Transparency и оптимизировал изображение с параметрами, указанными на рисунке.
Рис.1. Последовательность создания изображения с прозрачностью
Конечно, аналогичный результат можно получить и без ухищрений с прозрачностью: достаточно назначить цвет фона у смайлика такой же, как и на странице сайта. Для простых изображений это вполне подходит, но если фон имеет текстуру, или картинку предполагается разместить в разных местах, то без поддержки прозрачности могут возникнуть сложности.
Оптимизируемые для Web изображения не всегда подходят для сжатия в каком-либо одном формате. Например, натюрморт или портрет обычно имеют равномерный размытый фон, идеальный для сильного сжатия, и сам объект съемки, для отображения которого подходят только JPEG высокого качества и PNG-24.
Много таких смешанных изображений в рекламе (буклеты, календари, каталоги продукции), где фотографии соседствуют с графикой и текстом. Для таких случаев оптимально разделить изображение на фрагменты — слайсы и каждый оптимизировать по своему алгоритму сжатия. Этот способ рассмотрим подробнее в дальнейших статьях по подготовке изображений для Web. Влияние исходного формата на возможности сжатия изображения показано в статье о снятии скриншотов. Так, например, если изображение уже было сжато в JPEG, то оптимизация его возможна только в JPEG, так как GIF и PNG-8 дадут большой объем сжатого файла.
Также для оптимизации смешанных изображений можно применить и метод взвешенной оптимизации: то есть различной для разных областей изображения. Этот метод позволяет уменьшить количество цветов и точно контролировать степень сжатия, что позволяет уменьшить размер файла при сохранении высокого качества.
В случае, если все перечисленные методы оптимизации вас не устраивают, то всегда остается возможность дать ссылку на загрузку качественного изображения большого объема. При этом проявляйте уважение к пользователю — не забывайте указать размер закачиваемого файла картинки.
Источник: www.seomark.ru
Работа с изображениями в Photoshop — как правильно сохранить для Web
Одна из полезных возможностей графического редактора «Фотошоп» – оптимизация изображений для веб-страниц. Функционал позволяет сжать снимок для дальнейшего использования в среде Интернет. Такой подход предполагает заметное уменьшение времени загрузки изображения при сохранении его качественной составляющей.
В статье пошаговый план как правильно сохранить изображения для Web в Photoshop.
Инструкция по работе
Функционал находится в меню «Файл»: раздел «Экспортировать», подпункт «Сохранить для Web…». При клике по строчке открывается диалоговое окно, где можно гибко настроить параметры сохранения.
По умолчанию активирован режим «Оптимизации», но для большего удобства практичнее переключиться на вкладку «2 варианта». В этом случае отображаются все корректировки внесённые пользователем, а визуализация идёт в формате до и после. Здесь же можно подогнать масштаб отображения при необходимости.
Формат файла
Наиболее популярные форматы для сохранения фотографий и других графических файлов – JPEG и PNG. Также программа предлагает расширение GIF, но оно используется для анимационных элементов. Статичные веб-изображения целесообразнее сохранять именно в JPEG или PNG.
Кликаем по строчке с выбором форматов и в выпадающем списке определяемся с расширением.
Для справки! Формат JPEG идеально подходит для снимков с плотной цветовой гаммой, а также для фотографий, где используется градиент. В то время как расширение PNG чаще всего используется для отображения схем, логотипов и других изображений, где требуется прозрачность.
Качество
После выбора расширения следует определиться с качеством картинки. Соответствующий раздел находится немногим ниже списка форматов.
Из представленного списка необходимо выбрать один из заданных параметров качества, начиная с низкого и заканчивая наилучшим. Также есть возможность подкорректировать значение в процентном выражении в блоке справа.
Конечно, максимальное качество выглядит заманчиво, но здесь нужно учесть, что один из ключевых моментов оптимизации веб-ресурсов включает в себя уменьшение размера файла. Показатель «Наилучшее» даёт на выходе не только высокодетализированную картинку, но и увеличенный объём изображения. Поэтому необходимо найти золотую середину.
По умолчанию значение выставлено на «Высокое» (60%), что является оптимальным вариантом для большинства фотографий. Также следует обратить внимание на строчку «Оптимизация». Данный параметр позволяет ещё больше уменьшить размер файла. Ставить маркеры на «Прогрессивный» и «Встроенный профиль» необязательно, потому как популярные браузеры, вроде Chrome или Firefox не поддерживают вариативность цветовых моделей.
Цветовое пространство
Функция «Преобразовать в sRGB» должна быть активна. Дело в том, что все браузеры работают с цветовой моделью RGB. Если изображение ранее было переведено в режим CMYK, то после сохранения гамма на сайте будет отображаться некорректно.
Строчку «Просмотр» оставляем без изменений: «Цвет монитора». Блок ниже определяет вывод метаданных для изображения. Большинство систем управления содержимым (CMS) позволяют пользователю ввести всю необходимую информацию о картинке, поэтому здесь можно выставить параметр «Не показывать» из выпадающего списка.
Размер изображения
Блок предназначен для настройки линейных параметров снимка. Значения корректируются как в процентном соотношении, так и конкретно в пикселях. При необходимости можно отрегулировать соотношение высоты и ширины, кликнув по значку цепи.
Целесообразнее менять размер изображения перед сохранением файла для Web, иначе могут возникнуть конфликты версий. Перед открытием диалогового окна достаточно нажать комбинацию клавиш Ctrl + Alt + I и определиться с параметрами.
Значение «Качество» в блоке «Размер изображения» оставляем без изменений – бикубический. Это универсальный метод интерполяции, позволяющий получить достойную детализацию при максимальном сжатии данных.
Сравнение исходных и оптимизированных размеров файла
По завершению настроек следует оценить качество оптимизации изображения. Ключевой момент – размер файла на выходе. В примере объём последнего – 5,93 Мб. Это очень много для веб-страницы, учитывая, что в распоряжении доброй половины пользователей мобильный 3G-интернет.
Тогда как оптимизированная для веб-страниц версия файла занимает всего лишь 152,6 Кб. Такая фотография откроется за доли секунды, а томительное ожидание не будет вынуждать пользователя покидать ресурс.
Сохранение изображения
Далее нажимаем на кнопку «Сохранить», расположенную в нижней части интерфейса. Программа откроет диалоговое окно, где необходимо определиться с именем файла.
При обработке обычного изображения без встроенных HTML тегов или других пресетов строчки «Формат» и «Настройки» оставляем без изменений. Жмём «Сохранить» и дожидаемся окончания процедуры.
Подобный подход позволяет заметно ускорить загрузку веб-ресурса. Этот момент особенно важен, когда сайт верстается под мобильные устройства. Скорость интернета на последних постоянно колеблется и не всегда в лучшую сторону. Оптимизация для Web решает эту проблему.
Дополнительная видео-информация:
Источник: junior3d.ru
Save for Web для Windows
Save for Web — аналог функции в Photoshop, представляющий собой плагин для бесплатного графического редактора GIMP, с помощью которого можно с легкостью задавать формат изображения при экспорте, меняя его размер, качество и количество цветов (для GIF и PNG). Присутствует возможность удаления Exif-информации и картинок предпросмотра из графических файлов. Примечание. Для инсталляции Save for Web необходимо распаковать скачанный архив и скопировать exe-файл в директорию :Documents and SettingsUser_name.gimp-2.6plug-ins.
ТОП-сегодня раздела «другое»
RiDoc — программа позволяет при помощи сканера получать электронные версии документов и.
Программа Калейдофон превращает ваш компьютер в цветомузыкальную установку.
Colorpix — небольшая портативная (не требует инсталляции) утилита, которая позволяет быстро.
Screen Color Picker — небольшая утилита для получения цветового кода выбранной вами пиксели на экране.
Image Tools — небольшая бесплатная программа для пакетной обработки изображений. Присутствуют.
Скан Корректор А4 (Quick Scan Corrector) — программа для удобного, простого и быстрого сканирования.
Отзывы о программе Save for Web
Отзывов о программе Save for Web 0.28.6 пока нет, можете добавить.
Источник: www.softportal.com