Алексей Дмитриев Профессионал

Как подготовить фотографии для публикации в Интернете?

Любой материал на любом сайте выигрывает при условии иллюстрации его фотографиями, рисунками, схемами и прочими графическими файлами. И если размер этих файлов не имеет значения при верстке материала на современном компьютере, оснащенном гигабайтами оперативной памяти и сотнями гигабайт места на винчестере, то при публикации в Интернете ситуация меняется.

У нас в стране только несколько крупнейших городов могут похвастаться наличием скоростного безлимитного интернета. Провинция до сих пор плотно сидит на модемной связи, а глубинка даже на GPRS (связи при помощи мобильного телефона). Скорости передачи данных по этим каналам удручающе низкие, поэтому веб-страницы большого объема загружаются раздражающе медленно. Так как графические файлы — чемпионы по занимаемому месту, то следует уменьшать их, насколько возможно при выбранном стандарте качества. Как это сделать за несколько минут?

Не будем рассматривать способ получения изображений: это могут быть ваши собственные снимки; фотографии и рисунки, скачанные из Сети; отсканированные изображения; снимки экрана компьютера (скриншоты) и тому подобное.

Все их объединяет одно свойство — недопустимо большой объем. Уменьшить эту величину нам поможет программа Фотошоп. Не нужно бояться этой программы — она одинаково служит и придирчивому профессиональному иллюстратору, и практиканту ШколыЖизни.ру. Версия программы для наших целей не имеет значения, подойдет любая от шестой и старше (7, 8, cs, и так далее). Более старая версия даже предпочтительней, так как занимает меньше места, работает быстрее и имеет меньше опций. В данной статье использованы скриншоты, снятые с версии 8.0.

Если Фотошоп не установлен у вас на компьютере, то его стоит установить. Установка происходит почти автоматически, надо только соглашаться на все настройки по умолчанию. Открытое окно программы показано на рис. 1.

Слева вы видите узкое высокое окно Инструментов (Tools), его можно перемещать мышью за синюю полосу наверху в любое удобное место экрана. Это относится и ко всем остальным вспомогательным окошкам программы. В правой части окна мы видим еще три вспомогательных окна. Для нашей задачи они не нужны, поэтому закроем их, чтобы они не мешали. При необходимости их всегда можно вернуть из меню Окно (Window).

Настало время открыть изображение, которое мы станем уменьшать. Для этого нужно открыть меню Файл и выбрать вторую позицию сверху — Открыть. Появится стандартное окно выбора файла, которое всем знакомо.

Открыв нужный файл, начнем с ним работать. Если это фотография, то первым делом нужно отрезать все лишнее. Для обрезки служит инструмент Crop Tool, на рисунке 1 он находится в окошке Инструментов слева в третьем ряду инструментов, выделен в белом квадрате. При помощи указанного инструмента делаем прямоугольное выделение нужного участка фотографии.

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

Далее нужно установить размер. Для этого в меню Изображение выбираем строку Размер Изображения и в открывшемся окне устанавливаем нужный. При этом можно выбирать размер в сантиметрах, но лучше — в пикселях. Фото шириной 700 пикселей займет бОльшую часть окна браузера. Наиболее употребительная ширина — 500 пикселей. Высота будет установлена автоматически с сохранением пропорций снимка.

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

Но и это еще не все — изображение несет массу избыточной информации. Например, формат файла .jpg содержит миллионы оттенков цветов, а в web используется в основном только 216 так называемых «безопасных», то есть тех, что гарантированно будут переданы без искажения любым браузером. Такая же картина и с разрешением, разрешение 300 линий/дюйм избыточно, вполне достаточно 72. Функция Фотошопа Сохранить для Веб — это программа в программе, позволяющая оптимизировать изображение, сохраняя приличное качество и уменьшая его размеры. Открываем меню Файл и выбираем Сохранить для Веб.

Программа позволяет сохранять файлы в нескольких форматах, но нам потребуются только два основных: .jpg для фотографий и картин и .gif для текстов, рисунков, схем и прочего. Формат .gif уникален еще и тем, что поддерживает прозрачность (например, фона) и мультипликацию.

Меню программы Сохранить для Веб позволяет поэкспериментировать с различными степенями «ухудшения» изображения, для чего на экран выводятся два изображения — исходное и оптимизированное. (Есть возможность вывести 4 изображения). Поэкспериментируйте с различными настройками и найдите оптимальное для вас соотношение размер/качество. Я лично не признаю фотографий размером больше 30 килобайт, так как живу в деревне и пользуюсь GPRS. Конечный результат работы размером 500×344 пикселей получился 10,2 Кб.

Несколько общих советов:

1. Проделывайте все вышеперечисленные этапы, ничего не сохраняя. Тогда вы всегда можете вернуться на любое число шагов назад, выбрав позицию Шаг Назад в меню Правка. Сохраняйте только уже окончательный оптимизированный вариант с новым именем файла из меню Сохранить для Веб;

2. Не бойтесь, если конечный вариант в натуральную величину выглядит «не очень». Скорее всего, на странице сайта он будет уменьшен, и дефекты станут незаметными;

3. Смело экспериментируйте, Фотошоп — очень умная программа и никогда не изменит исходный файл, не спросив у вас подтверждения. А в этой замечательной программе для экспериментов большой простор!

