Фотолаборатория

Уменьшение потерь при изменении размеров изображений

• Оптимизатор фотографий JPEG для WEB
• Сжатие изображений с помощью скриншотов
• Оптимизация изображений для Web. Программа RIOT
• Сжатие фотографий для интернета и электронной почты в программе FastStone Image Viewer
• Сжатие фотографий программой Zoner Photo Studio Free
• Оптимизация изображений для Web
• Уменьшение потерь при изменении размеров изображений
• Фрагментарная оптимизация изображений для Web
• Простые эффекты вывода изображений

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

Обычный способ: не мудрствуя лукаво, в Photoshop открываем окно Image Size (Размер изображения) и устанавливаем необходимый размер в пикселях, иногда еще меняем разрешение, если это требуется, например, для печати. Для размещения в интернете дополнительно командой Save for Web (Сохранение для Web) сжимаем изображение до минимального объема подходящим алгоритмом - JPEG, GIF или PNG. Результат таких действий может быть отличным, а может и никуда не годным. Как говорили в школе: "Садись, два!"

Основные потери качества изображения возникают не только при сжатии, а уже при установке размеров, если при этом меняется общее число пикселей в картинке. Обычно, этого избежать не удается. Например, если какая-то деталь в изображении имела размер 10 пикселей при разрешении 300 ppi (типовое для вывода на печать), то при установке разрешения 72 ppi (типовое для Web) без изменения геометрических размеров изображения, на ту же деталь будет приходиться в 300:72=4,17 раз меньше, то есть 2,4 пикселя. Естественно, эти "полтора землекопа" сильно подпортят нашу детальку, потерявшую в весе, то есть в пикселях. Состояние до похудания (разрешение 300ppi) и после (разрешение 72ppi) иллюстрирует рис.1 (изображение увеличено):

Рис.1. Влияние разрешения на качество изображения

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

Диалоговое окно Image Size (Размер изображения) позволяет выбрать следующие режимы интерполяции:

• Nearest neaghbor ("Ближайший сосед") - использует значение прилегающего пикселя. Этот метод наиболее подходит для работы с простой графикой, текстом, скриншотами (снимками экрана);
• Bilinear (Билинейный) - учитывает значение четырех прилегающих пикселей и обеспечивает более плавные переходы;
• Bicubiс (Бикубический) - дает наилучшие результаты при обработке фотографий, поскольку использует значения восьми прилегающих пикселей и добавляет эффект улучшения резкости за счет повышения контрастности переходов. Как правило, для работы с фотографиями следует использовать только этот алгоритм. Кроме основного режима, здесь можно установить более мягкое Bicubiс Smoother или более резкое Bicubiс Sharper сглаживание.

При подготовке изображений для размещения в интернете следует учитывать, что они предназначены, в основном, для просмотра на экране дисплея, матрица которого обычно не превышает 1280х1024 пикселей (1280х800 для широкого экрана), то есть немного больше 1Мпикс. Размеры изображения на интернет-странице еще меньше и определяются общей компоновкой. При верстке с помощью таблиц они задаются шириной ячейки (столбца).

Например, на данной странице ширина столбца с текстом 700 пикселей. Следовательно, ширина изображения должно быть не более этого значения. При таких небольших форматах даже для фотографий может оказаться лучшим алгоритм интерполяции Nearest neaghbor ("Ближайший сосед").

На рис.2 приведены фотографии, сжатые с 1000 до 300 пикселей по короткой стороне двумя разными способами интерполяции. В скобках приведен размер полученных файлов.

Рис.2. Слева - алгоритм Bicubiс (18 Кбайт) , справа - алгоритм Nearest neaghbor (20Кбайт)

Разница в резкости небольшая, но вполне заметная. Правый снимок более резкий, но на нем видны искажения на однотонных участках (небо). Из-за повышенной резкости его объем на 2 Кбайта больше, чем у левого снимка.

Таким образом, выбор алгоритма преобразования пикселей определяется особенностями изображения и допустимого компромисса резкость/качество. Естественно, что в Photoshop аналогичные результаты можно получить, применяя только один из алгоритмов, но предварительно обработав снимок фильтрами резкости и размытия, о чем я писал в статье "Оптимизация изображений для Web".

