Оптимизация изображений в формате JPEG.

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

Формат JPEG рекомендуется использовать для сохранения изображений с плавными цветовыми и тоновыми переходами. Увеличение резкости, наличие четких границ ведет к увеличению объема файла и, наоборот, применение размытия снижает его. Чем меньше цветов в изображении, тем лучше сжимается файл, поэтому  этот формат удобно использовать для сохранения тонированных фотографий, состоящих из оттенков одного цвета. Еще лучше сжимаются черно-белые фотографии.

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

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

Для этого выполняется команда Файл ? Сохранить для Web и устройств.

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

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

— исходное;

— оптимизированное;

— два изображения – оригинальное и оптимизированное;

— и, наконец,  четыре изображения – оригинальное и три варианта оптимизированных.

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

Кроме этого, в правом нижнем углу картинки есть информация о предполагаемом размере файла и времени его загрузки с заданной скоростью. (Скорость можно изменять, раскрыв соответствующий список.)

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

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

Перейдем на правую сторону окна сохранения. Здесь находятся наиболее важные настройки. Во-первых, выбираем формат файла. Это можно сделать двумя способами: выбрать из списка готовых установок, или просто выбрать формат и настраивать вручную, самостоятельно.

Если мы выбрали формат JPEG, то следующим шагом будет определение качества оптимизированного изображения. Для этого в Фотошопе есть меню с выпадающим списком дискретных значений качества: низкое, среднее, высокое, очень высокое и наилучшее. Можно качество изменять плавно, используя движок.

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

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

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

Встроенный профиль, или ICC-профиль, описывает цветовые характеристики устройств. Он необходим, в основном, при печати.

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

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

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

Во-первых, вы можете сохранить созданные вами настройки оптимизации изображений под каким-либо именем.

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

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

Для глубокого изучения программы Adobe Photoshop рекомендую воспользоваться популярным видеокурсом Зинаиды Лукьяновой «Фотошоп с нуля в видеоформате».

В следующих статьях будут рассмотрены настройки при оптимизации изображений в форматах GIFи  PNG.

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

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