Як вставити картинку в html код

У цій статті ми розглянемо, як додати зображення в HTML-код, вибрати відповідний формат зображення, змінити його розмір, задати вирівнювання і додати рамку.

Чому зображення важливі?

Наш мозок краще сприймає і запам’ятовує інформацію, підкріплену візуальними образами. Наприклад, замість запам’ятовування закону всесвітнього тяжіння, ми швидше пригадаємо образ Ньютона, якому на голову падає яблуко. Багато корисної інформації асоціюється з конкретними картинками, схемами або ілюстраціями.

Візуальна складова є важливою і для веб-сайтів. Зображення привертають увагу, допомагають у сприйнятті інформації та покращують зовнішній вигляд сторінок. Погляньте на приклади красивих сайтів з галереї SiteSee – більшість з них містять багато візуального контенту.

Якщо ви використовуєте конструктор сайтів, додати зображення зазвичай дуже просто. Проте, якщо ви створюєте сайт самостійно або з нуля, вам доведеться вставляти зображення безпосередньо в HTML-код. Це не складно, але може здатися важким завданням для новачків.

Як вибрати зображення для вашого сайту

Перш ніж додати зображення до HTML-коду сайту, важливо знайти надійне джерело для їх завантаження. Якщо ви використовуєте власні фотографії, ніяких проблем не виникне. Однак, якщо плануєте використовувати зображення з інтернету як фон або елемент дизайну, варто звернути увагу на авторські права. Розміщення зображень без дозволу власника може призвести до вимоги видалення або навіть штрафу.

Перевірка ліцензій

Використання зображень регулюється ліцензіями Creative Commons, які визначають умови їх використання. Серед них:

• CC Attribution: необхідно вказати автора.
• CC Attribution-NoDerivs: вказуйте автора та не змінюйте зображення.
• CC Attribution-NonCommercial: вказуйте автора та використовуйте зображення лише з некомерційною метою.
• СС0 або Public Domain: зображення можна використовувати вільно без вказівки авторства.

Для платних зображень існують такі ліцензії:

• Royalty-Free: одноразова покупка, після якої можна використовувати зображення без обмежень.
• Editorial: не можна використовувати з комерційною метою.
• Rights-Managed: ексклюзивне право на використання зображення.

Джерела безкоштовних зображень

Ось кілька сайтів, де можна завантажити безкоштовні зображення під ліцензією CC0:

• Pexels
• Burst
• Pixabay
• Freestocks
• StockSnap
• FoodiesFeed

Ці сервіси пропонують мільйони безкоштовних зображень у високій роздільній здатності, які можна використовувати для будь-яких цілей.

Джерела платних зображень

Якщо не знайшли потрібне зображення на безкоштовних ресурсах, зверніть увагу на платні сервіси:

• Getty Images
• iStock
• Adobe Stock
• Flickr
• Shutterstock

Більшість зображень на цих платформах розповсюджуються за ліцензією Royalty-Free.

Визначення формату зображень для HTML

Щоб забезпечити правильну роботу зображень у HTML-коді, важливо вибрати відповідний формат. У HTML підтримуються такі формати зображень:

JPEG

Формат JPEG не спотворює кольори на фотографіях, що робить його ідеальним для зберігання фотоматеріалів. Однак, JPEG не підтримує прозорість, тому не підходить для вставки зображень без фону. Прозорі ділянки у файлах цього формату відображатимуться білими. Файли JPEG мають розширення .jpg, .jpe, .jpeg.

GIF

Формат GIF підтримує прозорість і здатний зберігати кілька зображень в одному файлі, що дозволяє створювати анімовані ролики. Це робить його популярним для створення анімацій. Файли цього формату мають розширення .gif.

PNG

Формат PNG підтримує прозорість, що дозволяє вставляти зображення з прозорим фоном. Прозорі ділянки в таких файлах показуватимуть фон сайту або блоку, у якому вони розміщені. Файли PNG мають розширення .png.

Рекомендації щодо вибору формату зображень

Підбирайте формат зображення відповідно до його контенту та призначення:

