Ни один вебмастер не может обойтись без знания того, как работать с картинками.  Ведь благодаря им каждый сайт становится "отличным от других". Красивый header, называемый ещё "шапкой", привлекательный футер, эффектные модули, - всё это основано на картинках, или images.
Именно так и называется одна из корневых папок Joomla! , в которой хранятся все картинки сайта - как вспомогательные, так и предназначенные для иллюстрации материалов. Сегодня мы поговорим обо всём, что связано с картинками. И начнём   с самого начала, т.е. с общих настроек сайта.

Шаг 1. Откройте в админке меню Сайт>>Общие настройки>>Система и прокрутите окно вниз до раздела Установки Медиа менеджера. В строках "Путь к папке с Медиа" и "Путь к папке с Изображениями" по умолчанию прописано:  images/stories.

Я пришла к выводу, что это жутко неудобно по двум причинам:
1) удлиняется путь к каждой конкретной картинке;
2) когда мы хотим вставить картинку в статью, то при нажатии в редакторе на кнопку "Изображение" нам открывается только папка stories, ну и, естественно, все те папки, которые в ней находятся. Если же нужная картинка находится в папке images, то извлечь её через кнопку редактора не получается.

Что я стала делать? - да просто удалила в общих настройках /stories, оставив только images:

Рис.1

В следующей строке "Допустимые расширения для картинок" я оставила только те расширения, которые действительно использую: это картинки в формате gif, png, jpg.
По окончании сохранила произведенные изменения в настройках.

Внимание! Вышеуказанное удаление папки stories не означает, что она вообще удаляется с сайта, - просто мы как бы понизили её статус.

Шаг 2. Создание папок в папке images.

Как только я создаю новый раздел для материалов, я тут же создаю под него и папку для картинок. Например, на этом сайте есть раздел "Разное", и под него создана папка "raznoe". В разделе есть категории, поэтому в папке raznoe создаю новые папки, уже под категории этого раздела.

В папку stories я складываю вспомогательные картинки, т.е. те, что отражаются везде, помимо статей. Их я тоже раскидываю по папкам.

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

Где брать картинки для сайта?

Если у вас нет своего фотоаппарата, то найти картинки можно на бесплатных и платных хостингах. С тех пор, как у меня появился свой Canon EOS 450D, я почти перестала посещать эти хостинги, но иногда заглядываю на тематический http://www.freeimages.com . Нужную картинку здесь легко подобрать, потому что они классифицированы по категориям, а также на сайте хорошо работает поисковая система (правда, писать запрос надо на английском, но словари-то у вебмастера всегда под рукой, правда?).


Как определить размер картинки, хранящейся на компьютере?

Нажмите на выбранную картинку правой кнопкой мыши и дождитесь появления окошка, в котором в самом низу есть строчка "Свойства". Нажмите на неё, а в новом окне откройте вкладку  "Подробно". Именно здесь вы отыщете не только размер изображения, но и его "вес":

Рис.2

 

Как подготовить картинку к показу на сайте?

Спору нет, самый лучший графический редактор - это, конечно, Фотошоп. Помню, я сутками изучала его многочисленные возможности, - до тех пор, пока не поняла, что для работы с картинками для сайта требуется всего-то ничего: уменьшить, подкрасить, обрезать, вырезать, скомпиллировать, подчистить, ну, и ещё кое-что по мелочам. Главное, что мне в нём нравится - это оптимизация изображений, то есть уменьшение "веса" для того, чтобы картинки легко грузились даже для тех посетителей, у которых никакущая интернет-связь.

Размер картинок я ставлю в зависимость от того, в каком месте собираюсь их показывать и в какой форме. Например:

1) используя практически во всех уроках плагины рокбох,  специально для них готовлю большие картинки размером, не превышающим в ширину 900 рх. Картинки предпросмотра рокбокс создаёт автоматически в соответствии с заданными параметрами. Если мне захочется иметь превьюшку другого размера, то я создам её самостоятельно, подписав в соответствии с требованием рокбокса, т.е. так: image_thumb.jpg

