Здрастуйте, шановні читачі блогу . Про те, які саме формати растрової графіки Gif, Png, Jpg) і в яких випадках краще всього використовувати для вставки картинок на сторінки свого сайту, ми детально встигли поговорити з статті, посилання на яку наведено трохи вище.
Сьогодні ми детально розглянемо всі аспекти використання тега Img для вставки зображень, подивимося як встановити обтікання фотографії текстом в Html коді, дізнаємося як використовувати зображення в якості фону для сайту, як змінювати їх розмір і задавати вирівнювання (по центру, вправо та вліво).
Використання тега Img і його атрибутів Src, Width і Height
Отже, давайте подивимося, як можна використовувати графіку на своєму сайті. По-перше, це можливість вставки зображення як елемента (об’єкта) в Html-код сторінки. Як раз саме така вставка здійснюється з допомогою Img, який є особливим — рядковим елементом з замещаемым контентом, до яких належать лише чотири елемента мови гіпертекстової розмітки, одні з яких ми вже згадали, а три інших — Iframe (сучасний варіант використання фреймів), Object і Embed (для вставки відео та іншого медіа контенту).
Поводиться він в точності як рядковий елемент, але всередині нього з’являється сторонній зовнішній контент (фото в разі Img або відео і флеш у разі Object і Embed). Будь-який з цих чотирьох елементів передбачає наявність зовнішнього файлу, який буде подгружаться ось у цю саму область, задану в ньому атрибутами.
Для вказівки шляху до графічного файлу, який повинен подгружаться на сторінку, служить спеціальний атрибут Src.
Браузер користувача при розборі Html коду сторінки, як тільки зустріне в ньому тег Img, одразу ж створює область для рядкового елемента, в яку завантажується зовнішній файл (наприклад, фотографія). Шлях до файлу браузер бере з вмісту Src.
Коли зображення починає завантажуватися з вашого сервера на комп’ютер користувача, браузер визначає істинні розміри цієї картинки і розсовує на ці самі розміри ту малу область, яку створив при виявленні в коді елемента Імг.
Якщо ви хочете, щоб браузер відразу ж виділяв для цього елемента область потрібного розміру, а не потім її зраджував при отриманні даних про розмір завантажуваного зображення, то ви повинні обов’язково вказати атрибути Width і Height.
Якщо ви задали їх, то тоді браузер користувача створює область з потрібними розмірами і туди вже буде вписувати ваше фото, навіть якщо воно іншого розміру. До речі, іноді доводиться зустрічати на сайтах початківців вебмайстрів таку помилку.
На сервер заливається графічний файл величезного розміру і вагою в декілька мегабайт (відразу після фотографування без обробки) і прописується до нього шлях у Src. А для того, щоб зображення займало б весь екран, в тег Img дописують Width і Height з прийнятними розмірами по ширині і висоті.
І що виходить в результаті? Відвідувач такого сайту спостерігає гнітюче повільну підвантаження зображення в порівняно малу область, задану у згаданих атрибутах (кілька мегабайт ваги вписуються в розмір 300 на 400 пікселів).
Тому відразу ж робіть картинки для викладання у Веб того самого розміру, який ви будете показувати на сайті і прописувати у Width і Height тега Img. Поважайте своїх користувачів і не витрачайте даремно їх трафік (особливо мобільний). Стиснути фото можна, наприклад, в FastStone Image Viewer або будь-якому іншому графічному ректора, наприклад, онлайн фотошопі Пикслр.
До речі, крім завчасного зменшення розміру зображень для вставки на сторінки сайту, слід з усією ретельністю підійти ще й до оптимізації ваги. Деколи можна без втрати якості домогтися кратного зменшення ваги графічних файлів, що призведе до значно швидшого їх завантаження і зниження навантаження на сервер хостингу. Можете для цієї мети скористатися дуже зручним і ефективним онлайн сервісом по оптимізації зображень.
Тепер давайте подивимося, яким чином можна вказати шлях до файлу з зображенням у Src тега Img. Власне, можна використовувати і відносні та абсолютні посилання, про яких я вже досить докладно писав у наведеній статті. Все залежить від нюансів і зручності.
Тобто Src може містити, наприклад, такі записи:
У першому випадку, графічний файл повинен лежати в тій же папці, що і файл вашої веб сторінки (у разі використання вами CMS, перші два варіанти вам навряд чи підійдуть, хоча для завдання фонового зображення в CSS це дуже зручно). У другому випадку, графіка лежить у вкладеній папці щодо файлу вашої сторінки, ну, а в третьому випадку, у Src вказаний абсолютний шлях до файлу з картинкою.
І тут слід звернути увагу, що картинка, яку ви вставляєте в Html код, може лежати абсолютно на будь-якому сервері. Тобто ви можете, припустимо, скопіювати шлях до неї на моєму блозі і вставити цей шлях атрибут Src тега Img на своєму сайті. Все буде прекрасно працювати, правда, якщо я не забороню подібні дії .htaccess на своєму сервері, але це вже окрема пісня (погуглите на тему «Захист від хотлинков»).
Взагалі, за правилами мови Html, на вашому сервері зобов’язаний перебувати тільки сам документ (web-сторінка), а всі інші документи і файли (графіка, відео, скрипти, стилі), які будуть подгружаться разом з ним, можуть знаходитися на різних серверах.
У цьому, до речі кажучи, полягає один із способів підвищення швидкості завантаження. Та й ті ж самі лічильники відвідувань, які ви напевно буде використовувати на своєму ресурсі для спостереження за статистикою відвідуваності, теж будуть завантажувати свої інформери і скрипти з відмінних від вашого хостів.
Як вставити картинку з посиланням, призначення Alt і Title до Img?
Якщо Img по своїй суті є рядковим елементом, то його можна просто вважати великою літерою, а значить нам ніщо не заважає зробити зображення посиланням, уклавши цей тег всередину гіперпосилання. Взагалі, про це я вже досить докладно писав у недавній статті про створення гіперпосилання в Html коді, але трохи повторитися буде не гріх.
У браузері IE навколо картинки, яку ви зробили посиланням, з’явиться рамочка шириною в три пікселя. Щоб її прибрати, вам потрібно буде додати в тег Img атрибут Border зі значенням нуль:
Для всіх тих випадків, коли графічний файл з яких-небудь причин не може подгрузиться разом з Html-документом (шлях до нього прописаний не вірно чи ще щось), передбачений спеціальний атрибут Alt.
Alt виконує роль альтернативного подання зображення. Що відбувається в тому випадку, коли графіка не вантажиться? Браузер все одно, виявивши в коді елемент Img, формує під нього область, яка в залежності від використовуваного користувачем браузера може або залишатися заданого розміру, або схлопуватися.
Але щоб користувач мав уявлення, що на цьому місці сторінки повинна бути картинка, і ви прописуєте у Img Alt, де і вводите текст з описом того, що тут має бути зображено. Вміст Alt будуть виводитися в області неподгрузившейся фотографії.
Ну, і крім цього, для картинок в Html коді, а так само і для інших елементів мови гіпертекстової розмітки (наприклад, для тих же гіперпосилання) є можливість при наведенні користувачем на них курсором миші показувати йому який-небудь супроводжуючий текст.
Робиться це за допомогою спеціального атрибута Title, який в нашому випадку вставляється у Img. Він по суті є спливаючій підказкою і його можна використовувати практично для всіх видимих на сторінці елементи Html-коду, коли вам потрібно щось додатково пояснити.
Раніше, до речі, до підказці призводило і додавання тексту Alt, але зараз від такої поведінки відмовляються і цей атрибут тепер в основному виконує тільки роль альтернативного тексту, а Title використовується виключно для спливаючих підказок.
Насправді вміст Alt і Title тега Img не тільки служить для зручності відвідувачів вашого сайту, але і може надавати дуже істотну роль на успішність просування вашого проекту.
Для цього потрібно не забувати вживати в них ключові слова, як я про це неодноразово писав, наприклад, у статті про просування сайту своїми силами або ж у публікації про те, як розкрутити сайт самому.
Ключові слова Alt і Title (особливо в Alt) можуть помітно поліпшити ранжування вашого сайту, а так в сервісах пошуку з зображень (картинок) Яндекса або Google. Проте з цим потрібно бути обережним, бо досить легко можна потрапити під фільтр за спам від Яндекса або Гугла.
Обтікання зображення текстом в Html — атрибут Align тега Img
Тепер давайте поговоримо про вирівнювання вставлених зображень в Html коді. У всіх чотирьох рядкових елементів з замещаемым контентом (Img, Iframe, Object і Embed) є можливість вирівнювання з допомогою атрибута Align. Але він взагалі-то застосовується тільки для блокових елементів, а згадані теги — малі.
Тому деякі значення для Img Align (наприклад, завдання обтікання зображення текстом) будуть означати зовсім інше, ніж при використанні цього атрибута в блокових елементах (параграфах P, заголовків H1-H6 тощо).
Взагалі, вирівнювання картинок з допомогою Align при використанні Img можна розділити на дві групи.
Отже, що ж відбувається, коли ми вставляємо графічний файл у текст документа? Фактично він постає як одна велика літера:
За замовчуванням використовується вирівнювання по нижньому краю, тобто додавання в елемент Img атрибута align=»bottom» нічого не змінить. Але зате можна спробувати задати вирівнювання картинки по верхньому краю, додавши елемент align=»top»:
В цьому випадку відбулося вирівнювання тексту в рядку, де розташована фотографія, по верхньому краю.
Можливо ще одне значення цього атрибута align=»middle»:
У цьому випадку текст у рядку з картинкою буде вирівнюватися по середині цього самого малюнка.
Але крім вирівнювання по вертикалі в Html передбачено і обтікання картинок текстом, для чого використовуються значення — Left і Right. Ця група значень атрибута Align сильно відрізняється від попередньої.
При використанні значень Left і Right всередині елемента Img ми добиваємося, так званого, обтікання зображення текстом, яке задається в Html коді. У цьому випадку малюнок стає плаваючим елементом (аналог Float в CSS) і починає її текст обтікає.
Наприклад, при align=»left» ми отримаємо такий результат:
Значення Left у Img означає, що фото плаває в ліву сторону, а текст її обтікає справа. У разі align=»right» картинка буде плавати в праву сторону, а текст її буде обтікати зліва:
При завданні обтікання зображення текстом є один нюанс — текст занадто близько розташований від нього, що створює неприємний оці ефект прилипання. Дану проблему зовсім легко вирішити за допомогою CSS властивості padding або margin, але і в чистому Html існує своє рішення.
Для цього можна використовувати атрибути елемента Img Hspace і Vspace. З допомогою них віджимається текст обтікає зображення. Hspace задає відступи ліворуч і праворуч від зображення до оточуючого його тексту, а Vspace — зверху і знизу. Відступи задаються в пікселях, наприклад:
Background — як зробити фон для сайту в чистому Html
Графічні файли можна використовувати не тільки як елементи коду сторінки, але і як заливку в якості фону. Взагалі, фон для сайту на мові Html можна задати або кольором, або з допомогою фонових зображень. Ну, а в сучасної верстки з використанням властивостей CSS , фонові картинки (background image) є одним з основних елементів, бо ніяких оформлювальних елементів, вставлених з допомогою Img на сторінках сучасних сайтів, немає.
Тому фонові зображення грають дуже важливу роль в сучасній верстки з використанням CSS (поговоримо про це в наведеній статті. Поки ж ми розглянемо, як це все робиться в чистому Html за допомогою атрибута Background елемента Body і тегів таблиці Table, показує шлях до графічного файлу, яким буде залита web сторінка або таблиця (або її окрема комірка).
Наприклад, додавши в Body атрибут Background наступного виду:
Ми отримаємо фон для нашого сайту, що складається з розмноженої фотки, якою буде заповнена вся видима область на манер плитки:
Фонове зображення, починаючи з лівого верхнього кута, повторюється відразу по двох осях (абсцис та ординат). Подальше зістиковується з попереднім і т. д. до Речі, якщо ви захочете залити фон сторінки або таблиці одним кольором, то для цього вам потрібно використовувати вже не Background, а атрибут bgcolor, значення якого може вставити код кольору, наприклад, так:
То отримаємо наступний колір фону заданий через bgcolor:
Точно так само, як і у випадку з атрибутом background, bgcolor можна ще використовувати і для завдання фону всієї таблиці або окремих її елементів.
Удачі вам! До зустрічей на сторінках блогу
