Молодежный онлайн портал Казахстана

Сегодня мы с вами будем учиться оптимизировать любые имеющиеся у вас графические файлы для публикации их на просторах Всемирной паутины. Процесс оптимизации будет осуществляться при помощи небезызвестного графического редактора Adobe Photoshop. В данном тексте все действия будут описаны на примере версии CS2.

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

Теперь представим, что нам нужно сделать что-то вроде "превьюшки" - уменьшенной копии оригинала, которая будет представлена на веб-странице для получении представлении о полной версии изображения. Главным показателем такой копии должен быть минимальный размер. Под это понятие попадают как значения ширины и высоты изображения, так и его цветность. Выбор формата графического файла (GIF, JPEG, JPG, BMP, PNG) также немаловажен. Итак, перейдем ближе к делу.

Открытие

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

Самый простой способ – найти нужный вам файл на вашем диске через интерфейс программы Проводник, щелкнуть по значку нужного файла один раз правой кнопкой мыши, в появившемся контекстном меню подвести указатель мыши к пункту "Открыть с помощью", после чего во вновь появившемся меню кликнуть левой кнопкой мыши по строчке "Adobe Photoshop CS". В результате загрузится Photoshop с открытым в нем выбранным вами графическим файлом. Данный способ прост тем, что если предназначенный для редактирования файл находится у вас "перед глазами", то вам нет никакой необходимости сначала открывать меню "Пуск – Все программы" и нажимать по ярлычку "Adobe Photoshop CS" (это, собственно, второй способ), после чего уже в графическом редакторе выполнять команду "File – Open…" либо нажать комбинацию клавиш "Ctrl + O" и искать файл на диске посредством встроенного в графический редактор файлового менеджера.

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

Итак, нужный нам файл мы открыли.

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

Кадрирование и редактирование размеров

Итак, режем. Для этого нам понадобится инструмент "Crop Tool". Его вы можете выбрать, либо щелкнув левой кнопкой мыши по соответствующему значку в панели инструментов программы Photoshop, либо просто нажав горячую клавишу "С" на клавиатуре. К слову, горячими клавишами работать намного быстрее, чем указателем мыши.

При этом курсор сменится на изображение, аналогичное изображению инструмента. Теперь начинаем выделение нужного нам участка фотографии. Его можно начать либо с верхнего левого угла изображения, либо с нижнего правого. В нашем случае наиболее удобен второй вариант, так как ненужная (зачерненная) область находится у левого края. Аккуратно подводим курсор к нижнему правому углу изображения (впрочем, если вы немного ошибетесь, положение можно поправить курсорными клавишами-стрелками), зажимаем левую кнопку мыши и ведем курсор ближе к верхнему левому углу. Обратите внимание на квадратики на углах и в серединах сторон выделения. Если оно получилось не совсем точным, то, "держась" (нажав левую кнопку мыши и не отпуская ее) за один из этих квадратиков, можно растянуть область выделения в соответствии с вашими требованиями. Сторона или угол будут перемещаться синхронно с указателем мыши. Вот что получилось у меня.

С редактированием композиции разобрались. Теперь займемся размерами. Если вы посмотрите в нижний левый угол окна изображения (он хорошо виден на скриншоте) или на панель "Navigator", то увидите, что видимые сейчас размеры картинки составляют 22,31% от реальных. Представляете, какой гигант получится при 100%, в которых изображение будет выводится на веб-страничку.

Предположим, что нам нужно из имеющейся картинки создать миниатюру для предварительного просмотра с размером короткой стороны в 150 пикселей. Наиболее простой, на мой взгляд, выход из данной ситуации – изменить размеры изображения непосредственно в его свойствах. Для этого отправляемся в "Image – Image Size..." (или просто нажимаем комбинацию клавиш "Alt + Ctrl + I") и тем самым открываем одноименный диалог.

Здесь нас интересует группа "Pixel Dimensions" и параметры "Width" и "Height" в ней. Для изменения ширины ("Width") и высоты ("Height") изображения достаточно изменить лишь первый параметр. Значок в виде трех звеньев цепочки, который расположен правее вышеупомянутых полей, показывает, что при изменении одного из параметров второй будет изменятся пропорционально первому. Зададим ширину равной 150 пикселей (выбранные единицы измерения указываются в соседних выпадающих списках).

Сохранение на диск

Теперь последний шаг – сохранение полученного изображения. Вернее, оно, возможно, еще не совсем получено, и на него предстоит нанести финальные штрихи. Для начала вызовем диалог "Safe For Web". Осуществляется это выполнением команды "File – Save For Web..." либо комбинацией клавиш "Alt + Shift + Ctrl + S".

Кратко опишу функции данного диалога. Слева мы видим четыре варианта одного и того же изображения: оригинал (каким оно было непосредственно перед открытием диалога) и еще три копии изображение в различном качестве. В моем случае первая копия отображена в качестве 61% (61 quality), вторая – 30% и третья – 15%. Это сделано для того, чтобы вы могли сопоставить оригинал с копией ухудшенного качества и сделать вывод, при какой степени качества копия наименее отличается от оригинала. Рассмотрим мои слова на примере. Оригинал имеет размер 50 кб (это можно узнать, установив для любой из копий 100% качество), в то время как картинка в 61% качестве "весит" лишь около 15 кб. Там же можно узнать, что в первом случае при скорости приема, равной 28.8 кб/с, изображение загрузится за 19 секунд, в то время как во втором случае для загрузки потребуется лишь 6 секунд. При этом друг от друга картинки отличаются очень незначительно, а для "превьюшки" размером в 150х224 разницу и вовсе вряд ли кто заметит. А теперь представьте, что таких картинок на страничке будет штук 10. Если каждая из них будет загружена примерно за 5 секунд, то загрузка всей страницы завершится намного быстрее, чем если бы загрузка каждой картинки занимала около 20 секунд. Многие скажут, что с названной мною скоростью уже давно никто не качает, и вообще сейчас век ADSL, LAN и прочих модных технологий. Может оно так и будет в скором будущем, но пока, поверьте, не у всех есть возможность провести себе выделенку или даже подключиться по ADSL. Поэтому пока не стоит забывать о существовании "модемщиков" и не лениться и оптимизировать выкладываемые в Интернет изображения. Указанные на скриншоте значения качества изображения не являются стандартом де-факто, и вы легко сможете изменить их для каждой из копий, выделив ее передвинув ползунок "Quality:", который расположен в правой части диалога "Save For Web". Выполнив все необходимые операции, выделяем наиболее удачный образец изображения и жмем кнопку "Save". Перед нами появится очередной диалог, "Save Optimized As". Здесь необходимо выбрать место для сохранения готового графического файла, а также задать его имя и формат. Простые рисунки с небольшим количеством цветов и текстом рекомендуется сохранять в формате GIF. Для материалов фотографического качества (а значит и с обилием цветов) советую выбрать JPG.

Если вам необходимо выложить в Сеть не "превьюшку", а полноценную копию изображения, она все равно должна пройти процедуру сохранения для WEB. Точно не знаю, чем отличаются изображения с одинаковыми свойствами, но сохраненные командами "Save As..." и "Save For Web", однако мне известны прецеденты, когда при использовании первого метода браузер отказывался отображать сохраненую таким образом картинку.

Вот и закончилось это занятие, посвященное оптимизации графических файлов с помощью графического редактора Adobe Photoshop. Но впереди еще много интересных тем, так что оставайтесь с нами.