2) иногда я использую эффект увеличения картинки при наведении на неё курсора (как он создаётся в визуальном редакторе, описано в соответствующем уроке). В этом случае готовлю маленькое и большое изображения; размер большого не увеличиваю в ширину более, чем до 400-500 рх, - с тем, чтобы оно полностью помещалось в ширину статьи.

3) чаще всего на сайтах используется линковка маленького изображения на его увеличенную копию. В этих случаях я, как правило, делаю размер большого изображения от 900 до 1024 рх в ширину. Оптимизированная в фотошопе картинка имеет небольшой вес и грузится быстро.
Однако бывают случаи, когда требуется показать, например, карту, а уменьшение размера не даёт возможности посетителям рассмотреть её подробно и ясно. Тогда приходится идти на уступки качеству, невзирая на большой вес изображения.

4) изображения можно демонстрировать через галереи, слайдшоу, модули. Здесь сначала следует познакомиться с параметрами расширения, и  при подготовке картинок к показу отталкиваться от установок разработчика, а в случае модулей - ещё и от возможностей шаблона. Например, вы ставите в левую позицию модуль random_image. По шаблону ширина её всего 160-200 рх, и, если ширина помещаемых в модуль картинок будет более этого размера, то они будут либо "обрезаться", либо "наезжать" на поле для материалов сайта.

 Где и как прописываются параметры картинок статей?

Если вы заботитесь о комфортном пребывании посетителей на сайте, а также о поисковой оптимизации, то должны уделить время на прописывание параметров картинки. Мы остановимся на этом важном моменте подробнее:

1. Не секрет, что есть пользователи, имеющие ограниченный интернет-трафик. Из-за этого они вынуждены отключать в браузере функцию показа изображений, и тогда на месте картинки будет пустое место в рамке. Однако, если на пустом месте будет стоять описание картинки, то, возможно, у посетителя появится желание либо необходимость просмотреть её. Значит, изображения нуждаются в описании (заголовке).

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

2. Ниже я размещаю любимую фотографию своего внука, обожающего вести взрослые разговоры со всеми подряд. Фото не очень качественное, но в данном случае я использую его в качестве иллюстрации к более важным вещам. Вы видите небольшое изображение, его размер 300х225 рх, и оно залинковано на большое изображение - 800х600рх.

Большое изображение я назвала leto.jpg , маленькое - S_leto.jpg . Это моя собственная система названий, выработанная в результате работы с огромным количеством изображений. Ниже я объясню, в чём состоит удобство "системы".

Итак, вот картинка:
Здесь я разместила её так: поставила курсор после слова "картинка" и нажала на кнопку "Изображение" в нижней панели редактора. Открылось окно папки images, где у меня в папке demo лежат  картинки для этого урока:

Рис.3
Обратите внимание, что в окошке редактора картинки по размеру  совершенно одинаковые, отличаются только названиями. На какое нажать, чтобы вставить в статью маленькое изображение? - было бы легко запутаться, если бы не названия картинок: я твёрдо знаю, что нажать мне сейчас надо на S_leto.jpg, потому что в моей системе приставка S_ указывает на то, что именно это изображение и есть меньшее по размеру.

После того, как я нажму на картинку, путь к ней отразится в строчке "Адрес (URL) картинки". Далее я даю картинке заголовок "Лето в деревне", выбираю позицию (выравнивание) "справа" (это означает, что картинка встанет справа от того места, где был поставлен курсор). Теперь я копирую путь к картинке, а  затем нажимаю на кнопку "Вставить":

Рис.4

Картинка встала на место, и теперь, если подвести к ней курсор,  покажется заголовок "Лето в деревне" :

Рис.5