Обновлено 28.12.2013
Статья размещена на сайте 26.10.2009

Комментарии (20):

Чтобы оставить комментарий зарегистрируйтесь или войдите на сайт

Войти через социальные сети:

  • Алексей Дмитриев Алексей Дмитриев Профессионал 20 ноября 2009 в 08:33 отредактирован 20 ноября 2009 в 08:36

    Mike Mike, из ваших замечаний следует, что вы знаете еще несколько программ, умеющих оптимизировать изображения для веб? Будьте другом, сообщите мне, пожалуйста. Я это говорю без тени иронии, самого напрягает каждый раз перезагружаться в Windows и запускать Фотошоп. Я думаю, что и другим читателям будет интересно.

    Спасибо.

  • Чёткое руководство

    Алексей Дмитриев, cпасибо! Чётко изложенный самоучитель для конкретной операции. Согласен и с тем, чтобы Александр Пузанов поделился своим опытом не только в комментах, но и в статьях.

    • За что?

      В этой ветке дважды поднимался вопрос о цене продукта. И очень "мило", что его полностью проигнорировали.
      Остается думать, что участники ведут себя подобно персонажам басни Крылова:
      "За что же, не стыдясь греха,
      Кукушка хвалит петуха?
      За то, что хвалит он кукушку!"
      Насколько я знаю, тут за статьи деньги платят, и "денежка" зависит от количества положительных отзывов. Ты - мне, я - тебе, и все вместе заработаем! А как там читатели будут пользоваться этими "полезными советами" - это их проблемы!
      Хорошо устроились!

      • Mike Mike Читатель 19 ноября 2009 в 17:36 отредактирован 19 ноября 2009 в 21:21

        [Удалено модератором]

        Оценка статьи: 3

        • Марианна Власова Марианна Власова Бывший главный редактор 19 ноября 2009 в 21:21

          Mike Mike, я предупредила, что буду удалять комментарии с альтернативными способами приобретения фотошопа.
          Мария Жиркова сначала это проигнорировала, затем нас же обвиняет в пропаганде пиратства.
          Мария, доступ к лицензионному Фотошопу бывает не только у тех, кто купил его за свои деньги. На этом прекращаем обсуждение, кому нужна эта статья, и Ваше присутствие в данной ветке. "денежка" зависит от количества положительных отзывов." - правила читайте внимательнее, если Вас так волнуют чужие заработки.
          Нас вот волнует правильность текстов
          Mike Mike, спасибо, что указали на ляп, поправила.

        • Наш народ, конечно, ушлый. Но мне казалось, что на солидном ресурсе пропаганда пиратства как-то ... не комильфо...
          Ну да ладно.
          Все равно мороки много - кряк найти, запустить, при этом вирусяку не подцепить (что почти невероятно), и открыть сложную программу для профессионалов. Точно - микроскопом гвозди бить!
          Куда проще скачать ирфан, бесплатный по всему миру и очень удобный, и в два-три клика уменьшить размер!
          Но ведь это ж статьи не получится - вот в чем проблема

          • Мария Жиркова, какой такой Ирфан?? В статье ж прямо сказано: "И осталось сделать самое главное – то, что умеет делать только Фотошоп, – оптимизировать изображение для web" Поэтому, выход один - "Если Фотошоп не установлен у вас на компьютере, то его стоит установить"

            Оценка статьи: 3

            • Mike Mike, простите - не сообразила сразу!!! Это же, наверное, реклама Фотошопа, да?
              Ну и что, что изменить размер фотографии можно с помощью многих программ (например, Пикаса - тоже бесплатная и удобная).
              К тому же уменьшать фотки фотошопом - в духе наших родных привычек, когда гланды удаляют через задний проход.

  • Главное забыли

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

  • Узнаю брата Колю на фотографии к статье!

  • Если Фотошоп не установлен у вас на компьютере, то его стоит установить.
    Ха-ха. Его для этого надо КУПИТЬ. А стоит он немало денег. И использовать его для такой фигни - микроскопом гвозди забивать.

    Оценка статьи: 3

  • Алексей Дмитриев, спасибо! Мне лично, это пригодится. Совсем недавно крутил-вертел фотографию пол дня, пока уменьшил

    Оценка статьи: 5

  • Спасибо Вам, Алексей. Очень просто, лаконично и понятно. Всё бы так..........

    Оценка статьи: 5

  • Александр Пузанов Александр Пузанов Дебютант 18 ноября 2009 в 09:24 отредактирован 18 ноября 2009 в 09:25

    Ну да..., ну да....
    А ещё, чтобы очень долго не экспериментировать с настройками сохранения после команды "Сохранить для Веб" в открывшемся окне, там где стоит надпись Preset - есть стрелочка, перейдя по которой к другому меню, можно выбрать опции сохранения ограничивающие файл ДО НУЖНОГО РАЗМЕРА ПО ВЕСУ....
    Скажем - нужно Вам чтобы Ваш файл не превышал вес в 15К = щёлк по кнопочке - выбираем - Оптимизировать по размеру файла - Desired File Size: (Цира - сколько Вы хотите чтобы весил конечный файл) - выбираем там же автоматом выбрать нужный формат сохранения GIF/JPG или же нет - жмём ОК - сохраняем оптимизированный файл....

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