Как вставлять картинки в свой блог

---

Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

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

 

[A] Подготавливаем СВОИ картинки для использования в интернете

 

HTML тег <IMG> служит для внедрения рисунков в посты вашего блога (или на web-страницы сайта, что примерно тоже самое, - разная терминология).

Предварительно надо подготовить вставляемые картинки в любой из программ просмотра/редактирования рисунков или фотографий. Дело в том, что цифровые фотоаппараты обычно выдают снимки в виде JPG-файлов размером 1-2 Мегабайт или более.

Такие картинки, как правило, не годятся для публикации в интернете по 3 причинам:
1. не принято в web-е и не удобно смотреть рисунок, не влезающий на компьютерный экран. А фотки сейчас такие, что в естественном, не уменьшенном размере, экран монитора, наложенный на фотоснимок, будет занимать лишь 10-15% общей площади рисунка (или еще меньше);
2. если динамически ужимать фотографии до приемлимого размера (так и поступают все программы просмотра изображений), то мы достигнем цели очень дорогой ценой: файл рисунка на сервере будет занимать в 10-20 раз больше места, чем нужно, а там этот ресурс ограничен для каждого сайта, и за аренду дискового пространства сервера надо каждый месяц платить. Так зачем без всякой нужды платить скажем в 5 раз больше?
3. ну и следствием больших размеров файлов с цифровыми фотографиями - является излишний сетевой трафик и медленная скорость загрузки и показа изображений при интернет серфинге. Даже если у всех будет безлимитный доступ в интернет и скорость соединения 5-10 Мегабит в секунду (в Москве это уже вполне доступно для многих жителей (но далеко не всех, конечно), то и тогда - зачем загружать линии связи передачей информации, 90% которой никогда не будет востребована?

* * *
 
Нужна практически любая программа редактирования изображений (крутой Photoshop или, например, стандартная для MS Windows простенькая программа Paint):

Обычно вполне достаточно уметь делать следующее:
1. обрезать ненужные края рисунков (что называется "кадрированием")
2. и сжимать откадрированное изображение до нужных оптимальных размеров.
   
   – Для широко распростаненного в настоящее время "стандартного" разрешения экранов компьютеров 1024×768 пикселей (соотношение сторон экрана 4:3) - нет смысла хранить в интернете картинки с лучшим разрешением, чем 800×600 (или даже 400×300 с динамической растяжкой при показе прямо на вашем компе, что несколько убыстряет загрузку при некоторой потере качества). Это для горизонтальных фотографий типа "ландшафт".
   – Для фоток с вертикальным расположением ("портрет") разрешение можно еще уменьшить - до 640×480 (или меньше). Тут по высоте - примерно те же 600 пикселей (640 - заметим, что для вертикальных фоток принято сначала указывать высоту, а потом ширину).
   – Для "широкоформатных" соотношений сторон экрана 16:10 и 16:9 наиболее распространены сейчас разрешения 1280×768 или 1366×768 (15.6´ ноутбуки).
   Так как разрешение по вертикали при этом то же, что и для соотношения 4:3, то рекомендации аналогичные (высота изображений 600 пикселей).
   Но можно не углубляться глубоко в цифры, а все это делать "на глазок".
   Критерий прост:
   После сжатия, рисунок или фото в своем естественном виде (масштаб показа 100%) не должен вылезать за границы экрана.
   Часто пропорциональное уменьшение ширины и высоты до 40% от исходных величин изображения дает вполне подходящий результат.
3. давать файлам информативные имена в транслитерации (латиницей). Вместо пробелов ставим минусы, все остальные знаки препинания удаляем или заменяем минусами. Например: Greciya-Halkidiki-Sitonia-dom-Kostasa-Vid-na-more-2010-foto12.jpg.Такие имена ускоряют продвижение сайта в поисковиках (SEO) и дают дополнительные переходы из Яндекса или Google. Для автоматической транлитерации очень удобен онлайн-сервис на сайте translit.ru.
   Итак, в именах файлов изображений: только большие и маленькие латинские буквы, цифры и знак минуса!
   Если вы привыкли к Windows от Microsoft, то имейте в виду, что, как правило, в интернете большие и маленькие буквы различаются, ибо большинство WEB-серверов работают на Линуксе (операционной системе LINUX). Поэтому соблюдайте четко регистр букв в названиях файлов. Ну и уж конечно не путайте сходные по начертанию буквы из разных языков - используйте только английскую латиницу!

* * *
 
Как правило, для одной и той-же картинки надо готовить не один, а два или три файла. Сначала делаем большое изображение, потом его "эскиз" для предварительного просмотра - показа содержимого папки (галереи) с картинками. Если в предпросмотре 2 варианта: большие эскизы или маленькие значки, то тогда готовим еще и 3-ий файл. Эскизы - это замена английского термина "thumbnail", обозначающего миниатюру, сильно уменьшенную, но все же дающую понятие об оригинале.

Большие рисунки показываются по-одиночке, и поэтому можно не стандартизировать их размеры в пикселах (и лишь следовать рекомендациям, изложенным выше).

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

А вот ширина уже не так критична. Как минимум надо "застолбить" основные значения ширины для горизонтальных и вертикальных рисунков. Но можно разрешить и произвольную ширину.

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

* * *
 
1) Основной формат хранения изображений в интернете - JPG (или JPEG, что тоже самое). Этот формат позволяет иметь яркие и полноцветные фотографии с сохранением всех оттенков цветов. Прозрачность фориат JPG не поддерживает. Формат JPEG хорошо сжимает картинки, но с небольшими потерями. Поэтому мелкие детали могут еле заметно искажаться. Также с четкими краями - могут чуть размыться.
При сохранении картинок можно менять качество сжатия JPG-файлов (обычно это 75-85%). Чем выше качество, тем больше файл. Рекомендуем для обычных фоток - 75%, для маленьких файлов (скажем 150 х 150 пикселов) - 95%, а для крошечных - 100% или PNG. После сжатия картинок, JPG-файлы рисунков занимают обычно 5 -150 Килобайт - это оптимальный размер для интернета.

