Разное

21.08.2010
Уменьшение размера фотографий для Web

Рубрика: Разное

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

Для просмотра фотографии на компьютере совсем не нужно высокое разрешение, и следовательно большие файлы. Максимальный логичный размер фотографии в пикселах 800 х 600 при разрешении 72 пиксела/дюйм. Такой файл “весит” до 150 Кбайт, а при определенном опыте по обработке фотографий, и меньше - 60-100 Кбайт.

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

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

Существует много программ для обработки изображений. Я не буду рассматривать их все, объясню общие принципы на примере русифицированной версии программы Adobe Photoshop CS. Для других программ – читайте инструкции, но принципы остаются схожими с теми, которые будут изложены ниже.

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

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

Итак, способ первый – “проще некуда”

Откройте файл фотографии в программе Photoshop.

Обратите внимание на панель инструментов справа – число 12,5% в Навигаторе означает масштаб отображения Вашей фотографии. Цель обработки фотографии: при масштабе отображения 100% фотография должна свободно помещаться на экране монитора и быть приемлемого качества.

В меню Файл выберите опцию Cохранить для Web

В рабочем поле увидите часть своей фотографии (потому что она пока очень большая и на экране не умещается).

На панели инструментов справа обратите внимание:

  • формат сохраняемого файла – JPEG
  • Quality 61 % – это качество, его можно увеличить или уменьшить, понимая, что при этом соответственно увеличивается/уменьшается размер файла
  • ширина фото в пикселах (Width) – 3264 - измените ее на 600 (высота изменится сама пропорционально),
  • нажмите кнопку Save (Сохранить)

Файл для загрузке на сайт готов - присылайте его нам в разделы Золотая рыбка и Отчеты о рыбалке.
В нашем примере файл, предназначенный для обработки, весил 1,9 Мбайта. Размер полученного файла – 62 Кбайта. Что называется «Почувствуйте разницу»

Способ второй – чуть-чуть сложнее, но тоже очень просто.

Откройте скопированный файл в программе Photoshop.
На вкладке Изображение выберите опцию Размер изображения

В открывшемся окне внесите изменения следующим образом:

  • Разрешение (у нас 480) – исправьте на 72 (сразу автоматически изменятся значения ширины и высоты фото)
  • Исправьте значения ширины фото на нужное Вам – например 600 (ширина изменится сама пропорционально, если установлена галочка "Сохранять пропорции")
  • Нажмите кнопку Ok

Посмотрите на полученный результат – очень часто при уменьшении фотографии ухудшается резкость. Поэтому идем дальше: в меню Фильтр выбираем опцию Резкость>Нечеткая маска

В открывшемся окне:

Пробуем работать только с одним ползунком – Радиус. Двигаем ползунок вправо-влево и смотрим, как изменяется изображение. В нашем примере вполне достаточно значения ползунка 0,5-0,7.
Совет: в данном действии необходима умеренность, не делайте значение радиуса больше, чем необходимо – вместе с резкостью на фотографии проявляются дефекты.
Добившись нужного результата, нажмите кнопку Ok

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

Заключение:

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