Данный мануал является продолжением материала опубликованного здесь парой постов ранее. Сегодня рассмотрим теорию и практику загрузки и публикации изображений и оформления материалов

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

Для начала вспомним об основных форматах картинок. Это: bmp, jpg(jpeg), gif, и наконец мой самый любимый - png. Конечно существует ещё с десятка два других форматов, но это основные. Формат bmp мы отметаем сразу из-за его громоздкости. И не стоит думать что если у вас картинка в формате bmp, то сменив расширение файлу, она стразу же потеряет и в "весе". С тем же самым успехом можно повесить на дверь табличну с надписью "окно", но от этого дверь окном не станет. Так что думаю с переименованием файлов всё ясно. Итак, у нас остаётся 3 формата с которыми мы и будем работать. При выкладывании картинок к новостям на сайт, скрины программ на форум и т.д. (т.е. те изображения, которые не требуют супер высокого и детального качества) мы преследуем одну цель - максимально быстрая загрузка этих изображений. Т.е. в итоге, человек просматривающий ваш пост, сможет максимально быстро увидеть ваше изображение. Кроме того, при подготовке материала, меньшее по "весу" изображение, уйдёт (т.е. загрузится) на сервер за меньшее время. А соответственно это уже ваше сэкономленное время.

Какие инструменты нам понадобятся для работы? Тут выбор хоть и однозначен, но довольно широк. Да и ответ прост - любой современный графический редактор, умеющий работать с вышеназванными форматами. Лично я использую классику - Adobe Photoshop. На его примере и будет проведён урок.

Для начала выберем картинку с которой будем работать. Для урока я взял случайную картинку найденную через поиск изображений google. С помощью своего браузера я могу сразу вставить её в фотошоп, не сохраняя на диск.

Создав новый файл в фотошопе (ctrl+n или через меню file->new и нажав enter), вставляю в него скопированное изображение (ctrl+v или через меню edit->paste)

Для того чтобы подогнfть картинку под нужный размер, зайдём в меню Image->Image size, и поставим нужные размеры высоты и ширины изображения. Здесь стоит обратить внимание что если отмечена внизу опция Constain Proportions, то в зависимости от изменения ширыны, будет пропорционально изменяться высота изображения, и наоборот. Естественно, что чем меньше размер изображения, тем меньше конечный размер файла. Но так же не следует забывать и о том, что нам нужно подобрать оптимальный размер. Так же, важным является то, что при большой ширине или высоте икартинки, страничку где это изображение будет находиться, может растянуть вширь или ввысь, и это тоже не совсем удобно для просмотра и является дурным тоном.

Переходим к последнему этапу - сохранению. В программе Adobe Photoshop начиная с 6 (кажется) версии, есть возможность сохранять изображения для мобильных устройств или веба. Т.е. как раз для тех случаев, когда высокое качество картинки не требуется. Этим пунктом мы и воспользуемся. Идём в меню file->save for web & devices

Именно здесь мы выбираем то, над чем мы в итоге работали. В правом верхнем углу выбираем тип файла. В левом нижнем углу смотрим на размер итогового файла. Стоит выбирать только три вышеописанных формата: jpg, gif и png. В данном меню мы работаем с типом файлов png-8. По иллюстрации ниже, видно, что размер нашего файла будет 22 килобайта. Это довольно неплохо, хотя пожно сделать ещё меньше.

Нажав на кнопку save - сохраняем результат нашей работы. Далее прассмотрим варианты публикации изображений.

Чтобы приложить картинку к посту или статье, можно воспользоваться встроенными средствами дополнения картинок. Для этого достаточно нажать на "обзор", и сразу же будет сгенерирован код картинки для вставки её в нужное место в тексте

после этого, данный код, вставляем туда куда задумывалось. в нашем случае, картинка только одна, поэтому и номер у кода к ней - 1. номер кода возрастает при добавлении картинок (нажать на "+" чтобы добавить ещё строки для добавления).
после того, как материал скомпонован по вашему усмотрению и желанию, нажимаем на "добавить ответ". выбранные картинки загружаются на наш сервер и им автоматически присваевается водяной знак (watermark) с названием нашего сайта

Удачного всем постинга!