• JPEG: Використовуйте для зберігання фотографій.
• GIF: Використовуйте для анімацій.
• PNG: Використовуйте, коли потрібно вставити зображення з прозорим фоном.

Вибір правильного формату зображень допоможе покращити вигляд вашого сайту та забезпечити коректне відображення всіх елементів.

Вибір назви файлу зображення

Для того щоб ваші зображення правильно відображалися та враховувалися пошуковими системами, важливо правильно називати файли. Використовуйте латинські літери для назв картинок. Якщо хочете, щоб ваші зображення відображалися за російськомовними запитами, застосовуйте транслітерацію. Наприклад, замість “book.jpg” використовуйте “kniga.jpg”.

Назва файлу зображення відіграє важливу роль у визначенні релевантності пошуковими системами. Тому обирайте назви, які відповідають змісту зображення.

Рекомендації щодо назви файлів зображень:

1. Зрозумілі імена: Називайте файли зрозуміло. Наприклад, замість “img_jhksjdh52-2021.jpg” використовуйте “grusha.jpg”. Це допоможе вам і пошуковим роботам легше орієнтуватися в графічних файлах вашого сайту.
2. Релевантність: Називайте файли відповідно до того, що на них зображено. Наприклад, якщо на зображенні море, назвіть файл “more.jpg”. Пошукові алгоритми врахують назву файлу та асоціюватимуть зображення зі словом “море”.

Використання зрозумілих і релевантних назв файлів покращує SEO вашого сайту та сприяє кращому сприйняттю пошуковими системами.

Використання img-тегу

Графічні зображення зберігаються в окремих файлах за межами HTML-коду. Щоб додати зображення до HTML-документу, використовується спеціальний тег <img>, який посилається на ці файли. Цей тег не потребує закриваючого тега. Коли браузер знаходить <img> тег з адресою зображення, він запитує файл із сервера і відображає його на сторінці.

Основні атрибути img-тегу

1. Атрибут src Цей атрибут вказує шлях до файлу зображення. Синтаксис:

   <img src="ШЛЯХ_ДО_ФАЙЛУ">

Існує два способи вказання шляху до зображення:

• Абсолютний шлях: повна URL-адреса файлу в інтернеті, наприклад:
  html <img src="https://example.com/images/picture.jpg">
• Відносний шлях: шлях до файлу щодо поточної сторінки, наприклад, якщо зображення зберігається в підпапці “images”: <img src="/images/picture.jpg"> Приклад використання відносного шляху:

   <img src="/images/coffee.jpg">

2. Атрибути width та height Ці атрибути визначають ширину та висоту зображення. Їх можна задавати в пікселях (px) або відсотках (%). Наприклад:

   <img src="/images/coffee.jpg" width="500px">

Якщо задається лише один із атрибутів, пропорції зображення зберігаються автоматично. Наприклад, якщо вказана лише ширина, висота зміниться пропорційно.

3. Атрибут align Цей атрибут визначає вирівнювання зображення відносно тексту або інших елементів на сторінці. Можливі значення: bottom, left, middle, right, top. Наприклад, щоб вирівняти зображення праворуч від тексту:

   <img src="/images/coffee.jpg" align="right">

4. Атрибут border Цей атрибут додає рамку навколо зображення. Товщина рамки вказується в пікселях. За замовчуванням, якщо атрибут не вказаний, товщина рамки дорівнює 0, і рамка не відображається. Наприклад, щоб додати рамку товщиною 20 пікселів:

   <img src="/images/coffee.jpg" border="20px">

Приклад використання img-тегу

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вставка зображення в HTML</title>
</head>
<body>
    <h1>Приклад зображення в HTML</h1>
    <p>Це приклад вставки зображення за допомогою тегу <code>&lt;img&gt;</code>.</p>
    <img src="/images/coffee.jpg" width="500px" align="right" border="20px">
</body>
</html>

У цьому прикладі зображення “coffee.jpg” вставлене з відносним шляхом, ширина зображення встановлена на 500 пікселів, воно вирівняне праворуч і має рамку товщиною 20 пікселів.