Далее мне надо залинковать "малышку" на большое изображение, поэтому нажимаю сначала на неё, а потом на "цепочку" в панели редактора. Откроется окно, в котором я вставлю в строчку URL скопированный ранее путь к маленькой картинке. Затем  уберу из названия картинки приставку S_, выберу в строке Target   параметр "Open in  new window" (открыть в новом окне); заголовок пусть будет такой же - "Лето в деревне". Всё, жмём на  кнопку Insert:

Рис.6

Теперь трудолюбивые роботы с удовлетворением воспримут нашу плодотворную работу с изображениями, и вскоре картинки с нашего и вашего сайта появятся в каталогах картинок поисковиков.

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

Осталось сказать несколько слов по поводу форматов изображений. На Рис.1 вы видите, что я оставила в общих настройках сайта три наиболее востребованных формата : jpg, png  и gif .

Одна и та же картинка (например, leto) может быть в нескольких форматах:
leto.jpg, leto.png, leto.gif.  Но меньше всего leto будет весить в формате jpg.

Я использую все три формата: то, что моргает, кружится и подпрыгивает, заодно и  подмигивает - это gif-ки; картинки на прозрачном фоне (например, оранжевые стрелки "Наверх") - это png-шки (их у меня особенно много на сайте о Павловске, где и шаблоны прозрачные); остальные изображения - это jpg-шки. 

Уясним это  более наглядно.

Начнём с GIF. Чаще всего в этом формате используются анимированные картинки. В целях сегодняшнего урока я отыскала в интернете нужное мне изображение и сохранила его к себе на компьютер под названием shapka.gif  . Вот оно:

Чудесная, хоть и грустная, "джифка", создающая впечатление реально идущего дождя. "Вес"  данной картинки 327 КБ.

Окрываю gif-картинку в Фотошопе, а потом  сохраняю её под тем же названием - shapka, но уже в другом формате - .jpg, и теперь картинка подписана так: shapka.jpg . Выглядит она совсем по-другому: анимация исчезла, остался только намёк на дождь. "Весит" картинка  всего 30 КБ .

1. shapka.jpg


Теперь, ничего не меняя, ещё раз сохраняю картинку, но уже в формате .png.
Различия в изображениях (1)  и (2) почти незаметны, только
shapka.png  "весит" побольше - 58 КБ .

2. shapka.png

А теперь ещё немного поработаем в Фотошопе  с картинкой shapka.jpg, сохранив её попозже в PNG . Лично я просто обожаю данный формат, потому что именно он позволяет придать картинке столь любимую мною прозрачность ( в чём вы легко можете убедиться, посетив самый первый  сайт вашей училки - pavlovsk-spb.ru .

Итак, открываем в Фотошопе картинку shapka.jpg. Видим, что слой  "Фон" заперт на ключ:

Иллюстрация

Щёлкнем  дважды левой кнопкой мышки по этому слою, а потом в выпавшем окошке нажмём на "ОК". Всё, можем спокойно убирать с картинки всё, на наш взгляд, лишнее. Для этого нажмём кнопку  инструмента "Волшебная палочка", определим допуск (я поставила 30) и начнём, как волшебница из сказки, прикладывать палочку (опять же левой кнопкой мышки) к тем местам, которые намерены убрать. Ориентируемся на мерцающий контур, выделенный палочкой: если согласны с получившимся вариантом, нажимаем  на клавиатуре  кнопку "Delete":

Иллюстрация 

Таким вот образом удаляем всё, что нужно удалить в соответствии с нашим замыслом, а чтобы проверить, не осталось ли "крошек", давайте добавим новый слой и зальём его для контраста черным цветом:
Иллюстрация

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

Разумеется, есть и другие варианты выделения картинки, - я остановилась лишь ну на самом простом, ну проще некуда.

Почему я так подробно остановилась на форматах картинок? - да потому что все они применяются в шаблонах Joomla!. Например, вы не сможете обойтись без  PNG, если правите логотип сайта. Бэграунды, шапки тоже часто делаются в этом формате.

Так что выбирайте формат в зависимости от своих нужд и предпочтений, и творческих вам успехов!

 

Поделиться: