Подготовка изображений для интернета

article25____1.jpg

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

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

Чем меньше качество сжатия тем меньше размер файла, и тем больше “артефактов” на фотографии.

article24____7.jpg Деффекты сжатия в jpeg.

Два способа уменьшить размер изображения.
Уменьшение разрешение изображения. Как правило цифровые камеры позволяют делать снимки разрешением 2000 на 3000 пикселей и больше. Разрешение экрана на котором просматривают эти фотографии редко превышает 1280 на 1024 пикселя. Таким образом уменьшив разрешение изображения до 1000 пикселей по широкой стороне,  мы получим выигрыш в объеме файла с 1,25 Мб до 0,2 Мб т.е. в шесть раз. При этом изображение на экране будет выглядеть практически так же а загружаться  заметно быстрее.

article25____2.jpg Фото с большим и уменьшенным разрешением.

Увеличить степень сжатия. Формат jpeg позволяет уменьшить размер изображения, потеряв некоторые детали изображения. На практике низкое качество означает появление дефектов на изображении, т.н. «артефактов сжатия». Эти дефекты становятся заметны они становятся только при приближении, а при обычном промоторе в браузере и вовсе незаметны.
[пример с ухудшением качества текста]
Снизив качество изображения с 80 до 40 мы уменьшили размер файла с 0,2 Мб до 0,06 Мб, т.е. почти в три с половиной раза.

article25____3.jpg Фото с низкой и высокой степенью сжатия.

«Сжатие» в Графическом редакторе.

Оба способа «оптимизции» размера фото, можно выполнить с помощью специализированных графических редакторов.

Расскажем как это сделать, с помощь одного из самых мощных и популярных программ- Adobe Photoshop.
Рассмотрим порядок действий:

Откройте ваше изображение в Photoshop ;
В горизонтальном меню выберите Файл (File)>Сохранить для Веб (Save for Web)

article25____4.jpg

Выбрав Показать оптимизированное изображение Otimised (1), необходимо будет задать размер (2) и качество (3) конечного файла. Убедившись, что оно нас устраивает (4), сохранить (5)  “оптимизированную” фотографию.
article25____10.jpg

А теперь подробнее.

Выберите вкладку Размер изображения (Image size) (1), убедившись что стоит галочка сохранять пропорции (Constrain proportions) (2). Укажите ширину (Width) в 1000 пикселей (3), а затем нажмите Применить (Apply) (4).

article25____6.jpg

После изменения разрешения и качества, можно оценить размер конечного файла, по числам в нижнем левом углу экрана.

article25____8.jpg размер файла и время его загрузки, указывается в нижней части экрана.

Укажите формат изображения Jpeg (1), задайте качество изображения 40 (2), и нажав Сохранить (Save) (3), укажите директорию сохранения “оптимизированного” файла.

article25____7.jpg
Для автоматической обработки большого количества файлов необходимо обратиться к пункту Автоматизация > Пакетная обработка (предварительно записав последовательность в пункте Действия).

Альтернативный способ.
Существует бесплатный редактор XnView так же позволяющий уменьшать размер изображения. Вот порядок действий:
Запустив программу необходимо найти и открыть в её браузере выбранное изображение,

article25____11.jpg

Выберите пункт горизонтального меню Рисунок > Изменение размера

article25____12.jpg

Убедившись, что стоит галочка напротив “сохранять пропорции” (1), укажите ширину в 1000 пикселей (2), а затем нажмите Ок (3).

article25____13.jpg

Далее выберите в горизонтальном меню Файл > Экспорт .

article25____14.jpg

Убедитесь что формат исходного файла выбран как Jpeg (1), измените качество сжатия до 40 (2). Убедившись что итоговый размер файла достаточно мал (3), выберите Сохранить (4) и укажите место для сохранения оптимизированного изображения.

article25____15.jpg

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

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

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

article25____9.jpg Пример интерфейса одного из множества фото-сайтов.

Благодаря развитию инфраструктуры, и конкуренции между провайдерами, с каждым днем скорость доступа в интернет увеличивается. Для конечного пользователя, это означает то, что уже нет такой острой необходимости, в сжатии, «оптимизации» фото.  С другой стороны,  не стоит забывать, что «быстрый» и безлимитный интернет доступен далеко не всем и всегда.

Небольшое разрешение фотографий, еще один из способов защитить свое авторское право.

article25____16.jpg

Зпись была опубликована в Четверг, Июль 2nd, 2009 в 10:00 в разделе Статьи . Вы можете получать все ответы на данную статью по RSS 2.0 каналу. Вы можете оставить комментарий, или уведомление (trackback) на своем сайте.

5 Ответов к “Подготовка изображений для интернета”

  1. Дмитрий Василенко on Март 3rd, 2010 at 13:43

    Про подшарпливание после ресайза забыл упомянуть, или я что-то пропустил?

  2. admin on Март 27th, 2010 at 17:29

    Да полезный комментарий. Действительно после уменьшения разрешения, как вариант, можно увеличить потерянную резкость одним из фильтров из раздела резкость. Тогда путь будет таким? Image>Image Size (уменьшаем разрешение), Filter>Sharpen>Unsharp Mask (увеличение резкости), File>Save for Web (Сохраняем файл). Однако этот шаг является необязательным, и наиболее актуален когда на выходе получается изображение малого разрешения, меньше сотни пикселей. Если есть более подробные комментарии и предложения, по этой статье можете выслать их на почту.

  3. Valery on Сентябрь 20th, 2010 at 12:02

    Считается, что в LAB надо переводить перед шарпингом.

  4. admin on Ноябрь 26th, 2010 at 23:10

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

  5. Ирина on Март 21st, 2012 at 23:03

    Необходимо оптимизировать большое кол-во фото для веб. У меня Фотошоп CS4. Пункт Автоматизация не активен, а пункт Действия вообще не нашла. Что я делаю не так, подскажите, пожалуйста?

Оставить сообщение