Оптимизация изображения уменьшает его конечный размер, и оно, таким образом, быстрее загружается в нашем браузере.
JPEG – это лучший формат для сжатия фотографий. Но он также очень хорош для оптимизации веб-графики, которая содержит градиентные заливки (плавно переходящие друг в друга цвета), свечения или тени. И сегодня мы будем сжимать наше изображение в формат JPEG средствами Adobe Photoshop (меню Save For Web) и Adobe ImageReady (Optimize palette).
Выбираем формат файла (параметр Format)
Если Вы работаете в Photoshop, выберите File > Save for Web, чтобы открыть диалоговое окно Save for Web (A). Для ImageReady Вам необходимо сделать следующее: Window > Optimize. Откроется панель Optimize (B).
Раскройте ее, чтобы увидеть все настройки (для этого щелкните по маленькой двунаправленной стрелке, находящейся рядом со словом Optimize в заголовке панели). Выберите JPEG из меню Format или предустановленную настройку из списка Preset:
Качество (параметр Quality)
Качество – это та переменная, которая в наибольшей степени влияет на размер конечного файла, а также на внешний вид JPEG-изображения. Чем ниже значение параметра Quality, тем больше будет степень сжатия.
Уменьшая указанный параметр, Вы уменьшаете объем будущего файла, но из-за этого внешний вид картинки может существенно пострадать. Выберите предустановку из меню Preset. Затем настройте ее, двигая ползунок Quality в Photoshop или Amount в ImageReady. Иконка кружка справа от указанных параметров открывает диалоговое окно, в котором Вы можете задать различные значения качества для текстовых слоев, векторных слоев, а также отдельных каналов (channels) изображения.
Размытие (параметр Blur)
Размытие изображения уменьшает размер итогового файла. Добавьте немного «блюра» (blur), двигая ползунок поля Blur вправо. Но не перестарайтесь – иначе Ваше изображение будет выглядеть слишком нечетко.
Чекбокс (поле, где нужно поставить галочку) Optimized
Отметьте этот флажок, чтобы еще слегка уменьшить размер получаемого файла.
Чекбокс Progressive
Этот параметр заставляет изображение появляться постепенно по мере его загрузки на компьютер с сервера.
Сначала Вы видите очень низко-качественную версию картинки, затем она улучшается пока не придет к окончательному виду (значит, картинка полностью скачалась). Если Вам нужен этот эффект, поставьте здесь галочку.
Чекбокс ICC Profile
Информационные данные ICC содержат информацию о цветах. Я рекомендую Вам не включать данные ICC в свои веб-изображения, т.к. большинство браузеров не могут их читать, и они просто увеличивают размер файла.
Снимите флажок с поля ICC profile.
Matte
Поле Matte имеет значение только, если в Вашем изображении присутствуют прозрачные пиксели. В связи с тем, что формат JPEG не поддерживает прозрачность, все пустые пиксели Вашей картинки при оптимизации будут заполнены цветом, указанным в поле Matte.
Если Вы планируете использовать на своей веб-странице одноцветный сплошной фон, установите в этом поле цвет, совпадающий с цветом фона. Результатом станет то, что те участки изображения, которые были прозрачными, сольются с фоном веб-страницы, создавая, тем самым, иллюзию прозрачности.
Вкладка Color Table
Не обращайте внимания на эту вкладку, если Вы выбрали формат JPEG. А упоминаю я ее лишь потому, что ее нужно оставлять нетронутой, когда мы оптимизируем в JPEG. Дело в том, что JPEG’и (в отличии от GIF) не сводят цвета исходного изображения к определенной, строго ограниченной палитре.
Вкладка Image Size
Уменьшение длины и ширины картинки всегда приводит к уменьшению объема конечного файла. В Photoshop Вы можете изменять размеры сжимаемой картинки так, что это не повлияет на исходное изображение. Кликните по вкладке Image Size в окне Save for Web (A). Отметьте галочкой параметр Constrain Proportions, чтобы избежать искажения картинки (B).
Уменьшите длину и ширину изображения, введя новые значения в пикселях или процентах (С). Изменение размеров картинки (особенно, их увеличение) может сильно повлиять на ее качество.
Чтобы свести к минимуму этот неприятный эффект, установите параметр Quality вкладки Image Size в значение Bicubic Sharper, если Вы уменьшаете размеры, или Bicubic Smoother, если увеличиваете. В ImageReady размеры можно изменять только у исходной картинки (Image > Image Size).
Чекбокс Add Metadata
Metadata (метаданные) – это информация о файле. Вы можете добавить различные виды метаданных к своим веб-изображениям прямо из панели Optimize в ImageReady. Эти данные в худшую сторону влияют на размер конечного файла, поэтому я обычно убираю соответствующую галочку (A). Если Вы оставляете галочку в этом поле, ImageReady по умолчанию добавляет информацию, которая находится в полях Description (B) и Copyright
Notice (C) меню File Info (File > File Info), что слегка увеличивает объем получаемого файла. В редких случаях Вы, возможно, захотите включить EXIF данные (информация, записанная в цифровых фотоснимках; например, данные о фотокамере) или XMP данные (ключевые слова и другая информация о файле для использования сторонними приложениями). Чтобы сделать это, кликните по кнопке Settings в панели Optimize (D) – откроется диалоговое окно Output Settings. И там выберите нужные параметры метаданных (Е).
