Ось готовий урок, створений у стилі CS50, де ми поєднуємо енергію, аналогії та глибинне розуміння.

🏛 CS50: Робота з зображеннями та Background

Вітаю, друзі! 👋

Сьогодні ми переходимо від "сухих" текстових сторінок до того, що робить веб живим, емоційним та зрозумілим. Ми говоримо про зображення.

1. 🔥 Вступ: Проблема та мотивація

Уявіть, що ви зайшли в інтернет-магазин кросівок. Але замість фотографій товару ви бачите лише текст: "Кросівок червоний, спортивний, підошва гумова, шнурки білі".

Скажіть чесно: ви б купили цей кросівок?

Швидше за все — ні. Людина сприймає візуальну інформацію у 60 000 разів швидше, ніж текст. Без картинок веб — це просто нудний текстовий документ із 90-х.

Але тут виникає проблема. Як браузер розуміє, де картинка — це важлива частина інформації (фото кросівка), а де — просто декор (візерунок на фоні)? Як зробити так, щоб картинка не розтягувалася, як обличчя в кривому дзеркалі?

Сьогодні ми розберемося, як керувати візуалом, а не дозволяти візуалу керувати нами. Поїхали!

2. 🧠 Теоретична база (Що там "під капотом"?)

У веб-розробці є два принципово різні способи показати картинку. І плутати їх — це як плутати стілець (на якому сидять) і шпалери (на які дивляться).

🅰️ Тег `<img>` (HTML)

Це контент. Це "меблі" у вашій кімнаті. * Використовуємо, коли зображення несе зміст. * Якщо його прибрати, сторінка втратить сенс. * Приклад: фото товару, аватарка користувача, графік, діаграма. * Важливо: Браузер індексує ці картинки (Google Images їх бачить).

🅱️ Властивість `background-image` (CSS)

Це декор. Це "шпалери" на стінах. * Використовуємо для дизайну, фону, кнопок. * Якщо прибрати, текст все одно можна прочитати й зрозуміти. * Приклад: текстура паперу на фоні, градієнт, декоративна іконка в кутку. * Важливо: Це частина стилю, а не структури.

⚙️ Як це працює технічно?

Коли ви пишете <img src="cat.jpg">, браузер не "вставляє" картинку прямо в HTML-код. Він бачить посилання (адресу), відправляє окремий запит на сервер: "Гей, дай мені файл cat.jpg!", завантажує його і тільки потім малює на екрані.

❗️ Що запам'ятати залізно: У тега <img> завжди має бути атрибут alt="...". Це текст, який з'явиться, якщо картинка "поламається" або якщо сторінку читає скрінрідер для незрячих людей. Немає alt — немає доступності.

3. 🧪 Приклади (Від простого до "Магії")

Приклад 1: Звичайний `<img>`

Припустимо, ми хочемо показати логотип нашого стартапу.

<!-- HTML -->
<img src="logo.png" alt="Логотип компанії SuperCode" width="200">

Питання до вас: Що станеться, якщо файл logo.png ми випадково видалимо з папки? Відповідь: Браузер покаже іконку "розбитої картинки" і текст: "Логотип компанії SuperCode". Ось чому alt рятує ситуацію!

Приклад 2: Фонове зображення (CSS)

Тепер зробимо красивий банер-герой (Hero Section) на весь екран.

/* CSS */
.hero {
    width: 100%;
    height: 500px;
    background-image: url('ocean.jpg');
    background-color: darkblue; /* Про всяк випадок, якщо картинка не завантажиться */
}

Ви запускаєте код і... бачите лише шматочок неба або піксельне місиво. Чому? Тому що картинка за замовчуванням має свій рідний розмір.

Приклад 3: "Магічні" властивості фону

Давайте виправимо це, як професіонали.

.hero {
    height: 100vh; /* Висота на весь екран */
    background-image: url('ocean.jpg');

    /* 1. Центруємо картинку */
    background-position: center;

    /* 2. Забороняємо їй повторюватися (плиткою) */
    background-repeat: no-repeat;

    /* 3. Головний фокус: змушуємо картинку покрити блок, не спотворюючись */
    background-size: cover; 
}

Аналогія: background-size: cover працює як вікно. Ви бачите частину пейзажу, але він завжди заповнює все скло, не залишаючи дірок.

4. 🛠 Практична частина

Час забруднити руки кодом! Відкривайте редактор.

Завдання 1: "Розшук" Створіть <img> з посиланням на картинку, якої не існує (напишіть абракадабру в src). Додайте атрибут alt="Зниклий кіт". Подивіться, як це виглядає в браузері.

Завдання 2: "Галерея" Знайдіть в інтернеті велике фото (наприклад, 2000x2000 пікселів). Вставте його через <img>, але обмежте ширину width: 300px. Питання: Що сталося з висотою? Вона підлаштувалася автоматично чи сплющилася?

Завдання 3: "Листівка" Створіть div з класом .card. * Задайте йому розміри 300x400px. * Зробіть йому background-image. * Пограйтеся з background-size: спочатку поставте contain, потім cover. Відчуйте різницю.

Завдання 4: Міні-кейс "Текст на фото" Це класика веб-дизайну. 1. Зробіть блок із темною фоновою картинкою. 2. Напишіть всередині білий текст <h1>Привіт, Світ!</h1>. 3. Проблема: Текст погано читається на строкатому фоні. 4. Рішення: Додайте поверх картинки напівпрозорий шар (overlay) або використайте linear-gradient прямо у властивості background поверх картинки. Спробуйте це нагуглити або реалізувати!

Питання "А що, якщо...": А що, якщо у користувача дуже повільний інтернет? Картинка вантажиться 10 секунд. Що він бачитиме ці 10 секунд? (Підказка: згадайте про background-color).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі в цій темі?

Розмір має значення (у байтах). Новачок бере фотографію прямо з фотоапарата (5 МБ, 4000px) і вставляє як іконку 50x50px.
- Наслідок: Сайт вантажиться вічність. Трафік користувача згорає.
- Профі: Стискає картинку і зменшує її розмір до завантаження на сайт.
Семантика. Новачок робить кнопку "Купити" картинкою.
- Профі: Робить кнопку кодом (CSS), а іконку додає як фон або SVG. Текст кнопки має бути текстом, щоб його можна було виділити, скопіювати або прочитати скрінрідером.
Співвідношення сторін. Новачок задає картинці фіксовану ширину І висоту, ігноруючи пропорції. Отримуємо "сплющених" людей.
- Профі: Задає width: 100%, а height: auto (або використовує object-fit: cover для img).

6. 🧩 Підсумок

Отже, що ми маємо сьогодні в арсеналі?

Ми навчилися розрізняти контент (<img>) та оформлення (background).
Ми зрозуміли, що картинки — це окремі запити на сервер.
Ми вміємо керувати фоном так, щоб він виглядав стильно (cover, center), а не хаотично.
Ми пам'ятаємо про доступність (alt).

Ви тепер вмієте робити сайти не просто інформативними, а й красивими.

Але стривайте... Ми зробили картинку красивою на вашому моніторі. А як вона виглядатиме на екрані iPhone? Чи не стане вона занадто дрібною?

Про це — на наступному уроці, де ми поговоримо про Адаптивний дизайн та Медіа-запити.

А поки що — це був CS50! 🚀