Почему перед загрузкой картинки на сайт ее необходимо предварительно подготовить?

На это есть как минимум две очень веские причины. Первая – скорость загрузки страницы. Если вы загрузите на страничку не оптимизированную по размеру картинку, то она будет долго загружаться. Разница может достигать нескольких секунд. А если на страничке несколько неоптимизированных изображений – то это уже десятки секунд. Согласитесь, 10 секунд ждать загрузки страницы в наше время не приемлемо. Потенциальный клиент может уйти с сайта, так и не дождавшись его загрузки.

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

Вверху подготовленная картинка с помощью Photoshop, внизу исходная картинка, сжатая до того же размера браузером.

1. Изменить размер картинки в программе Photoshop

Откройте картинку в программе Photoshop. (Ctrl+O)

Измените размер картинки. Для этого нажмите (Ctrl+Alt+I) либо в меню Изображение -> Размер изображения. В появившемся меню введите необходимый размер. Обычно размер вводят в пикселях. Для примера введем 300 пикс.

2. Сохранить картинку.

Важно сохранить картинку с качеством достаточным для просмотра с экрана монитора не завысив и не занизив его. В большинстве случаев применим следующий метод. Нажимете в фотошопе (Ctrl+Shift+Alt+S) или в меню Файл –> Сохранить для WEB и устройств.

Из предустановленного набора выбираете «Высокое качество JPEG» и нажимаете кнопку «Сохранить» Далее указываете как обычно куда вам сохранить файл и под каким именем. Желательно чтобы имя было в английской раскладке и «говорящим» . Например (igla-1.jpg) это может быть важно для продвижения вашего сайта.

3. Далее заходите в систему управления сайтом.

Открываете редактор текстовой страницы, на которую вы хотите разместить картинку. На панели инструментов редактора нажимаете кнопку «Добавить/Изменить изображение». В появившемся окне напротив поля «Адрес» нажимаете кнопку «Просмотр». Откроется менеджер файлов, с помощью которого вы можете загрузить изображение в хранилище файлов на сайте. Рекомендуем не валить все файлы в кучу, а сортировать их по папкам. Для этого есть возможность создания и удаления папок. Кнопкой «Выберите файл» загрузите картинку, а затем нажмите на нее.

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

Если картинка находится внутри текста и вам необходимо чтобы текст обтекал ее, необходимо в свойствах картинки перейти на закладку «Положение» и установить свойство «Выравнивание» по левому краю. Аналогично делается обтекание текста с другой стороны. После этого желательно установить отступы текста от картинки, чтобы текст не «прилипал» к изображению. Достаточно установить 5-10 пискселей. Так-же вы можете установить рамочку вокруг изображения, указав ее ширину в поле «Граница».

4. Если вам необходимо сменить фон у картинки.

Откройте картинку в фотошопе. Откройте Окно «Слои» (Кнопка F7). Правой кнопкой нажмите на единственный слой Фон. Выберите пункт «Из заднего слоя» Затем создайте новый слой и переместите его ниже предыдущего слоя. С помощью инструмента «Заливка» залейте нижний слой необходимым цветом. После этого выберите снова Слой 0 и установите тип «Умножение» .