На обычных фотографиях высокого разрешения при их подготовке для Web различия методов интерполяции не очень существенны, но они резко возрастают при изменении размеров изображений, содержащих графику и текст. Здесь метод Nearest neaghbor дает в некоторых случаях значительно лучшие результаты, чем Bicubiс. На рис.3 и 4 приведен фрагмент скриншота окна регулировки размера в Photoshop. Начальный размер увеличен в два раза до 650 пикселей, и снимок конвертирован в формат PNG-8.

Рис.3. Алгоритм Nearest neaghbor (1,7 кБ)

Рис.4. Алгоритм Bicubiс (4 кБ)

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

Однако, при уменьшении изображения этот метод может иногда приводить к потере деталей. Например, попробуем разместить на странице сильно вытянутое изображение - строку меню и панель параметров Photoshop. Скриншот с размерами 1399х81 необходимо "втиснуть" в наши 650 пикселей по горизонтали. Для этого изменим его размеры разными методами интерполяции - рис.5...8 и сожмем в jpeg с одинаковым качеством.

Рис.5. Алгоритм Bicubiс (6,0 Кбайт)

Рис.6. Алгоритм Bilinear (6,0 Кбайт)

Рис.7. Алгоритм Nearest neaghbor (8,0 Кбайт)

Рис.8. Скриншот (6,0 Кбайт)

По рис.7 видно, что Ближайший Сосед (Nearest neaghbor) при серьезном испытании оказался подлецом, умыкнув половину деталей букв и превратив их в непонятные иероглифы. Потери информации в случае Nearest neaghbor привели к сильным искажениям начального изображения. Лучшие варианты - Bilinear (рис.6) и таинственный скриншот (рис.8). Этот скриншот получен самым тривиальным способом. Исходный снимок без всяких манипуляций с Image Size и другими хитростями Photoshop просто уменьшен на экране инструментом Zoom (Масштаб) до размеров примерно 650 пикс. Это немного меньше половины экрана с разрешением 1400 пикселей по длинной стороне. С полученной картинки и снят скриншот рис.8, который при наилучшем качестве имеет небольшой объем! Подлеца Ближайшего Соседа мы в расчет не берем.

Теоретически, в этом нет ничего странного. Что такое масштабирование на экране? Это тоже самое преобразование пикселей исходного изображения для вывода на матрицу ЖК-монитора. Такое преобразование происходит при любом масштабировании, кроме 100%, когда пиксель изображения соответствует пикселю на экране. Так как нас интересует качество картинки именно на экране, то этот способ оказывается наиболее приближенным к реальным условиям. При этом можно быть уверенным, что картинка, полученная нами, будет выглядеть точно также и на экране в браузере пользователя. Такое соответствие, согласитесь, дорогого стоит, так как является одной из основных задач подготовки изображений для Web.

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

Для определения размера изображения в пикселях на экране монитора удобно сделать линейку, проградуировав ее в пикселях. Так, для моего монитора с разрешением 1400х1050пикс длинная сторона (ширина) равна 30см. Взяв обычную линейку такой длины я разделил ее на 14 равных делений. Таким образом цена деления составила 1400:14=100 пикселей. Получился удобный измерительный прибор "Пиксометр" (не путать с "Писькометром" - прибором для измерения пиписок).

Используя такую линейку, несложно подобрать размер любой картинки на экране дисплея простым масштабированием. Для получения скриншота рис.8, я уменьшил изображение шапки Photoshop до 6,5 делений "пиксометра". Большая точность здесь не требуется, а если и возникнет такая потребность, то с точностью до пикселя текущий размер выделяемой области можно увидеть в программе снятия скриншотов.

Итак, процесс получения качественного изображения для Web упрощается до трех шагов:

1. Уменьшаем или увеличиваем изображение на мониторе до нужного размера в пикселях экрана (желательно изменять размер в целое число раз);
2. При желании улучшаем его любыми способами, не меняя масштаб;
3. Снимаем скриншот - и все! Готово отличное изображение для Web.

Еще одно достоинство данного метода, кроме простоты и наглядности, в том, что можно использовать любые программы просмотра и обработки изображений, даже если в них нет функции изменения размера изображения в пикселях. Инструмент Zoom (Масштабирование) - точно есть в любой программе! А уж снять скриншот - проще простого. Для этого, например, можно использовать программу ScreenHunter 4.0 Free фирмы Wisdom Software Inc, которая позволяет сразу скадрировать и сжать скриншот в формат JPEG или GIF для размещения в интернете или для отправки по электронной почте. Работу с этой программой я описал в статье "Скриншоты - снятие и подготовка для Web".

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

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

16.08.2008 г.

Далее - Кадрирование фотографий без потерь