Подготовка изображение для вашего сайта.
Автор: Андрей Краснокутский
Дата: 2009-02-20 Буруздя пространство Интернета Вы наверняка обратили внимание, что большинство web-страниц просто напичканы различными изображениями. Это и просто фотографии и рисунки, различные банеры, графическире обложки для товаров и т.д. и т.п. можно еще долго перечислять. Да современные web-страницы просто не мыслимы без графических элементов. И сегодня мы поговорим о подготовке графических файлов (фотографий, картинок, кнопок и т.д.) для размещения на Ваших web-страницах.
В последнее время со стремительным ростом компьютерной техники очень сильно увеличиваются размеры графических файлов. Например размер файла обычной фотографии снятой фотоаппаратом составляет от 1,5 МГб и выше. Если Вы загрузите на Ваш сайт графический файл (фотографию) такого размера, то и у посетителя Вашего сайта пожелавшего открыть эту страничку, открываться она будет очень долго, ведь скоростные каналы подключения к сети Интернет есть ещё к сожалению далеко не у всех. В результате человек не дождавшись пока откроется web-страница просто уйдет на другой сайт. Кроме того очень сильно увеличивается потребляемый трафик, а это напрямую связано с оплатой за интернет как у Вас (существуют трафифы хостинга с ограниченным трафиком за перерасход нужно доплачивать), так и у пользователей.
Поэтому графические файлы, прежде чем размещать на web-страницах, необходимо оптимизировать. Т.е. уменьшить размер файла, но сохранить приемлемой качество изображения.
Для оптимизации графических изображений существует множество различных программ. Признанным лидером является программа Adobe Photoshop. На данный момент я например работаю с Adobe Photoshop.CS версией 8.0 как в английском, так и в русском варианте. Рекомендую и Вам научиться работать с этой программой перечислять все достоинства этой программы можно очень долго, скажу лишь, что Adobe Photoshop универсальна и позволяет творить просто чудеса.
Итак, открываем в этой программе (Меню Файл/Открыть) изображение которое мы хотим оптимизировать.

Рисунок 1.
Исходные данные изображения: 2594 х 1944 px размер 1.74 МГб. Естественно это очень большой размер изображенияи и большой объем файла для web-страницы и его необходимо умешьшить как в размере, так и в объёме, причем без потери качества.
Очень часто из графического файла необходимо вырезать какой-то кусочек, одного человека, какой-то фрагмент и т.д. т.е. нет смысла размещать всю фотографию целиком. Если такой момент присутствует - это хорошо, так как дополнительно позволит уменьшить размер файла.

Рисунок 2.
Для вырезки фрагмента (участка) выбираем на панели инструментов Обрезатель Рисунок 2. Выделяем на фотографии необходимый фрагмент (участок) рисунок 3 , здесь очень удобно корректировать размер выделения передвигая область выделенную пунктиром за небольшие прямоугольнички

Рисунок 3.
и нажимаем Enter на клавиатуре компьютера. Получаем новый файл (новое изображение) рисунок 4:

Рисунок 4.
Теперь уже мы имеем файл с параметрами 1576 х 1944 px, размером 934 Кб. Уже лучше. Но размеры картинки все же достаточно велики и нам необходимо подобрать нужный размер изображения, например мы знаем, что ширина данного изображения должна быть 300 px. Идем на вкладку Изображение/Размер Изображения рисунок 5.

Рисунок 5.
В верхнем поле Ширина выставляем необходимы размер 300 px . Если это фотография либо какой-то рисунок где необходимо избежать искажений, то обязательно проследите, что бы стояла галочка напротив Обязательные пропорции, тогда Высота изображения подгонится автоматически и Вам удастся избежать геометрических изображений. Согласитесь неприятно когда лицо вытянуто или приплюснуто. Жмем OK и изображение вписывается в необходимые Вам размеры.
Далее идет на вкладку Файл/Сохранить для Web. Открывается мастер сохранения изображений рисунок 6:

Рисунок 6.
Здесь мы можем выбрать необходимый формат изображения например JPEG , PNG или GIF , выбрать приемлемое качество картинки. Здесь мы видим визуальную картинку и оцениваем её качество, видим размер будущего изображения, в общем смотрите и пробуйте опытным путем.
Очень удобно это делать при открытии сразу четырех видимых вариантов сохраняемой картинки и выбирать понравившийся. Хотя можно переключиться и на другие варианты отображения рисунок 7.

Рисунок 7.
Далее жмем кнопку Save рисунок 6 и указываем путь куда хотим сохранить файл. Теперь мы имеем оптимизированный файл с необходимыми параметрами готовый для вставки на web-страницу и загрузке на сервер.

Окончательный вариант: размер 300 х 370 px, размер 11 Кб. Изображение такого размера откроется очень быстро в любом браузере и при любом соединении с интернет будь то скоростной канал или обычный Dialap-модем.
Обратите внимание мы уменьшили размер файла с 1.74 МГб до 11 Кб, более чем в 150 раз.... и подогнали под нужные размеры, а если подобных графических файлом несколько на странице.... чувствуете разницу.
В заключении хотелось бы добавить, что данный алгоритм оптимизации графических файлов подходит для подготовки всех видов изображений для размещения в сети Интернет, будь то Ваша web-страница, какой то форум и т.д.
Просмотров: 26686
Спасибо, Андрей, полезная статья. Лично я пользуюсь для этих целей ACDSeePhotoManager-12.0, тоже неплохой вариант.
Извините, но в самом начале статьи есть описочки, которые следовало бы исправить вот так: "БОрОздя пространство Интернета(,) Вы наверняка обратили внимание, что большинство web-страниц просто напичканы различными изображениями."
С уважением, Вячеслав.
"
Андрей!Спасибо за Вашу заботу о начинающих.Больших творческих успехов.
Спасибо, Андрей!
Фотошоп мне не даётся никак, а Вы так доступно всё объяснили. Я всё думала, как обрезать картинки? Здорово!
Придётся,Андрей, открывать тебе и уроки фотошопа. Кстати, многим посетителям твоего сайта такая идея должна понравиться! Главное, что объясняешь ты всё очень просто и толково. Удачи!!!
Спасибо Андрей за доступное изложение материала. Конкретно и сама суть, ничего лишнего. Я вообще-то пользовался другими программами для изменения размера и не предполагал, что можно использовать фотошоп.
Добрый день,Дмитрий.К великому сожалению мне некому направить Вашу ссылку'сайт-визитка',а те ребята от которых я получаю многочисленные рассылки сами Блогеры.А хотелось бы начатое довести до конца(я насчёт 3-х последних уроков. С уважением,Виктор(nimoha@yandex.ru).
Спасибо большое за данный учебный курс. Хотя с Фотошопом и работал раньше, но очень полезно почитать и попробовать.
Спасибо.
Я не знаю никакого-такого Фотошопа, но уменьшаю веса страниц с помощью программы Riot в несколько раз, да еще делаю их кликабельными с помощью LightBox
большое спасибо! очень помог.
добрый день Андрей!
Пробовала делать сайт в ворд пресс но только свои фото очень много испортила и книги не открываются испорчены.Поэтому хочу пробовать через HTML.ДОЛГО НАВЕРНОЕ ПРИДЕТСЯ УЧИТЬСЯ.Большое спасибо кое-что и у вас почерпну,так по крупице может что-то и получится если сделаю сайт то обязательно и вашу рекламу помещу но сначала нужно научиться сайтостроению .и разным мелочам с уважением ГАЛИНА
Галина, если есть желание, что то постичь и чему то научиться, уверен, у Вас обязательно все получится!!!
|