Как подготовить рисунок для публикации на сайте

foto8-1Сфотографировал цифровой камерой, скачал на компьютер, поставил фотку на сайт и … пролетел! Фотка слопала 1,5 мегабайта памяти и сильно тормозит открытие сайта. А если в статье пяток фоток, то вашему сайту капут. Надо фотки подготовить для публикации. Как космонавтов: убрать лишний вес и лишний размер.

Кратко это выглядит так. Вы открываете фото любым редактором, например, Photoshop или Paint, и выбираете соответствующие параметры: размер не более 480х360, вес до 20 кБ, качество для web. Сохраняете результат под новым именем и закрываете редактор. Теперь фотку можно ставить на сайт. Возвращаемся на два шага назад: исходник надо сохранить!

Для быстрой работы лучше всего воспользоваться редактором Microsoft Office Picture Manager, который есть на каждом компьютере.

Наводите курсор на нужную вам фотографию, нажимаете правую клавишу мышки, в открывшемся окне выбираете Microsoft Office Picture Manager. Открывается редактор и ваша фотография. Для удобства я выбрал в меню масштаб 30%.

Василий Сенченко Как подготовить рисунок для публикации на сайте Василий Сенченко Как подготовить рисунок для публикации на сайте шаг 1

Дальше я произвожу кадрирование фотографии, отрезаю лишнее. Для этого есть функция в меню «Рисунок — Обрезать». Для изменения рамки фотографии надо навести курсор на рамку с любой стороны и переместить рамку. Точные размеры вы можете установить в таблице справа. Надо соблюдать пропорции сторон фотографии 1:1,33. Ширина фотографии должна быть в 1,33 раза больше высоты. Или выберите размер 1:1. Выбор за вами!

Размеры фотографии вы определяете сами, исходя из задач. В фото-редакторе предлагают размеры в пикселях:
1024х768 — для фото на всю страницу формата А4 (1,33)
448х336 — для размещения фото на своем сайте в интернете (1,33)
160х160 — для фото в почте (1х1).
Размеры фото могут быть любые, лишь соблюдалась пропорция одной стороны к другой стороне 1:1,33.

Youtube также предлагает размеры видео 420х315, 480х360, 640х480, 960х720 пикселей. Это тоже золотое сечение 1:1,33.

Во всех случаях вы подгоните размер рисунка по ширине к своей колонке на сайте, а высоту высчитаете из пропорции. Например, у вас ширина сайтбара (боковой колонки) 220 пикселей, а вы хотите поместить фото размером 480х360. Составляем пропорцию и вычисляем высоту фотографии:
480 — 360
220 — х
х=220х360/480=165 пикселей.

Исходную фотографию, скадрированную и обрезанную вы видите ниже.

Василий Сенченко Как подготовить рисунок для публикации на сайте шаг 2

Василий Сенченко Как подготовить рисунок для публикации на сайте шаг 3

После этого выбираете в меню функцию «Рисунок — Сжать рисунки». Справа выбираете «Сжимать для web-страниц». Чуть пониже сразу видите результат. Было 1,68 МБ, стало 24,9 кБ. Фотография потеряла в весе очень много, она стала легче в 67 раз. Да и в размерах стала меньше в 3 раза.

Василий Сенченко Как подготовить рисунок для публикации на сайте шаг 4

Вот теперь нажимаете кнопку «ОК».

Затем в меню выбираете «Файл — Сохранить как» и сохраняете конечный результат своего труда в нужную вам папку. Не забудьте приписать к новому названию «web», чтобы отличить исходник и итог.

Василий Сенченко Как подготовить рисунок для публикации на сайте шаг 5

Теперь можно закрыть редактор, для этого есть либо крестик вверху справа, либо в меню «Файл — Выход». Редактор закричит «Есть несохраненные изменения. Сохранять?» Твердо отвечайте — не сохранять.

Василий Сенченко Как подготовить рисунок для публикации на сайте шаг 7

Вот и все действия. За одну минуту вы подготовили фотографию для публикации в интернете.
Василий Сенченко итоговая фотография шаг 8

Сохраните для своего удобства инструкцию на компьютере (188 кб), скачать инструкцию «Как подготовить рисунок для публикации на сайте»

Редактор Microsoft Office Picture Manager предоставляет еще некоторые возможности. Можно отразить фотографию, как в зеркале. Можно изменить размеры фото, отрегулировать яркость и контрастность фотографии, устранить эффект красных глаз. Меню очень дружелюбное, вы легко поймете его.

Успеха вам,
Василий Сенченко

Как подготовить рисунок для публикации на сайте: 5 комментариев

  1. Светлана Молодежникова

    Приветствую. Василий!
    Обращаюсь к твоим первопроходцам. У меня в каталоге шпаргалок блоггера много внимания уделяется графике. Ее редактированию, надписям, и прочим вещам. так нужным для оформления блога. Все это я собирала в Интернете по крупицам, многое применяла сама по наитию. я использую несколько бесплатных программ. Кстати можно кое что найти и на моем сайте. например- как сделать надпись на фотографии или рисунке samolod.info/?p=2190

  2. Владимир

    Василий! Замечательно! Есть много программ и фишек для редактированния размера фотографий. Многие я с успехом применяю сам. Но этот прием мне понравился. И я с удовольствием воспользуюсь этой программой! pro125.ru

  3. Сергей Николаевич

    Приём просто превосходный, лёгкий и простенький. Минутка+!

  4. Василий Сенченко

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

    Пробелы между словами запрещены, надо ставить дефис или подчеркивание.

    Рассмотрим пример. На компе рисунок называется «Моя собака 24.jpg». Для закачки на сайт надо создать копию и переименовать её, например, в такое: my_dog-24.jpg

  5. Василий Сенченко

    Фото, которое вы получаете со своего цифрового фотоаппарата весит очень много, обычно 2,5 МБ (2500 кБ), и позволяет напечатать большую фотографию 210 на 297 мм размером хорошего качества. На обычном сайте достаточно фотографии размером 10х12 см.

    Хотите, чтобы ваши посетители долго оставались на вашем сайте и рассматривали ваши картинки, которые будут быстренько загружаться и не тормозить? Дам ещё одну рекомендацию: загружайте на сайт картинки весом в несколько килобайт. Обычно картинка весит получается от 10 до 30 кБ. Картинку весом более 100 кБ ставьте в крайнем случае.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *