Оптимизация изображений
Оптимизация изображений для веб-страниц — это процесс сжатия изображения и настройки параметров его отображения для оптимального использования в среде Интернет. При размещении файла в Интернете важное значение имеет размер файла: размер файла следует задать так, чтобы время на его загрузку было минимальным, а качество изображения — максимальным. Для размещения изображений в Интернете используются три основных формата: GIF, JPEG и PNG.
При размещении изображения в сети следует учитывать размер файла. Размер файла следует задать так, чтобы время на его загрузку было минимальным, а качество изображения — максимальным.
В настоящее время в технологии веб-дизайна используется три основных формата пиксельной графики — GIF, JPEG и PNG. Оптимизированные изображения в этих форматах можно создать следующими способами:
- Чтобы достичь точной оптимизации изображения для применения в приложениях веб-разработки (например, Adobe® Dreamweaver®), можно выбрать команду «Сохранить для Web». Диалоговое окно «Сохранить для Web» позволяет осуществлять предварительный просмотр изображения в различных форматах и с разными настройками оптимизации. В нем можно также задать параметры прозрачности и анимации.
- Чтобы получить оптимизированные изображения в основных форматах можно воспользоваться командой «Сохранить как». В зависимости от формата файла можно указать качество изображения, прозрачность фона или подложку (заполнение фоновых областей каким-либо цветом), вариант отображения цветов и метод загрузки.
Работа с диалоговым окном «Сохранить для Web»
Воспользуйтесь диалоговым окном «Сохранить для Web» для предварительного просмотра результатов применения различных параметров оптимизации фотографии, предназначенной для публикации в сети. Это простой процесс. Откройте фотографию и выберите «Файл» > «Сохранить для Web». Затем выберите формат из раскрывающегося списка форматов (GIF, JPEG, PNG-8 или PNG-24) и задайте дополнительные параметры по своему усмотрению. (Список форматов располагается непосредственно внизу списка «Установки».) Эта операция сохраняет копию файла, не внося изменения в оригинальное изображение.
A. Палитра инструментов B. Пипетка выбора цвета C. Оптимизация настроек и всплывающее меню с дополнительными параметрами D. Размер изображения E. Параметры анимации F. Список вариантов масштабов G. Меню предварительного просмотра в браузере H. Исходное изображение I. Оптимизированное изображение
Параметры оптимизации появляются в правой части диалогового окна «Сохранить для Web». В поле «Потери сжатия» можно установить уровень потерь, допустимых при сжатии. В раскрывающемся списке «Количество цветов» можно выбрать количество цветов, которые используются при сохранении изображения. В поле «Подложка» представлены команды, обеспечивающие заполнение фоновых областей каким-либо цветом (В этом случае исходное изображение должно иметь прозрачные области). Вкладка «Размер изображения» также позволяет управлять размером изображения. Можно использовать готовые установки (выбрав соответствующий вариант из списка «Установки») или задать параметры выбранного формата для тонкой настройки алгоритма оптимизации.
Оригинальное изображение в окне (слева) и оптимизированное изображение в окне предварительного просмотра (справа). В нижней части каждого окна просмотра отображается соответствующая информация об изображении, например формат файла, объем файла, время передачи такого файла при соответствующей скорости. По мере изменения настроек меняется и эта информация.
В левом верхнем углу диалогового окна расположена небольшая палитра инструментов. Инструмент «Рука» предназначен для просмотра различных областей изображения путем перетаскивания фрагментов изображения в поле просмотра. Инструмент «Масштаб» используется для изменения масштаба: для увеличения масштаба щелкните инструментом на изображении, для уменьшения масштаба щелкните инструментом, удерживая нажатой клавишу Alt. (Для изменения масштаба также можно воспользоваться списком масштабов внизу диалогового окна.) Инструмент «Пипетка» используется для выбора цвета подложки.
Оптимизированные форматы файлов для веб-страниц
Для размещения изображения в Интернете можно использовать 4 формата файлов. При выборе формата изображения руководствуйтесь следующими рекомендациями:
Формат JPEG может быть лучшим вариантом для сохранения изображений, предназначенных для публикации в сети.
Как и формат JPEG этот формат вполне подходит для сохранения фотографий. Если изображение содержит прозрачные области, предпочтительнее выбрать формат PNG-24 вместо JPEG. (JPEG не поддерживает прозрачность; в данном случае вам следует заполнить области цветом подложки.) Файлы в формате PNG-24 файлы зачастую имею больший размер, чем JPEG-варианты того же файла.
Как правило, формат GIF применяется для работы со шрифтовыми фрагментами, кнопками, логотипами и прочими изображениями, имеющими ограниченное количество цветов и резкие ясные контрасты. При экспорте анимированного изображения также используется формат GIF.
Формат PNG-8 фактически дублирует функции формата GIF, просто он менее известен. Используйте его для тех же целей. что и формат GIF (кроме анимации).
Формат GIF и PNG-8 позволяют сохранять изображения с использованием палитры индексированных цветов (не более 256 оттенков цвета). Чтобы преобразовать изображения в формат индексированных цветов, Photoshop Elements создает специальную таблицу индексированных цветов. Если цвет в оригинальном изображении не присутствует в таблице, приложение выбирает ближайший цвет в таблице или имитирует этот цвет, комбинируя имеющиеся цвета.
Файлы в формате JPEG и PNG-24 поддерживают 24-битную глубину цвета, таким образом, они могут поддерживать до 16 миллионов цветов. В зависимости от формата файла можно указать качество изображения, прозрачность фона или подложку (заполнение фоновых областей каким-либо цветом), а также метод отображения браузером цветов при загрузке.
Внешний вид изображения в сети также зависит от цветов. отображаемых платформой компьютера, операционной системой, монитором и веб-браузером. Для оценки внешнего вида изображения в различных веб-браузерах и на различных платформах воспользуйтесь соответствующими окнами предварительного просмотра.
Применение предустановленных вариантов настройки оптимизации
Быстро и легко оптимизировать изображения для сети можно с помощью предустановленных вариантов настройки оптимизации из списка «Установки» в верхнем правом углу диалогового окна «Сохранить для Web». Предустановленные варианты настройки оптимизации позволяют сохранять различные типы изображений с различным качеством.
Имя каждой установки отражает формат файла и качество сжатия. Например, можно выбрать «JPEG High» для сохранения оптимизированного изображения в формате JPEG с высоким качеством изображения и низкой степенью сжатия. Выберите «GIF 32 Dithered» для оптимизации изображения в формат GIF, уменьшите количество используемых цветов до 32 и примените смешение.
В диалоговом окне «Сохранить для Web» выберите имя установки из списка «Установки», затем нажмите «ОК».
В диалоговом окне «Сохранить оптимизированное изображение» введите имя файла и нажмите «Сохранить».
Примечание.
При изменении параметров в списке установок в меню «Набор» отобразится слово «[Без имени]». Пользовательскую установку сохранить нельзя, однако текущая установка появится в следующий раз при вызове диалогового окна «Сохранить для Web».
Справки по другим продуктам
- Просмотр оптимизированного изображения в веб-браузере
- Просмотр вариантов отображения цветов
- Просмотр расчетного времени загрузки
Правильно делаем трансформацию в фотошопе или как не убить качество картинки
Трансформация фотографий обязательная процедура работы дизайнера и ретушера, но в погоне за качеством финального результата мы часто забываем о мелочах, в которых кроется дьявол. Так и портим кашу с маслом и без, еще в начале работы, игнорируя детали.
Эта статья, расскажет как соблюдая некоторые постулаты, я добиваюсь лучшего качества картинки, не совершая много лишней работы над этим.
Подопытная картина от Thomas Le Corre, посмотреть проект на Behance
Принцип просчета трансформации
Разберемся как работает просчет трансформации:
Уменьшая изображение, программа берет ближайшие пиксели и сливая их выдает усредненный цвет, для новосозданного, а при увеличении, информация наоборот берется из соседних пикселей, для создания новых. Грубый перерасчет в лучшем случае сохранит качество картинки, если масштабирование было незначительным (например, ±10%)
Разница между оригиналом и масштабированием иллюстрации с последующим восстановлением размера.
При любой трансформации, изначальное качество иллюстрации теряется. Неважно — масштабировали, искажали или поворачивали картинку. Действует принцип «Больше манипуляций — хуже результат».
Чего стоит избегать
В масштабировании
Избегаем «некорректные» значения размеров. Размеры «читаем» по процентам. Корректными размерами считаются все те, что кратны 5 или на худой конец 2.
Топ возглавляют: 25, 50 и 75%;
За ними идут: 10 и 90%, 20 и 80%, 40 и 60%.
Затем все кратное 5, но не озвученное ранее, а закрывают список удачных — кратные 2.
Масштаб просчитается корректнее, если картинка будет уменьшена не до 73,91%, а до нормальных целых 75%. Если размер нужен именнно с цифрой выше, а не округленной нами до 75%, снисхожу до округления целых 73%.
Нужно помнить, что нет понятия «половины пикселя». Есть пиксель — это наименьшая единица. Все что меньше, это тоже пиксель, но уже с прозрачностью, плотность которой считается исходя из размера «недопикселя».
В повороте
Избегаю нескольких ротаций, когда можно обойтись одной: Вместо двух по 15°, делаю один раз на 30°.
Исключением служат повороты, кратные 90°. Пиксель не претерпевает перерасчета, так как остается прежним, изменяя свое местонахождение.
Убийственными являются повороты, кратные 45°. Они дробят пиксели сильнее всего и мы получаем фигню.
Плохое качество видно невооруженым глазом. Иллюстрация повернута 8 раз на 45° (сделала оборот 360°)
Сложные манипуляции
Программа не позволяет корректно рендерить при сложном трансформировании и потому, нужно проводить операции поэтапно.
Результат, при одновременном масштабировании и повороте будет хуже, чем если бы сначала объект претерпел поворот, а затем масштабирование. При этом разница в качестве заметна даже неопытному пользователю.
Обратите внимание на «волны» и «лесенки» у края монитора, черной кнопки, края изображения и линии изгиба ноутбука, которые появились от непоследовательной трансформации (Уменьшение масштаба до 68% и поворот на 27°)
Правильно масштабируем
Трансформация в live режиме значительно хуже финальной, когда в диалоговом окне программа позволяет изменить размер при сохранении результата на компьютере.
Для простого, единичного масштабирования достаточно кнопки Save as. или Save for web с выпадающим диалоговым окном, в котором можно указать формат файла и его необходимые размеры.
Именно в диалоговом окне сохранения рекомендуется выставлять финальные размеры для сохранения макета. Размеры можно выставлять и в процентах.
А далее вставляем нашу картинку в макет и располагаем в нужном месте.
Это занимает лишние 15 секунд, а результат радует максимально допустимым качеством.
Наилучшая последовательность всех видов трансформаций
Напоследок, опишу наиболее удачную последовательность действий, которая сохраняет качество в лучшем состоянии.
При уменьшении
В первую очередь всегда делается искажение, следом за этим делаем поворот. И лишь после этого уменьшаем объект.
Это обусловлено сглаживанием, которое происходит за счет слияния пикселей при уменьшении. Само уменьшение лучше делать через описанное ранее всплывающее окно сохранения.
При увеличении
Приоритет нужно отдать масштабированию, после которого действовать можно уже по желанию — как будет удобнее.
При открытии файла портится качество картинки
При открытии файла в фотошопе в формате jpeg портится качество картинки(появляются зазубрины) При сохранение качество остаётся плохим. В гимпе при открытии и сохранении картинка остаётся идентичной.
Дата сообщения: 23.12.2012 18:25 [#] [@]
Дата сообщения: 23.12.2012 19:12 [#] [@]
верхнее изображение- исходное изображение
нижнее- после загрузке в фотошоп
Прикрепленное изображение (вес файла 36.3 Кб)
Прикрепленное изображение (вес файла 19.4 Кб)
Дата сообщения: 23.12.2012 20:54 [#] [@]
открыл в фотошопе, изображения идентичны.
Дата сообщения: 23.12.2012 20:59 [#] [@]
Дата сообщения: 23.12.2012 21:07 [#] [@]
Может в сторонней программе включена интерполяция пикселей при просмотре?
Дата сообщения: 23.12.2012 21:08 [#] [@]
Ну не сохраняй в Jpeg. Или сохраняй без компрессии. Или сохраняй в Tif без компрессии. Jpeg-компрессия приводит к «ухудшению» изображения — изменяются цвета и применяются различные «усреднения» по кластерам 8х8 пикселей.
Дата сообщения: 23.12.2012 21:14 [#] [@]
Когда сохраняю в png такой же эффект т.е искажения идентичны. Изображение портится не после сохранение а после загрузки в фотошоп. Это происходит почему-то только с картой нормалей. Диффузная не меняется при загрузке .
Когда открыла карту нормалей в гимпе, ничего не изменилось как и после сохранения т.е. качество не ухудшилось.
Дата сообщения: 23.12.2012 22:08 [#] [@]
А что другие форматы: Tiff, Targa?
А в PNG и JPEG одинаковые искажения?
Дата сообщения: 23.12.2012 22:25 [#] [@]
может поможет, недавно выяснял причины снижения качества:
Вопрос: Как перебросить рисунок из Painter в Photoshop без потери слоев?
Ответ: Без потери не получится. Дело в том, что единственный формат, который ПОЛНОСТЬЮ поддерживает слои и их свойства Painter’a, это формат riff.
Однако, Painter позволяет сохранять файлы в формате .psd. При таком сохранении программа Painter сохраняет ВСЕ слои, но она не сохраняет СВОЙСТВА некоторых динамических слоев, таких как Text (Текстовый), Liquid Metal (Жидкий металлический), Water Color (Акварельный) и Shape (Формы), преобразуя их в растровый формат.
Если в Painter’е используется слой или слои с изображением, которые выходят за границы рабочей области, то при сохранении и открытии файла в Photoshop они автоматически отсекаются.
Также, при экспорте файлов в Photoshop, большинство режимов Blending (Смешивания) использующиеся в слоях Painter’а, за исключением режимов Color Dodge (Комбинирование цвета), Color Burn (Выжигание цвета) и Exclusion (Исключение), преобразуются в альтернативные.
Например, Photoshop преобразует режим Magic Combine (Волшебное сочетание) в режим Lighten (Осветление), Gel (Гелеобразный) в режим Darken (Затемнение), Colorize (Раскрашивающий) в режим Color (Цветность) и Shadow Map (Карта тени) в режим Multiply (Умножение).
Когда Photoshop сталкивается с собственными режимами Painter’а, такими, например, как Pseudocolor (Псевдоцвет) или Reverse-out (Обратный снаружи), то он не может сохранить их свойства и просто преобразует эти слои в Normal (Стандартный).
Дата сообщения: 24.12.2012 01:42 [#] [@]
У меня открылась и сохранилась (обратно в JPEG) без изменений.
В других редакторах открывается нормально?
Почему вы используете формат JPEG?
Формат JPEG был вокруг нас долгое время с появлением цифровой фотографии и даже во время совершенствования программы Photoshop, но в последнее время его недостатки становятся все больше и больше заметными. Один из них – невозможность сохранить файл JPEG в формате 16 бит, поскольку он попросту его не поддерживает. Если это JPEG изображение (с расширением «.jpeg»), это 8 битное изображение.
Так почему же лучше работать с 16 битными изображениями? Одно слово – гибкость. Когда вы редактируете изображение в Photoshop, рано или поздно, если вы будете продолжать его редактирование, вы столкнетесь с проблемами. Самая распространенная проблема известна как «ступенчатость», когда вы теряете очень много деталей в изображении, после чего Photoshop не может отображать плавные переходы от одного цвета к другому. Вместо этого вы получаете ужасный ступенчатый эффект между цветами и их тональными значениями.
Прикрепленное изображение (вес файла 283.2 Кб)
Дата сообщения: 24.12.2012 04:11 [#] [@]
В других редакторах-нормально(гимп, пеинт). Сохранила карту в jpg при проекции нормал мэп в xnormal. Надо было конечно в png сохранять. Видимо проблема либо с моим фотошопом либо с его настройками раз у Вас всё нормально открывается и сохраняется.
Дата сообщения: 24.12.2012 13:23 [#] [@]
Я открывала в гимпе на другом компе. Открыла на своём-та же ерунда.. Видимо что-то с моим компьютером.
Дата сообщения: 24.12.2012 21:28 [#] [@]
Количество просмотров у этой темы: 30833.
Случайные работы 3D
Случайные работы 2D
2015 © ART-Talk.ru — форум про компьютерную графику, CG арт, сообщество цифровых художников (18+)
Внимание! Все права на материалы принадлежат их авторам. Сайт разделен на 2 части — новый форум и галерея, который развивается самостоятельно и архив старого форума ARTTalk.ru, все архивные темы и разделы взяты оттуда до выключения в январе 2015 года.
На сайте имеются материалы эротического характера. Просматривая сайт, Вы соглашаетесь с условиями использования.
как уменьшить изображение не теряя качество.
есть изображение 1680*1050,как уменьшить на 600*400 чтобы качество осталось тоже самое,а то получаеться все размытое и не четкое.
На сайте c 12.10.2009
Сообщений: 164
Одесса
Никак.
Вы же уменьшаете разрешение, следовательно и картинка хуже.
Можно уменьшить размер файла без потери качества.
На сайте c 19.07.2010
Сообщений: 44
подскажите,а как мне сделать маленький размер с хорошим качеством.просто у меня есть изображения в форматах 1680*1050 порендеренных в максе,теперь мне надо сделать презентацию в виде журнала,сам журнал размерами 22*21см.на страницах по 3-4 картинки,соответственно я их уменьшаю чтобы поместились все,НО ПРИ УМЕНЬЕНИИ ОНИ ВСЕ СМАЗАННЫЕ,КАК МНЕ БЫТЬ.
На сайте c 24.02.2010
Сообщений: 1214
Петрозаводск
презентацию в фотошопе собираешь?если да то вставляешь свою большую картинку->меню редактирование->трансформирование->масштабирование — и уменьшаешь за уголки.
На сайте c 20.03.2008
Сообщений: 5067
St.Petersburg
Очень просто! Открываем фотошоп -> Изображение -> размер изображения -> убираем галку с «Интерполяци», ставим нужный размер (обращаем внимание как при уменьшении размеров изображения — увеличивается его разрешение) Все. Оно будет таким же качественным, но размером меньше и с большим разрешением. Потом увеличивать так же