2) Для хранения очень маленьких значков, логотипов, микро-эскизов лучше подходит формат PNG. В отличие от JPG, он сжимает исходные точки цифровой фотографии без потери точности, что для крошечных значков немаловажно. Также хорош для изображений, содержащих текст, для графических рисунков и иллюстраций, схем, чертежей. Формат PNG поддерживает многоуровневую прозрачность, что позволяет хранить градиентный плавный переход между прозрачной и цветной областями картинок.
Можно использовать этот формат для мелких рисунков, предназначенных для предпросмотра, например как "эскизы" всех изображений данной папки с рисунками. Хотя неточности формата JPG на таких изображениях уже мало заметны и лучше хранить эскизы картинок также в JPEG. А тем паче не годится формат PNG для больших картинок во весь экран (это не экономно и замедляет загрузку страниц).

3)Можно еще использовать 3-ий формат GIF, но лучше не надо. И никаких других!

 

[B] Загружаем файлы изображений на сервер

На сайте, сделанном на CMS Drupal, это осуществляется так:

Раскрываем пункт "Вложенные файлы" ниже окон редактирования текстов
• Справа от поля "Прикрепить новый файл" нажимаем кнопку "Выбрать"
• Выбираем загружаемый файл, где он лежит на своем компьютере - и жмем "Открыть" (или "ОК") в окошке выбора файла
• Нажимаем кнопку "Прикрепить" и ждем пока файл загрузится на сервер
• Когда файл загрузится, то в списке вложенных файлов появится новая строчка. В колонке "Описание", ниже поля с именем только-что загруженного файла мелким шрифтом показывается полный путь к этому файлу на сервере. Берем (копируем) этот адрес и вставляем в тег <IMG> (Короткий адрес (без http://...) в самом поле не годиться для Друпала 6.16 (может быть в следующих релизах CMS Druppal этого бага уже нет?)) Читайте о различии абсолютной и относительной адресации.
• Завершаем очередную итерацию редактирования поста (нажимаем кнопку "Сохранить") и смотрим, что получилось.
• Опять нажимаем "Редактировать" и загружаем следующую картинку. И т.д....

Все загруженные картинки могут вызываться и из других постов. Не надо повторно загружать файлы рисунков, а просто берите адрес из старого поста и вставляйте в тег <IMG> нового!

 

[C] Вставляем РИСУНКИ на страницу, используя ТЕГ <IMG>

 

Сами картинки не вставляются непосредственно в ваши посты, там размещаются лишь ссылки на них. А сами файлы изображений отдельно хранятся обычно на том же сервере, где лежит и вся прочая информация ("контент") сайта. Можно вставлять ссылки и на картинки, лежащие на других сайтах, но это хуже для продвижения сайта в поисковиках.

Так вот, тег <IMG> и нужен для того, чтобы указать браузеру - откуда взять изображение и как его разместить (показать) на экране. Части тега <IMG> (далее: атрибуты, параметры) и делают все это. Все значения атрибутов лучше всегда заключать в кавычки: Атрибут="значение". Правда, в некоторых случаях, простые значения атрибутов распознаются и без кавычек, - но надежнее и безопаснее следовать стандарту и их (кавычки) "не забывать".
Мы не будем загружать вас всем разнообразием деталей кодирования параметров тэга <IMG>, а дадим здесь лишь самое необходимое и достаточное для успешной работы с ним!

Атрибуты (параметры) тега <IMG>:
• src="адрес" - задает адрес (URL) картинки (http-ссылку на нее). Пример пути к графическому файлу: src="/files/jpg/Halkidiki-Sitonia-dom-Kostasa-Vid-na-more-12.jpg". Делайте имена осмысленные - в транслитерации с минусами между словами. Эти имена также используются при поиске картинок!
• alt="текст" - Альтернативный текст (метка) для изображения. Появляется вместо картинки, если браузер не может ее загрузить (это бывает когда указан неверный адрес в src="URL", или когда картинки там нет - забыли подгрузить, или удалили. Еще это так бывает, если в браузере отключен показ картинок на момент просмотра)
• title="текст" - Всплывающая подпись изображения. Появляется при наведении на картинку курсора мыши. Можно (и именно так и лучше) присваивать атрибутам alt и title одно и тоже значение, но нужно обязательно задать хотя бы один из них, - при индексации картинок поисковые роботы возьмут отсюда название рисунка!
• align="left" - вызывает "обтекание" рисунка окружающим контентом (текстом или другими рисунками) и при этом данный рисунок прижимается к левому краю окна браузера;
• align="right" - также вызывает "обтекание" рисунка окружающим контентом (текстом или другими рисунками) и при этом этот рисунок прижимается уже к правому краю экрана;
• vspace="4em" - Вертикальный невидимый отступ сверху и снизу от рисунка до окружающего контента (в пикселах).
• hspace="10" - Горизонтальный невидимый отступ слева и справа от рисунка. Обычно всегда нужен в режимах обтекания, - чтобы ничего не слипалось!
• width="100%" - Ширина картинки в процентах от ширины экрана (точнее от общей предоставленной ширины на web-странице в браузере).

Процент 34-48 (width="40%") позволит размещать фотки парами по ширине: (например width="45%"), а 26-31% - тройками, и 21-23% - по четыре в ряд. Экспериментируйте! И не забывайте о необходимости пустых промежутков, например: hspace="2".

Не надо без нужды использовать атрибут (параметр) align. Например, если картинка (или группа картинок) занимает всю или почти всю ширину окна браузера (например width="100%"), то align="left"/"right" не имеет никакого положительного смысла, но в некоторых вариантах браузеров-операционок может дать неожиданные эффекты (наложение картинок друг на друга например). Безопаснее чередовать теги <IMG>: один с атрибутом align, следующий - без него, и т.д..

Если параметр align не задан, то рисунок распологается как-бы на правах очень большого слова в потоке текста. Он высится как колокольня в деревне. Текст прижат к низу (как хижины крестьян). Но если указать align="middle", то текст будет выравниваться на середину этой "колокольни". Это может в редких случаях пригодиться, если текстовки коротки (например, короткие названия рисунков справа от них). Никакого обтекания при этом нет (то есть только одна строчка текста может быть в ряду с картинкой-"колокрльней").

Если нужно выложить несколько картинок вместе, то лучше всего соответствующие теги <IMG> располагать один за другим вплотную, даже без пробела между ними. Если оставите пробелы между тэгами и в них присутствует параметр vspace, то при показе картинок может иметь место небольшая вертикальная "лесенка", а без пробелов - рисунки будут идеально равняться друг на друга. Итак, когда в ряду много картинок (как в примере ниже), то просто размещайте подряд несколько тегов <img> через пробел (если нет атрибута vspace) - и без атрибута обтекания align!
Чтобы при этом начать новый ряд рисунков, то откройте новую строку или абзац (вместо пробела между <img>-тегами - нажмите Enter, один или два раза. Это для нашего сайта, сделанном на Друпале. Иначе, для иных CMS, вставляются теги переноса строки <br />, или начала параграфа <p> и конца его </p>).

Всегда внимательно проверяйте как отображается пост с тегами <img>! Если их несколько в посте, то обязательно задавайте уникальные alt="текст.метка" в каждом из них. При каких-либо ошибках, вместо соответствующей картинки вы увидите прямоугольник, содержащий ее текстовую метку, заданную в атрибуте alt="текст". Так вы легко поймете, какой именно тег следует исправить. (Ну и для индексации и продвижения атрибут alt очень нужен, - об этом ниже).
 
И еще. Проверяйте как (хорошо ли) масштабируется пост (крутя колесико мыши при нажатой кнопке Ctrl). И конечно, при 100% масштабе все должно быть красиво и правильно располагаться (многие пользователи интернета не умеют масштабировать и все смотрят только в варианте 100%).

 

ВНИМАНИЕ! Чтобы картинки показывались, нужно сделать еще одно действие:

Ниже окна редактирования раскрыть пункт "Формат ввода" и выбрать режим "Full HTML"

 

 

[C+] Используем специальные кнопки для облегчение ввода/правки тегов

Если на сайте используется Drupal-модуль "редактор BUEditor":
 
Для размещения или правки тэга <IMG> в редакторе предусмотрена кнопка "Insert/edit image" (с пейзажем-Зарей на значке), облегчающая работу с этим тегом (хотя часто путь копирования старого тега и вставка его в новое место, с последующей ручной правкой - вполне приемлем и несложен).
 
Если вы скопировали существующий тэг <IMG> в новое место, то выделите (засините) его и нажмите ту же кнопку "Insert/edit image". Откроется окошко, где все можно будет исправить - для многих это удобнее, чем прямо редактировать текст тега вручную.
 
В диалоговом окне размещения/правки тэга <IMG> всего 6 полей (это в варианте нашего сайта, в исходном же варианте Друпала 6.16 было 4 поля, и не совсем таких). Смысл их очевиден. Можно заполнить не все поля (но поле "Image URL", конечно, обязательно), нажать "ОК" и посмотреть, что получилось, какой вставился тэг.
Потом, если что не так, опять нажать ту же кнопку "Insert/edit image" (не снимая выделения с тега), - и продолжить заполнение (или исправление, очистку) полей. И так до победы!
Робастно, вообщем с кнопкой, да и с самим Друпалом нормалек.

 

[!] Примеры использования тега <img>

 

1° В самом начале статьи вы видите рисунок, который обтекается текстом, но новый раздел уже начинается на свободном пространстве и уже не обтекается. Чтобы этого достичь понадобилось вставить в конец обтекаемого текста такой тег: <br clear="all"/> - пользуйтесь, бывает очень полезно и существенно улучшает внешний вид поста!
 

2° Этот тег покажет вам картинку, что вы видите ниже, растянутую на всю ширину:

<img width="100%" src="/files/jpg/1225988665.jpg" alt="Святая Гора Афон. Икона преподобного Серафима в трапезной (на игуменском месте) афонского монастыря Григориат" title="Святая Гора Афон. Икона преподобного Серафима в трапезной (на игуменском месте) афонского монастыря Григориат" />

Святая Гора Афон. Икона преподобного Серафима Саровского в трапезной (на игуменском месте) афонского монастыря Григориат

 

3° Примеры выстраивания картинок в ряды по горизонтали.
Во всех нижеприведенных тегах <img> стоит промежуток hspace="1", а width="49%" (для 2-х картинок в ряду) и т.д., приводим теги (не все, а по одному на ряд) и результаты их работы (для простоты мы опустили параметры alt и title, чего делать в реальной жизни конечно не надо):

2х <img width="49%" hspace="1" src="/files/jpg/1225988665.jpg"/>
3х <img width="32%" hspace="1" src="/files/jpg/1225988665.jpg"/>
4х <img width="23%" hspace="1" src="/files/jpg/1225988665.jpg"/>
5х <img width="18%" hspace="1" src="/files/jpg/1225988665.jpg"/>
6х <img width="15%" hspace="1" src="/files/jpg/1225988665.jpg"/>
7х <img width="12%" hspace="1" src="/files/jpg/1225988665.jpg"/>
8х <img width="11%" hspace="1" src="/files/jpg/1225988665.jpg"/>

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

 
4° Чтобы центрировать изображение по ширине страницы, то заключите весь <img>-тег в пару тегов: <div align="center"> .. </div>. Так можно центрировать не только фотографии, но и текст. И не путайте, не параметр <img>-тэга: <img align="center" (такого и нет), а параметр <div align="center"> контейнера: <DIV>.

---

 

[D] Об уникальности (оригинальности) изображений на ваших страницах

 

Если вы берете картинки из сети интернет, или даже ваши собственные, но которые уже выкладывались где-то в блогах или интернет-галереях, то скорее всего они уже давно проиндексированы Яндексом и Гуглом.
Новое размещение этой-же картинки уже будет трактоваться как "неуникальное" и даже как "плагиат".

Однако пока за это поисковики не "банят", но могут вас "пессимизировать", то есть увести с 1-ой, скажем, страницы выдачи по запросу (из ТОП 10), - на 15-ую! Это если ваши страницы уже "раскручены". Для мало раскрученных сайтов, такая пессимизация, если и будет иметь место, то почти не отразится на вашем "рейтинге" в поисковиках.

Так что всегда лучше размещать на ваших страницах только новые, еще "не засвеченные" в интернете, картинки!

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

И все-же на данный момент основное значение придается не степени уникальности самой картинки, а качественности подписей (параметры alt и title) и окружающего рисунок текста (который также запоминается!). Поэтому старайтесь больше, лучше и подробнее описывать каждое изображение!
Также именуйте сами файлы фоток правильно, информационно-емко и, конечно, по-русски (но латиницей, в транслитерации - так намного безопаснее).

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

Как ни странно, Гугл имеет довольно оригинальный подход к формированию подписей запоминаемых им картинок - часто он смотрит для этого текст над картинкой. Если прилегающий к фотке абзац мал, то просто берет начало этого текста в качестве подписи. Если же больше 2-3 строчек, то выхватывает какую-либо фразу ближе к концу абзаца (но не в конце). Получаются порой весьма занятные и неожиданные подписи! Если же картинки идут одна за другой без вклинивающегося между ними текста (и нет alt - title атрибутов с короткими подписями), то в качестве названия фоток Гугл обычно использует заголовок поста. Длина подписей - примерно 2-4 слова (около 30 символов), и примерно в 2.5 раза больше при "крупном" просмотре рисунков (до 80 символов).
Параметры же <img>-тега alt и title он также читает и запоминает, но использует эти тексты лишь при отборе релевантных страниц в выдаче текстового (!) поиска и, скорее всего, конечно же, и при выдаче релевантных изображений. Но не для подписей картинок! Круто!

Все вышесказанное (про Google подход) действует не всегда. Порой Гугль честно берет "канонические" подписи фоток из параметров alt и title тегов, а порой делает то так, то эдак. Полгода назад запомненные фотографии имели около 200 символов в подписи при крупном просмотре, а сейчас символов в новых подписях - более чем в 2 раза меньше. То ему не нравятся длинные подписи в тэге <img> (если название изображения в них превышает где-то 57 символов), то все ОК.

Когда Google все-же берет "канонические" подписи картинок из тэга <img>, то он может комбинировать разные методы. Например, если текст в атрибутах alt и title очень короток, то добавляются в конец к нему отрывки из текста над картинкой, как это и было описано выше про интересный алгоритм поисковика Google.

(И не пренебрегайте, конечно, уникальностью)...

 

---

Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги