Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 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-страница, какой то форум и т.д.

 

Просмотров: 18218


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Вячеслав
Дата: 2010-07-02

Спасибо, Андрей, полезная статья. Лично я пользуюсь для этих целей ACDSeePhotoManager-12.0, тоже неплохой вариант. Извините, но в самом начале статьи есть описочки, которые следовало бы исправить вот так: "БОрОздя пространство Интернета(,) Вы наверняка обратили внимание, что большинство web-страниц просто напичканы различными изображениями." С уважением, Вячеслав. "

Комментарии добавил(а): валерий
Дата: 2011-02-06

спасибо

Комментарии добавил(а): Константин
Дата: 2011-07-28

Андрей!Спасибо за Вашу заботу о начинающих.Больших творческих успехов.

Комментарии добавил(а): Татьяна
Дата: 2011-08-07

Спасибо, Андрей! Фотошоп мне не даётся никак, а Вы так доступно всё объяснили. Я всё думала, как обрезать картинки? Здорово!

Комментарии добавил(а): Олег Гузь
Дата: 2011-08-07

Придётся,Андрей, открывать тебе и уроки фотошопа. Кстати, многим посетителям твоего сайта такая идея должна понравиться! Главное, что объясняешь ты всё очень просто и толково. Удачи!!!

Комментарии добавил(а): Виктор
Дата: 2011-08-08

Спасибо Андрей за доступное изложение материала. Конкретно и сама суть, ничего лишнего. Я вообще-то пользовался другими программами для изменения размера и не предполагал, что можно использовать фотошоп.

Комментарии добавил(а): Виктор
Дата: 2011-08-08

Добрый день,Дмитрий.К великому сожалению мне некому направить Вашу ссылку'сайт-визитка',а те ребята от которых я получаю многочисленные рассылки сами Блогеры.А хотелось бы начатое довести до конца(я насчёт 3-х последних уроков. С уважением,Виктор(nimoha@yandex.ru).

Комментарии добавил(а): Александр
Дата: 2011-08-08

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

Комментарии добавил(а): дядя Валера, эсквайр
Дата: 2012-02-26

Я не знаю никакого-такого Фотошопа, но уменьшаю веса страниц с помощью программы Riot в несколько раз, да еще делаю их кликабельными с помощью LightBox

Комментарии добавил(а): павел
Дата: 2012-03-21

спасибо за ваш труд

Комментарии добавил(а): aleks
Дата: 2012-12-26

большое спасибо! очень помог.

Комментарии добавил(а): Галина
Дата: 2014-12-01

добрый день Андрей! Пробовала делать сайт в ворд пресс но только свои фото очень много испортила и книги не открываются испорчены.Поэтому хочу пробовать через HTML.ДОЛГО НАВЕРНОЕ ПРИДЕТСЯ УЧИТЬСЯ.Большое спасибо кое-что и у вас почерпну,так по крупице может что-то и получится если сделаю сайт то обязательно и вашу рекламу помещу но сначала нужно научиться сайтостроению .и разным мелочам с уважением ГАЛИНА

Комментарии добавил(а): АндрейК
Дата: 2014-12-05

Галина, если есть желание, что то постичь и чему то научиться, уверен, у Вас обязательно все получится!!!

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT