1. [A] Готуємо СВОЇ картинки для використання в інтернеті
2. [B] Завантажуємо файли зображень на сервер
3. [C] Вставляємо МАЛЮНКИ на сторінку, використовуючи ТЕГ <IMG>
4. [C +] Використовуємо спеціальні кнопки для полегшення введення / редагування тегів
5. [!] Приклади використання тега <img>
6. [D] Про унікальність (оригінальності) зображень на ваших сторінках

Щоб розміщувати малюнки в ваших постах, можна обходитися по-простому - "ручний" вставкою тега <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] Завантажуємо файли зображень на сервер

Розкриваємо пункт "Вкладені файли" нижче вікон редагування текстів
• Праворуч від поля "Прикріпити новий файл" натискаємо кнопку "Вибрати"
• Вибираємо файл завантаження, де він лежить на своєму комп'ютері - і тиснемо "Відкрити" (або "ОК") у віконці вибору файлу
• Натискаємо кнопку "Прикріпити" і чекаємо поки файл завантажиться на сервер
• Коли файл завантажиться, то в списку вкладених файлів з'явиться новий рядок. У колонці "Опис", нижче поля з ім'ям тільки-що завантаженого файлу дрібним шрифтом показується повний шлях до цього файлу на сервері. Беремо (копіюємо) цю адресу і вставляємо в тег <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 = "10" - Вертикальний невидимий відступ зверху і знизу від малюнка до навколишнього контенту (в пікселах).
• 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>).

[C +] Використовуємо спеціальні кнопки для полегшення введення / редагування тегів

[!] Приклади використання тега <img>

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

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

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.

(І не нехтуйте, звичайно, унікальністю) ...