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

В данном уроке мы рассмотрим небольшую очаровательную библиотеку, которая позволяет не только автоматически изменять размер изображений при изменении параметров окна просмотра, но также обрезать картинки, принимая во внимание заданную точку фокуса. К тому же, все действия осуществляются на чистом CSS.

Встречайте Focal Point

Focal Point - проект на GitHub и библиотека CSS? созданная Адамом Бредлеем (Adam Bradley). В соответствии с концепцией адаптивности изображения должны изменять размер и положение для достижения оптимальных пропорций для текущего окна просмотра. Focal Point продвигает данную идею дальше и не только изменяет размер изображений, но и обрезает их.

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

Focal Point позволяет задать целевую область изображения, которая должна оставаться целой (точка фокуса). Таким образом, когда библиотека будет выполнять обрезку, само изображений будет сохранять отличный вид.

Как это работает?

Реализация Focal Point достаточно уникальный, но в то же время простой процесс. Сначала обсудим, как выбирать точку фокуса, а затем погрузимся в код реализации.

Когда вы вставляете изображение в веб страницу с помощью Focal Point, оно автоматически разделяется на невидимую сетку с 12×12 ячеек. Нет разницы, какого размера картинка, сетка адаптируется под него.

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

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

Код

Теперь мы можем указать точку фокуса и пришло время разобраться в коде реализации. Для начала загрузите проект с GitHub и привяжите CSS файл к вашему документу HTML.

После предварительных операций нужно добавить два элемента div и тег img . Да, разметка получается избыточной для одного изображения, и сей факт является минусом библиотеки. Вот типовая разметка:

Как вы можете заметить, внешний элемент div имеет класс “focal-point ”, а во внутреннем размещено наше изображение без каких либо классов.

Переводим единицы сетки в классы

Теперь надо указать Focal Point на место, где находится фокус изображения. Наша точка фокуса смещена на три единицы вправо и три единицы вверх. Поэтому указываем для внешнего элемента div классы “right-3 ″ и “up-3 ″.

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

Обратите внимание, что изображение справа не только меньше, но и обрезано вокруг важной части. Все выполняется с помощью CSS!

Структура страницы

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

Определим элемент div с классом “column ”:

Добавим заголовок и параграф для имитации содержания страницы:

Затем вставим изображение, как было показано в предыдущем примере (с двумя элементами div и классами для точки фокуса):

И для завершения примера скопируем код с использованием другого изображения и другой точки фокуса.

Для второго изображения точка фокуса находится в другом месте:

CSS

Определим стили для нашей страницы. Адаптация изображений и работа с точкой фокуса находятся вне зоны нашей деятельности. Все что нужно сделать - определить внешний вид элементов. Для примера страница делится на две колонки и задаются стили для текста.

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .column { float: left; overflow: auto; padding: 20px; width: 50%; } h1 { text-transform: uppercase; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; } p { margin-bottom: 20px; color: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; } @media all and (max-width: 767px) { p { font-size: 12px; } h1 { font-size: 35px; } } @media all and (max-width: 550px) { h1 { font-size: 23px; } }

Смотрим в действии

Теперь можно посмотреть как работает демонстрация. Если страницы выводится в большом окне просмотра (например, на экрана монитора настольного компьютера), то изображения будут выводиться в полном объеме:

Теперь, если уменьшить размер окна просмотра или смотреть демонстрационную страницу с мобильного устройства, то можно увидеть, как адаптируются изображения. По мере уменьшения окна изображения не только уменьшаются, но и обрезаются.

С точки зрения дизайна насколько эффективна такая техника!? Чем меньше изображение становится, тем сильнее выделяется точка фокуса. С помощью данной библиотеки можно быть уверенным, что даже на маленьких экранах пользователи будут важную информацию.

Совместимость с браузерами

Библиотека работает во всех новых браузерах. В IE8 изображения изменяют размер, но не обрезаются. Но на текущий момент 99.99% сайтов не имеют подобного механизма адаптации изображения с автоматической обрезкой, так что реакция IE8 не является критичной.

Что находится внутри?

Теперь рассмотрим, как работает библиотека.

Первая часть кода является базовым решением CSS для адаптивных изображений.

Focal-point { width: 100%; height: auto; overflow: hidden; } .focal-point img { width: 100%; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; } .focal-point div { position: relative; max-width: none; height: auto; }

Следующий код немного сложнее. Сначала медиа запрос реализуется в точке 767px. Затем, для обрезки изображения используются отрицательные значения полей для каждого из доступных классов. В тексте урока мы приводим только классы “up-3 ″ и “right-3 ″, которые использовались в демонстрации.

@media all and (max-width: 767px) { /* 4x3 Landscape Shape (Default) */ .focal-point div { margin: -3em -4em; } /* Landscape up (Total 6em) */ .up-3 div { margin-top: -1.5em; margin-bottom: -4.5em; } .right-3 div { margin-left: -6em; margin-right: -2em; } }

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

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

Рассмотрим вначале, зачем применяется разрезание изображений, и какие преимущества это в итоге дает, а затем, как использовать таблицу на практике.

Плюсы разрезания изображений

Создание ссылок

Отдельные рисунки при необходимости можно превращать в ссылки, причём для них можно назначать своё описание (атрибут title ) и альтернативный текст (атрибут alt ), который виден при отключении показа картинок в браузере или при наведении курсора мыши на изображение.

Эффект перекатывания

Набор отдельных фрагментов позволяет создавать эффект перекатывания — динамическое изменение одного рисунка на другой при наведении на него курсора мыши, и обратно на прежний, когда курсор уводится прочь.

Уменьшение объема файлов

Отдельными частями изображения удобней манипулировать, подбирая для них графический формат и его параметры таким образом, чтобы объём файла был минимален при сохранении приемлемого качества изображения. В итоге набор графических файлов будет занимать меньше места, и загружаться быстрее, чем один файл, содержащий целый рисунок.

Анимированный GIF

Использование анимированного GIF-a для изображений большого размера чревато существенным увеличением объёма файла. Но можно пойти на хитрость и заменить лишь часть изображения анимацией, а остальные фрагменты оставить статичными. При этом общий объём нескольких файлов будет гораздо меньше, чем анимирование одного изображения.

Особенности вёрстки

Изображения на веб-странице по своей природе прямоугольны, но, разрезав один рисунок на составляющие элементы, получим конструктор, из которого можно сложить другую фигуру. Это напоминает детские кубики, на одну из сторон которых наклеена картинка. Складывать подобные фигуры на веб-странице требуется в силу разных причин, например, вместо фрагмента изображения требуется добавить текст. Кроме того, некоторые рисунки можно заменить их фоновым аналогом и тогда конечное изображения, сохраняя свою целостность, будет занимать всю доступную область документа.

Психологический аспект

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

Подготовка изображения

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

Рис. 2.12. Исходное изображение

Теоретически, в данном случае можно обойтись и без разрезания, если использовать изображение-карту (теги

Рис. 2.13. Вид изображения при открытии раздела

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

Разрезание изображения

Разрезание и «сборку» рисунка лучше доверить специализированной программе, в частности, Adobe Photoshop, так что все упоминания об инструментах и меню относятся именно к этой программе.

Для удобства разрезания изображения вначале следует добавить направляющие линии, по которым затем и будет происходить разделение на фрагменты (рис. 2.14). Линию снизу добавим потом через стили, поэтому она не участвует в изображении.

Рис. 2.14. Добавляем в изображение направляющие

Теперь используем инструмент Slice (, активация клавишей K ) и по направляющим обводим требуемую прямоугольную область. Обозначенная область отмечается синей рамкой с номером фрагмента в левом верхнем углу. Размер областей можно изменять через специальный инструмент Slice Select — . Щелкаем мышью с этим инструментом по желаемому фрагменту — цвет рамки вокруг области становится желтым, а также изменяется тональность рисунка. После чего курсором мыши можно перемещать границы фрагмента за специальные маркеры по бокам и в углах области (рис. 2.15).

Рис. 2.15. Изменение области фрагмента

Для быстрого переключения между инструментами Slice и Slice Select нажмите и удерживайте клавишу Ctrl .

Во время изменения размеров фрагментов, следите за тем, чтобы области не пересекались друг с другом, и между ними не возникало промежутков. Хотя Photoshop сам отмечает подобные недочёты и принимает меры к их устранению, лучше держать всё под своим контролем.

После предварительного анализа и применения инструмента Slice, получим 13 фрагментов (рис. 2.16). Синим цветом показаны фрагменты созданные инструментом Slice, серым цветом показаны автоматически созданные фрагменты.

Рис. 2.16. Разрезанное на фрагменты изображение

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

Использование таблицы для склейки фрагментов

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

Рис. 2.17. Панель оптимизации изображений

С помощью инструмента Slice Select можно выбирать требуемый фрагмент и устанавливать для него персональные параметры вроде количества цветов, значение потерь качества, прозрачность и т.д. Допускается выделять сразу несколько фрагментов, удерживая клавишу Shift , что позволяет устанавливать для них одинаковые параметры.

По окончанию работы с фрагментами нажимаем кнопку «Save», указываем место на диске, куда будет сохранен HTML-документ, его имя, тип и настройки (рис. 2.18).

Рис. 2.18. Настройки при сохранении файла

Рисунки сохраняются автоматически в папку images, а их имя образуется от имени HTML-файла с добавлением номера фрагмента. Например, сохраняемое имя будет splash.html, тогда первый фрагмент называется splash_01.png, а последний — splash_13.png. Кроме того, создается файл spacer.gif, который представляет собой прозрачный рисунок размером 1х1 пиксел. Он используется для правильного формирования изображений в таблице.

Настройки, по которым строится HTML-код и формируются имена изображений можно изменить, если при сохранении файла в разделе Settings выбрать пункт Other... В окне параметров можно выбирать папку, куда сохранять рисунки, способ формирования имен файлов, а также HTML-кода (рис. 2.19).

Рис. 2.19. Панель для выбора выходных настроек

Полученный в результате сохранения файлов HTML-код, после небольшого редактирования представлен в примере 2.12.

Пример 2.12. Таблица для склейки изображений

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

Чтобы получить требуемый результат, введем слой с фоновым рисунком и нашу таблицу наложим поверх него. Такое изображение представлено на рис. 2.20.

Рис. 2.20. Фоновый рисунок, рамка вокруг приведена для наглядности

Теперь создаем нужный слой, назовем его toplayer , и в стилях указываем его параметры (пример 2.13).

Пример 2.13. Слой для формирования полос

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Остается убрать рисунки с незначительными фрагментами, сохранив их размеры у ячеек таблицы (пример 2.14).

Пример 2.14. Окончательный код

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

В данном примере изменён доктайп на строгий, что приводит к появлению небольшого отступа внизу изображений. Чтобы его убрать, в стиле к селектору IMG добавлен display : block .

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

Для управления положением рисунков родительскому классу menu зададим относительное позиционирование, а рисункам абсолютное. Тогда применение свойств left и top будет задавать координаты изображения относительно его родителя, т.е. слоя menu . Сам слой при этом можно легко перемещать и это никак не повлияет на его дочерние элементы (пример 2.15).

Пример 2.15. Вёрстка с помощью слоёв

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Здесь слой toplayer создаёт с помощью фонового изображения полосу заданной высоты на всю ширину окна. Слой menu задаёт родительский элемент, который выстраивается по центру поверх фоновой полосы. Положение изображений внутри слоя menu управляется свойствами top и left . За счёт активного применения стилей HTML-код сильно сокращается, рисунки независимы друг от друга, их можно легко сдвигать, менять на другие, добавлять новые. Это как раз тот случай, когда у таблицы при вёрстке нет ни единого шанса.

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

Эти методы могут быть очень полезными, если необходимо привести изображение к определенному размеру или создать предпросмотр, например, в ленте новостей и т.п.

Способ 1. Использование отрицательных полей

Изображение необходимо поместить в родительский элемент, в нашем случае - div. Родительский элемент должен быть обтекаемым элементом (или с заданной шириной). Метод не будет работать на блочных элементах или элементах во всю ширину.

Установим отрицательные поля для всех четырех сторон: top (сверху), right (справа), bottom (снизу) и left (слева). Отрицательные поля определяют, насколько изображение, находящееся в родительском элементе обрезано в каждом направлении. Затем установим свойство родительского элемента overflow (перекрывание) на hidden (скрыть), чтобы скрыть поля, которые находятся за областью вырезанного изображения.

<div class = "crop" >

Crop

float : left ;

overflow : hidden ;

Crop img

margin : -70px -50px -160px -175px ;

Способ 2. Использование абсолютного позиционирования

По этому методу задаем ширину и высоту родительского эдемента, свойство position (позиционирование) устанавливаем relative (относительным). Ширина и высота определяют размеры отображаемого поля. Для изображения внутри родительского элемента свойство позиционирования задаем absolute (абсолютным). Затем с помощью свойств top (сверху) и left (слева) задаем, какую часть изображения показывать.

<div class = "crop" >

Crop

float : left ;

overflow : hidden ;

position : relative ;

width : 270px ;

height : 260px ;

Crop img

position : absolute ;

top : -70px ;

left : -175px ;

Способ 3. Использование свойства сlip

Этот способ самый простой, так как свойство clip определяет часть элемента, которую надо показать. Но этот метод имеет два недостатка.

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

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

<div class = "crop" >

Crop

float : left ;

position : relative ;

В некоторых случаях содержимое блока отображается за пределами границ элемента, накладываясь на него. Для управления поведением блочных элементов используется свойство overflow , которое определяет, как должно отображаться содержимое, выходящее за пределы блока.

С помощью свойства clip можно обрезать элемент по заданным размерам.

1. Свойство overflow

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed; . Текст может переполнять блок по высоте, изображения — по высоте и ширине.

Значения:
visible	Значение по умолчанию. Весь контент становится видимым независимо от размеров блока-контейнера. Возможно перекрытия содержимого соседних блоков.
scroll	Добавляет полосы прокрутки внутри области отображения элемента, которые отображаются даже в случае, когда содержимое по размерам помещается внутри блока. Размеры контейнера не меняются.
auto	Добавляет полосы прокрутки только в случае необходимости.
hidden	Скрывает содержимое, выходящее за границы блока. Может скрыть часть содержимого. Используется для блоков-контейнеров, содержащих плавающие элементы. Также предотвращает отображение фона или границ под плавающими элементами (для которых задано свойство float: left / right; . При этом размеры контейнера не изменяются.

Рис. 1. Обрезка содержимого блока с помощью свойства overflow Синтаксис: div { width: 200px; height: 150px; overflow: hidden; }

2. Свойство overflow-x

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

Синтаксис:

Div { overflow-x: hidden; }

3. Свойство overflow-y

Свойство задает, как будет обрезаться нижний край контента внутри блока в случае его переполнения.

Синтаксис:

Div { overflow-y: hidden; }

4. Свойство clip

Свойство определяет, какая часть элемента будет видна. Часть элемента, которая останется видимой после обрезки, называется областью отсечения. Отсечение применяется к элементу, который изначально полностью видимый. Свойство применяется к элементам, для которых установлено свойство position со значениями absolute или fixed .

При подготовке изображений для WEB нередко появляется необходимость обрезать их, чтобы выделить нужные части изображения и отсечь ненадобные. Не считая чисто художественных суждений, такая обрезка либо, как ее еще именуют, кадрирование, нужна для уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и тем резвее оно загружается на WEB страничку.

Как удалить не нужные куски изображения

Поглядим, как производится кадрирование фактически, удалив неширокую черную полосу у нижнего края фото, которую не удалось в достаточной степени осветлить. Кадрирование производится особым инвентарем Crop Tool (С) (Инструмент «Рамка» (С)).

Нажмите кнопку Crop Tool (С) (Инструмент «Рамка» (С)) на панели инструментов (Tools), чтобы избрать этот инструмент.

Установите указатель мыши, который воспримет форму в левом верхнем углу изображения.

Нажмите и удерживайте левую кнопку мыши.

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

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

При помощи этих маркеров можно выполнить настройку и поворот границы кадра. Для перемещения кадрирующей рамки довольно установить указатель мыши внутри выделенной области и перетащить ее в необходимое место. Чтобы поменять размер выделенной области, следует переместить один из угловых маркеров. Если при перемещении задерживать нажатой кнопку Shift, то будут сохранены пропорции области. Для поворота кадра следует установить указатель мыши, который воспримет форму изогнутой стрелки, за пределами области выделения и, перемещая мышь, достигнуть подходящего положения рамки. Чтобы отменить кадрирование, довольно надавить кнопку Esc.

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

Два раза щелкните мышью внутри кадрирующей рамки либо нажмите кнопку Enter. Фото будет обрезана по установленной границе.

Как уменьшить размер изображения

Но даже после обрезки фото довольно велика для WEB странички. При разрешении экрана 800 x 600 пикселов (а с таким разрешением по статистике в текущее время работает большая часть пользователей Web) фото занимает существенное место на дисплее. Не считая того, файл с изображением такового размера будет довольно велик по объему и будет длительно загружаться. Поэтому уменьшим размер изображения, что, в свою очередь, уменьшит объем файла.

Изберите команду меню Image - Image Size (Изображение - Размер изображения). На дисплее появится диалог Image Size (Размер изображения).

В высшей части диалога, в группе частей управления Pixel Dimensions (Размерность в пикселах) указан текущий размер файла в формате PSD - 400.3К, также текущие ширина (Width) и высота (Height) изображения в пикселах. У вас эти значения после кадрирования могут быть несколько другими.

В группе частей управления Document Size (Размер документа) указаны размеры документа в сантиметрах и его графическое разрешение (Resolution). При установленном флаге Constrain Proportions (Сохранить пропорции) программа автоматом сохраняет пропорции изображения при изменении одного из размеров - ширины либо высоты.

При изменении размеров изображения в группе частей управления Pixel Dimensions (Размерность в пикселах) соответственно меняются его свойства для документа - или его размеры, или графическое разрешение, зависимо от того, установлен либо сброшен флаг Resample Image (Поменять размер). Если этот флаг установлен, то меняется размер документа и, соответственно, объем файла с изображением. Если же флаг сброшен, то можно поменять только размеры документа. При всем этом, соответственно, будет изменяться его графическое разрешение, а размеры изображения в пикселах и объем файла останутся без конфигурации.

При уменьшении размерности либо графического разрешения Adobe Photoshop удаляет из изображения сверхизбыточную информацию, а при увеличении этих характеристик - сформировывает недостающую информацию на базе цветовых величин имеющихся пикселов. В обоих случаях программа употребляет один из 5 способов интерполяции, который можно избрать в открывающемся перечне Resample Image (Поменять размер).

Так как фото, размеры которой мы желаем поменять, создана для показа на дисплее, то изменять ее графическое разрешение не следует.

Удостоверьтесь, что установлен флаг Resample Image (Поменять размер), чтобы сохранить графическое разрешение изображения и поменять его размер.

В поле ввода Width (Ширина) группы частей управления Pixel Dimensions (Размерность в пикселах) введите новое значение ширины изображения в пикселах - 300. Автоматом поменяется значение высоты изображения в поле ввода Height (Высота), также размер документа в группе частей управления Document Size (Размер документа). В высшей части диалога вы увидите также новое, уменьшенное значение объема файла и рядом с ним, в скобках прежний объем.

Закройте диалог Image Size (Размер изображения), нажав кнопку ОК. Установленные характеристики будут использованы, и размер изображения в окне документа уменьшится.

Как избежать утраты свойства изображения при изменении его размера

Как уже указывалось, уменьшение размерности изображения удаляет из него сверхизбыточную информацию, что приводит к некому понижению резкости. Применение фильтра Unsharp Mask (Контурная резкость) может в известной степени вернуть резкость изображения.

Изберите команду меню Filter - Sharpen - Unsharp Mask (Фильтр - Резкость - Контурная резкость). На дисплее появится диалог Unsharp Mask (Контурная резкость).

Перемещая ползунковый регулятор Amount (Эффект), восстановите резкость фото. Значение этого параметра должно быть в границах 50-60%.

Нажатием кнопки OK закройте диалог Urisharp Mask (Контурная резкость). Резкость изображения усилится.

Сохраните документ, выбрав команду меню File - Save (Файл - Сохранить).

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