Оптимизация (уменьшение) фотографии для WEB

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

Первый вариант — когда фотография имеет в лучшем случае размер 300-400kb, долго грузится, целиком не вмещяется на мониторе и выглядит при этом нерезко. Надо добавить, что немногие станут дожидаться полной загрузки фотографии такого размера. И второй вариант. Затратив не более пяти минут на оптимизицию Вы получите "легкую" фотографию отличного качества.

Для выполнения следующей операции нам понадобится программа Adobe Photoshop CS (можно использовать более ранние версии программы Adobe Photoshop 7, Adobe Photoshop 6). Я буду писать с расчетом на то, что могут быть те кто ещё ни разу не работал с этой программой. Итак...

1. Конечно, в начале нужно открыть программу Adobe Photoshop

2. Откройте фотографию, это можно сделать тремя способами. Первый, нажав на клавиатуре "Ctrl + O" Второй, используя команду "File" • "Open" (Файл • Открыть). Третий, дважды кликните по серому фону программы... и откройте нужный Вам файл. Если Вы все правильно сделали, то фотография должна быть у Вас перед глазами...

3. Выбирите в меню команду "Image" • "image size" (Изображение • Размер изображения) Перед Вами появится следующее окно (фото ниже)...

4. Поставьте галочки напротив Scale Styles, Constrain Proportions, Resample Image, как показано на образце. В моём примере в поле Resolution (разрешение) уже стоит цифра 72 pixel/inch, если у Вас другое значение, то введите значение 72.

Обратите внимание на параметры значений в полях widht (ширина) и height (высота) в блоке Pixels Dimensions (Измерения Пикселей) и Document size (размер документа). В первом показано значение в пикселях по ширине и высоте, во втором блоке размер документа по ширине и высоте в сантиметрах. Параметры в блоке Pixels Dimensions можно не трогать, а лишь манипулировать полем Document size меняя размеры изображения.

1. Далее, установим новые размеры фотографии в блоке Document size (размер документа) в поле widht (ширина). Ведем значение 23, обратите внимание все другие параметры изменятся автоматически. Чтобы фотографии при уменьшении разрешения были более резкими измените напротив Resample Image Bicubic на Bicubic Sharper. В более ранних версих программы такой возможности нет. Если Вы все сделали правльно и у Вас примерно такие же цифры, как на фото ниже, то смело жмите "Ok".

Почему изменяем именно значение ширины? Я всегда изменяю значения по большей стороне фотографии, то есть если это вертикальный кадр, то изменяю значение в поле height (высота), если это горизонтальный кадр, то изменяю значение поля widht (ширина).

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

Приморно у 50% пользователей интернет, разрешение монитора составляет 1024х768 и у 20% 800х600. При использовании предложенных мною параметров, просмотр фотографий не вызовет никаких проблем. Продолжим...

1. Выбирите в меню команду File • "Save for Web" (Файл • Сохранить для WEB) или просто нажмите одновременно Alt+Shift+Ctrl+S. Перед Вами появится рабочее окно Оптимизатора. В верхней части этого окна нажмите на кнопку 2-Up (она обведена красным на примере ниже). Теперь фотография будет в двух окнах. В левом окне будет оригинальная фотография, а в правом оптимизированная, её размер в kb указан левом углу (он обведен красным на примере ниже).

Обратимся к блоку "Preset" (Задавать), он в правом верхнем углу оптимизатора. Не секрет, что для оптимизации фотографий лучше использовать JPEG расширение. Хотя, по умолчанию в Adobe Photoshop установлено GIF. Для наилучшего качества фотографии установите следующие параметры, как на изображении внизу...

Я использовал очень высокое качество сжатия "Very High" оно даёт наилучшее качество изображения. Для приемлимого результата можно так же использовать высокое качество "High" оно так же даёт приличное качество картинки. Есть ещё два параметра сжатия "Medium" (среднее) и "Low" (низкое), но применять их я бы не советовал. В любом случае, поэкспереметировав с вариантами скажития, Вы сами для себя определите, что Вас больше устраивает: Высокое качество картинки, но при этом больший размер файла или среднее качество картинки, но меньший размер файла.

Вы можете выбирать другие промежуточные уровни качества для файлов JPEG путем ввода или передвигания ползункового регулятора Quality (Качество) в правой стороне диалога Preset. К примеру, я очень часто использую значение Quality (Качество) - 70, это даёт высокое качество и уменьшает размер фотографии в среднем на 10-20kb. Немного, но учитывая, что большая часть людей по-прежнему в качестве подключения к интеренету используют Dial up (модемная связь), то на загрузку файла уйдёт на 5 секунд меньше. Если у Вас личный фотосайт, как у меня, то, уменьшив размер одной фотографии даже на 10-20kb, в целом это экономит много времени пользователя. Старайтесь оптимизировать свои фотографии, чтобы их размер не превышал 100kb.

Поэксперементировав, смело жмите "Save" (Сохранить). Итак, Вы сохранили оптимизированную фотографию. Далее, закройте оригинальный файл, НО ПРИ ЭТОМ НАЖМИТЕ "NO" на панели "Save changes to the Adobe Photoshop document" (сохранить изменения в документе?), фото ниже...

Если Вы нажмёте "Yes" (Да), то Вам придётся вечно наслаждаться этой фотографией только по монитору. Это я к тому, что напечатать её Вы не сможете.