🎯 Вступ: чому зображення — це не просто прикраса
Уяви, що ти зайшов на сайт, а там — суцільний текст, без жодної картинки. Нудно, правда? Важко зосередитися, очі «розбігаються», і хочеться скоріше закрити сторінку.
А тепер уяви сайт, де є яскраві фото, зрозумілі схеми та доречна анімація. Такий сайт хочеться досліджувати. Зображення — це не просто прикраса. Це потужний інструмент, який допомагає передати емоції, пояснити складне та зробити сторінку живою.
У цьому уроці ми розберемо:
- Які бувають формати зображень і чому це важливо.
- Як правильно вставити картинку на вебсторінку за допомогою HTML.
- Що таке GIF-анімація та які сучасні формати її замінюють.
❓ Поміркуй: пригадай сайт, на якому ти нещодавно був. Що привернуло твою увагу найперше — текст чи візуальні елементи? Як ти думаєш, чому розробники витрачають багато часу на підбір картинок та ілюстрацій?
📖 Що таке формат зображення і навіщо він потрібен?
Коли ти фотографуєш на телефон або малюєш у графічному редакторі, комп’ютер зберігає зображення у певному форматі.
Формат — це спосіб кодування інформації про колір, прозорість і розмір картинки. Простими словами, це «мова», якою комп’ютер зберігає картинку у файл.
Різні формати створені для різних задач. Якщо обрати неправильний — картинка може виглядати погано (наприклад, «розсипатися» на квадратики) або важити занадто багато, і сайт буде повільно завантажуватися. Розберемо основні формати, які використовують у вебі.
JPG (або JPEG) — найпоширеніший формат для фотографій. Він добре стискає зображення, тому файли виходять маленькими. Але JPG не підтримує прозорість і при сильному стисканні може втрачати якість.
💡 Приклад: фото природи, портрет людини, знімок товару в інтернет-магазині — усе це найкраще зберігати в JPG.
PNG — формат для зображень, де потрібна прозорість або чіткі лінії. Він не втрачає якість при стисканні, але файли виходять більшими за JPG.
💡 Приклад: логотип компанії з прозорим фоном (щоб він гарно накладався на будь-який колір сайту), іконка, скріншот інтерфейсу — це PNG.
SVG — векторний формат. Він зберігає не пікселі, а математичні формули (лінії, криві). Тому SVG можна збільшувати до будь-якого розміру без втрати якості. Він ідеальний для логотипів та іконок.
💡 Приклад: іконки соцмереж у футері сайту або логотип, який має виглядати чітко і на маленькому екрані телефона, і на великому моніторі.
WebP — сучасний формат від Google. Він дає таку ж якість, як JPG, але файли на 25–35% менші. Підтримує прозорість (як PNG) і навіть анімацію. Сьогодні це найкращий вибір для більшості задач.
💡 Приклад: якщо ти хочеш, щоб сайт завантажувався миттєво, конвертуй усі великі фото в WebP.
AVIF — найновіший формат. Він стискає зображення ще краще, ніж WebP (файли можуть бути на 50% меншими за JPG). Це «формат майбутнього», але поки що не всі старі пристрої його розуміють.
💡 Приклад: його варто використовувати, якщо ти робиш сучасний сайт і хочеш максимальної швидкості.
🏆 Головне правило:
- для фото — WebP або JPG;
- для логотипів і прозорих картинок — PNG або SVG;
- якщо хочеш сучасне й максимально легке — AVIF або WebP.
📖 Як вставити зображення на вебсторінку (HTML)
Ми розібралися, які бувають формати. Але як змусити картинку з’явитися на самій вебсторінці? Для цього використовується мова розмітки HTML і спеціальний тег.
🏷️ Тег <img> та його головний атрибут
Для додавання картинки використовується тег <img>. Назва цього тегу походить від англійського слова image, що означає «зображення».
Він не має закриваючого тегу (як, наприклад, <p> чи </p>), це так званий «самотній» тег.
Ось базовий приклад того, як він виглядає в коді:
Найголовніший атрибут тут — src (від англійського source — джерело). Він вказує браузеру, де саме знаходиться файл із картинкою. Це може бути назва файлу в тій самій папці, що й твій HTML-файл, або повна адреса в Інтернеті (URL).
🗣️ Атрибут alt: чому це не просто «текст»
Дуже часто новачки ігнорують атрибут alt (від англійського alternative — альтернатива), але це велика помилка.
Подивись на код із цим атрибутом та на те, як він поводиться, якщо картинка не завантажилась:
Для чого потрібен alt:
- Якщо картинка не завантажилась. Уявіть, що у користувача поганий інтернет, і фото не прогрузилося. Замість пустого квадрата він побачить текст «Рудий кіт спить на підвіконні» і зрозуміє, що там мало бути (як на макеті вище).
- Доступність. Люди з вадами зору користуються спеціальними програмами (скрінрідерами), які читають вміст сторінки вголос. Замість того щоб ігнорувати картинку, програма прочитає текст із
alt. - SEO (пошукова оптимізація). Пошукові системи (наприклад, Google) не «бачать» картинки так, як люди. Вони аналізують саме текст
alt, щоб зрозуміти, про що зображення, і показати його в результатах пошуку.
📏 Керування розмірами
Іноді картинки завантажуються занадто великими. Щоб змінити їхній розмір прямо в коді, використовують атрибути width (ширина) та height (висота). Значення вказуються в пікселях.
<img src="photo.jpg" alt="Фото" width="300" height="200">
💡 Важливе правило: якщо вказати лише один параметр (наприклад, тільки ширину), браузер автоматично підлаштує другий, щоб зберегти пропорції картинки. Якщо вказати обидва неправильно — зображення може сплющитися або розтягнутися.
⚡ Секретна фішка: loading="lazy"
Уявіть, що на сторінці 50 великих фотографій. Якщо браузер почне завантажувати їх усі одночасно, сторінка буде вантажитися дуже довго, навіть якщо користувач дивиться лише на першу з них.
Сучасний атрибут loading="lazy" вирішує цю проблему:
<img src="photo.jpg" alt="Фото" loading="lazy">
Він каже браузеру: «Завантажуй цю картинку лише тоді, коли користувач до неї долистає (або коли вона наблизиться до видимої частини екрана)». Це економить мобільний трафік і прискорює відкриття сайту.
💡 Приклад: ти зайшов на сайт зі статтею, де багато фото. Завдяки loading="lazy" завантажиться лише перше фото (яке ти бачиш), а решта 20 фотографій почнуть вантажитися лише тоді, коли ти почнеш гортати сторінку вниз.
🎞️ Анімація на вебсторінці: GIF та сучасні альтернативи
Ми навчилися вставляти статичні зображення. Але що робити, якщо хочеться додати на сайт рух? Наприклад, показати, як працює якийсь механізм, або просто додати кумедну картинку, що «оживає». Тут на допомогу приходить анімація.
🎞️ Що таке GIF?
GIF (Graphics Interchange Format) — це формат зображень, який підтримує анімацію.
Він складається з кількох кадрів (як у мультфільмі), які швидко змінюють один одного, створюючи ілюзію руху.
GIF став справжньою легендою Інтернету. Він досі широко використовується для:
- мемів та реакцій у соцмережах;
- стікерів у месенджерах;
- коротких циклічних анімацій (наприклад, індикатор завантаження у вигляді стрілки, що крутиться).
⚠️ Чому GIF — це не завжди найкращий вибір?
Незважаючи на популярність, формат GIF має серйозні технічні обмеження, через які сучасні розробники намагаються його уникати для складних анімацій:
- Лише 256 кольорів. Через це фотографії в GIF виглядають «зернистими», з плямами та втрачають якість.
- Велика вага файлу. Анімація з багатьох кадрів може важити десятки мегабайт. Це змушує користувача довго чекати, поки сторінка завантажиться.
🚀 Сучасні альтернативи GIF
Сьогодні для анімації на вебсайтах використовують сучасніші формати, які забезпечують кращу якість і меншу вагу:
- Анімований WebP — підтримує мільйони кольорів і прозорість, але файли виходять значно меншими за GIF.
- Анімований AVIF — найновіший формат, який стискає анімацію ще сильніше.
- Коротке відео (MP4 або WebM) — головна сучасна альтернатива. Замість важкого GIF-файлу на сайт вставляють коротке відео без звуку, яке автоматично запускається і повторюється по колу. Воно важить у 5–10 разів менше і виглядає набагато чіткіше.
💡 Приклад: раніше на сайтах вітали зі святами за допомогою великого GIF-файлу з блимаючими вогниками (який важив 10 МБ і гальмував сайт). Сьогодні для цього використовують коротке зациклене MP4-відео, яке важить лише 1 МБ і виглядає як сучасна графіка.
💻 Як додати GIF на сторінку?
Найцікавіше, що для вставки GIF-анімації використовується той самий тег <img>, який ми вивчили в попередньому блоці. Браузер автоматично розпізнає, що файл анімований, і сам починає його відтворювати.
<img src="animation.gif" alt="Танцюючий робот">
Тобто, з точки зору коду, немає жодної різниці між звичайною картинкою та анімацією.
🛠️ Як створити власний GIF?
Є кілька простих способів:
- Онлайн-сервіси — дозволяють завантажити кілька картинок, обрати швидкість зміни кадрів і згенерувати GIF-файл прямо в браузері. Наприклад: EzGif або Canva.
- Спеціальні програми — надають більше налаштувань для створення професійної анімації. Наприклад, Easy GIF Animator.
- Запис екрана — можна записати коротке відео з екрана комп’ютера і конвертувати його в GIF.
🏆 Головна порада: використовуйте GIF для маленьких іконок, стікерів або простих мемів. Якщо ж вам потрібна якісна кольорова анімація — обирайте коротке відео (MP4) або анімований WebP.
✅ Підсумок уроку
Ось 6 головних думок, які варто запам’ятати з цього уроку:
1. Зображення — це не просто прикраса. Це потужний інструмент, який привертає увагу, передає емоції та робить сайт зрозумілішим.
2. Формат вирішує все. Для фото — JPG або WebP. Для логотипів із прозорим фоном — PNG або SVG. Для сучасного вебу — WebP та AVIF.
3. Тег <img> — основа основ. Він не потребує закриваючого тегу, а його головний атрибут — src (шлях до файлу).
4. Атрибут alt — це обов’язково. Він допомагає людям з вадами зору, рятує сторінку, якщо картинка не завантажилась, і покращує SEO.
5. Секрет швидкості — loading="lazy". Цей атрибут змушує картинки завантажуватися лише тоді, коли користувач до них долистає.
6. GIF — це класика, але не сучасність. Він обмежений 256 кольорами і багато важить. Для якісної анімації краще використовувати короткі відео (MP4) або анімований WebP.
🏆 Головна ідея: швидкий та красивий сайт — це результат правильного поєднання сучасних форматів, грамотного коду та дбайливого ставлення до трафіку користувача.
❓ Перевірте себе
Спробуй відповісти на запитання самостійно, а потім натисни, щоб перевірити себе.
1. Який формат зображення краще обрати для логотипу з прозорим фоном?
Найкраще обрати PNG або SVG. Вони підтримують прозорість, а SVG до того ж є векторним форматом, який не втрачає якість при збільшенні.
2. Що станеться, якщо не вказати атрибут alt?
Якщо картинка не завантажиться, користувач побачить порожній квадрат замість розуміння, що там було. Також це погіршить доступність сайту для людей з вадами зору та негативно вплине на SEO (пошукові системи не зрозуміють, про що зображення).
3. Як змусити картинку завантажуватися лише тоді, коли користувач до неї долистає?
Для цього використовується атрибут loading="lazy" у тегу <img>. Він каже браузеру відкласти завантаження зображення до моменту, коли воно з’явиться в полі зору користувача.
4. Чому GIF не рекомендується використовувати для важких анімацій?
GIF підтримує лише 256 кольорів, через що фото виглядають зернистими. Крім того, файли GIF з багатьма кадрами важать дуже багато, що сповільнює завантаження сайту. Сучасна альтернатива — коротке MP4-відео або анімований WebP.
5. Який тег використовується для вставки зображень на вебсторінку?
Тег <img> (від англійського image). Він є «самотнім» тегом, тобто не потребує закриваючого тегу.