Вставляем изображения на сайт правильно

В этом уроке мы научимся вставлять изображение на страницу сайта.

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

Пиксели? Какие такие "пиксели"?

Если вы не знаете, что такое пиксели и затрудняетесь ответить на вопрос, какого размера должно быть изображение, давайте попробуем в этом разобраться. Во-первых, отвечу на вопрос «почему изображение для страницы сайта необходимо оптимизировать». Дело в том, что большое изображение – это довольно тяжелый файл, его размер может достигать от 500Кб до 1.5 Мегабайт. Представьте, если вы разместите такое изображение на странице сайта и тем самым значительно уменьшите скорость загрузки страницы. Другими словами, при средней скорости соединения, пользователь будет долго ждать, пока изображение загрузится и, возможно, даже покинет ваш сайт.

Ну а, собственно,  пиксели - это такие маленькие точки (вы их можете рассмотреть на экране, если возьмете лупу). Изображение состоит из большого количества мелких разноцветных точек. Глаз их не различает, а в совокупности они составляют единую картинку изображения. Примерно как буддисты выкладывают из песчинок свои знаменитые узоры, так и тут, из пикселей получается картинка.

Большая ошибка

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

Что же делать?

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

Давайте посмотрим на его работу. Редактор находится по адресу www.pixlr.com Выберите русскую версию и перейдите в режим работы редактора. Для работы с изображением его необходимо сначала открыть, для этого выберите пункт меню Файл - > Открыть изображение или при первичном входе в редактора вам предлагается диалоговое окно из которого следует выбрать «Загрузить изображение с компьютера».

Выбираем изображение. Оно отобразиться в редакторе. Вы можете просмотреть истинный размер вашего изображения – наберите 100% в левом нижнем углу. Также можно перейти в пункт Изображение -> Размер изображения.

В этом же окне можно прописать новые размеры. Я рекомендую делать изображения не шире 200-250 пикселей по ширине. Этого достаточно, чтобы изображение аккуратно соседствало с добавленным вами текстом.

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

Все, на этом работа по уменьшению изображения закончена. Можно перейти к вставке изображения на страницу сайта.

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

Для добавления изображения на страницу сайта сначала кликните на то место, куда планируете вставить изображение. Затем воспользуйтесь кнопкой «Вставки изображения» на панеле визуального редактора.

После ее нажатия всплывет диалоговое окно, предлагающее выполнить несколько действий. На первой кладке представлена кнопка «Посмотреть на сервере», что это значит? Дело в том, что все файлы, которые относятся к сайту: его собственные файлы или те, которые вы хотите на нем использовать – картинки, Word-документы, Excel-документы – все это должно храниться на удаленной компьютере, который называется сервером.

Именно поэтому, перед тем как вставить изображение на страницу сайта, его необходимо закачать на сервер, туда, где находится ваш сайт. Все файлы закачиваются в стандартную папку Files. Это можно увидеть в режиме работы специального Файлового Менеджера, который показывает файлы на сервере. Я рекомендую аккуратно организовать работу и создавать папки с логическими именами, такие как docs – для документов, img – для изображений и т.д. Это упорядочит работу и сэкономит время в дальнейшем.

Делайте все аккуратно

Для создания папки выберите «New folder» (новая папка), впишите имя и нажмите ОК. Перейдите в нужную папку. Теперь давайте загрузим изображение на сервер. Выберете Upload files – загрузить файл, в диалоговом окне выберете изображение на вашем компьютере и после этого нажмите «открыть». В данный момент изображение будет загружено на сервер. Таким же образом можно загрузить группу изображений, предварительно выделив не одно, а несколько изображений и также нажав кнопку «открыть».

После загрузки, изображение появится в списке. Изображение можно просмотреть в специальном окне. Для использования изображения дважды кликните на его названии.Изображение будет вставлено в диалоговое окно вставки изображения.

Еще немного и...

Нам необходимо указать некоторые параметры перед тем, как изображение окончательно будет вставлено на страницу.

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

Выравнивание. Выравнивание по левому краю позволяет разместить изображение слева, а текст справа и наоборот: выравнивание по правому краю позволяет тексту обтекать слева.

Отступы – используются для указания отступов от изображения до текста и измеряются в пикселях. Например, можно выставить значение 10.

Если не указывать никаких параметров, в том числе и выравнивание, изображение будет размещено в общем потоке, то есть по порядку размещения: Изображение – под ним текст и т.д.

После вставки изображения, не забудьте сохранить страницу и проверить отображение картинки на странице сайта с которой вы работали.

На этом наш урок закончен.

Желаю успехов!
Ольга Мелех,
студия веб-дизайна "Интелвебс"