# Зображення

Для розміщення на сторінці зображення (у різних форматах) використовують тег <mark style="background-color:red;">\<img></mark>.

```html
<img
  src="https://images.pexels.com/photos/7149465/pexels-photo-7149465.jpeg"
  alt="Котик бігає в полі"
  width="500"
/>
```

Основні атрибути тегу \<img>:

* <mark style="background-color:red;">src="шлях до файлу"</mark> - це обов'язковий атрибут який вказує де зберігається зображення. Шлях може бути  як абсолютним, так і відносним.
* <mark style="background-color:red;">alt="опис зображення"</mark> - це обов'язковий атрибут альтернативного опису  зображення. У разі помилки завантаження зображення буде показана цей текст.
* <mark style="background-color:red;">width="значення"</mark> і <mark style="background-color:red;">height="значення"</mark> - це відповідно розмір ширини і висоти зображення. Якщо ці параметри не задати, то  зображення покажеться в оригінальному розмірі. Якщо задати тільки один із цих параметрів, то другий браузер розрахує автоматично (при цьому буде збережено пропорції).&#x20;

## Атрибут alt[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82-alt) <a href="#atribut-alt" id="atribut-alt"></a>

Альтернативний текст потрібно вказувати у кожному тезі \<img> в атрибуті <mark style="background-color:red;">alt</mark>. У разі проблем із завантаженням зображення буде показано цей альтернативний текст. Утім цей текст також несе корисну інформацію для користувачів, наприклад із вадами зору.

Яким повинен бути опис в атрибуті alt:

* Це повинно бути сформоване логічне речення
* У описі має бути саме те, що зображено на малюнку
* Опис повинен бути унікальним і не повторюватись
* В описі не варто використовувати такі слова як «зображення», «малюнок» або «ілюстрація», оскільки це і так зрозуміло

Інколи для опису достатньо не цілого речення, а якоїсь смислової конструкції або просто одного слова  (Наприклад: Вершковий торт, кошенята,  габаритні вогні  тощо)

```html
<img src="cake.png" alt="Вершковий торт" />
```

Якщо у нас галерея зображень без текстового опису, треба уточнити що зображено на картинці.

```html
<img
  src="sweets.jpg"
  alt="Солодощі на столі. Цукерки, тортик і морозиво."
/>
```

## Зображення-посилання[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BF%D0%BE%D1%81%D0%B8%D0%BB%D0%B0%D0%BD%D0%BD%D1%8F) <a href="#zobrazhennya-posilannya" id="zobrazhennya-posilannya"></a>

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

Щоб створити зображення-посилання потрібно тег зображення <mark style="background-color:red;">\<img></mark> огорнути в тег посилання <mark style="background-color:red;">\<a></mark>.&#x20;

```html
<a href="https://www.my-site.com/kettle">
  <img
    src="kettle.jpg"
    alt="Чайник"
    width="640"
  />
</a>
```

## Зображення з підписом[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D0%B7-%D0%BF%D1%96%D0%B4%D0%BF%D0%B8%D1%81%D0%BE%D0%BC) <a href="#zobrazhennya-z-pidpisom" id="zobrazhennya-z-pidpisom"></a>

Для зображення з підписом можна використовувати комбінацію тегів <mark style="background-color:red;">\<img></mark> та <mark style="background-color:red;">\<p></mark>. Утім для таких випадків існують семантичні теги <mark style="background-color:red;">\<figure></mark> і <mark style="background-color:red;">\<figcaption></mark>.

У тег <mark style="background-color:red;">\<figure></mark> поміщають теги <mark style="background-color:red;">\<img></mark> та <mark style="background-color:red;">\<figcaption></mark>. Це відповідно зображення і його підпис. <mark style="background-color:red;">\<figcaption></mark> - обов'язково має бути останньою або 1-ю дитиною.

```html
<figure>
  <img src="адреса зображення" alt="Альтернативний текст" />
  <figcaption>Пояснення зображення</figcaption>
</figure>
```

## Абсолютні і відносні шляхи[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%96-%D1%96-%D0%B2%D1%96%D0%B4%D0%BD%D0%BE%D1%81%D0%BD%D1%96-%D1%88%D0%BB%D1%8F%D1%85%D0%B8) <a href="#absolyutni-i-vidnosni-shlyakhi" id="absolyutni-i-vidnosni-shlyakhi"></a>

У проекті веб-сайту всі файли структуровані й розміщення в різних папках відповідно до свого призначення. Щоб вказати адресу файлу є  абсолютні та відносні способи вказання шляху на розташування файлу.

### Абсолютний шлях[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D0%B8%D0%B9-%D1%88%D0%BB%D1%8F%D1%85) <a href="#absolyutnii-shlyakh" id="absolyutnii-shlyakh"></a>

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

```html
https://images.com/photos/logos/google.png
```

Абсолютний шлях містить щонайменше три частини:

* <mark style="background-color:red;">https\://</mark> - протокол
* <mark style="background-color:red;">images.com</mark> - ім'я сервера
* <mark style="background-color:red;">/photos/logos/google.png</mark> - шлях до файлу. Тут photos і logos - назви папок, вказані послідовно за ієрархією їх вкладеності одна в одну. google.png - назва і розширення самого файлу.

#### Відносний шлях[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B2%D1%96%D0%B4%D0%BD%D0%BE%D1%81%D0%BD%D0%B8%D0%B9-%D1%88%D0%BB%D1%8F%D1%85) <a href="#vidnosnii-shlyakh" id="vidnosnii-shlyakh"></a>

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

Наведемо мінімальну структуру файлів у проекті:&#x20;

```
project
      ├── index.html
      ├── css/
      │     ├── normalize.css
      │     └── styles.css                 
      └── images/
            ├── logo.jpg
            └── hero.png     
```

Щоби із файлу <mark style="background-color:red;">index.html</mark> вказати шлях до зображення логотипа у папці <mark style="background-color:red;">images</mark>, в атрибуті <mark style="background-color:red;">src</mark> потрібно записати шлях  відносно цього файлу.

```html
<img src="images/logo.jpg" alt="Логотип" />
```

Символ слеш <mark style="background-color:red;">/</mark> означає що потрібно перейти на один рівень нижче. Тобто на одному рівні із файлом <mark style="background-color:red;">index.html</mark> є папка <mark style="background-color:red;">images</mark> в якій лежить файл <mark style="background-color:red;">logo.jpg</mark>.

Також можна побачити такий запис:

```html
<img src="./images/logo.jpg" alt="Логотип" />
```

Він буквально означає: Вийти із файлу (<mark style="background-color:red;">./</mark>), зайти у папку <mark style="background-color:red;">images</mark>, яка лежить на одному рівні разом із цим файлом і там взяти файл  <mark style="background-color:red;">logo.jpg</mark>.

Подивіться на структуру проєкту вище. Далі ми будемо використовувати таблиці стилів <mark style="background-color:red;">styles.css</mark>, які лежать у папці css. Якщо в такому файлі нам потрібно буде описати шлях до зображення то спочатку потрібно вийти із папки на один рівень вище (<mark style="background-color:red;">../</mark>), а потім як було вже сказано вище зайти в папку <mark style="background-color:red;">images</mark> і взяти там файл <mark style="background-color:red;">logo.jpg</mark>.&#x20;

```css
background-image: url('../images/logo.png');
```

## Графічні формати[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B3%D1%80%D0%B0%D1%84%D1%96%D1%87%D0%BD%D1%96-%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B8) <a href="#grafichni-formati" id="grafichni-formati"></a>

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FVl59NXj3U9ggsjdBgqjn%2F17-1-vector-vs-raster.jpg?alt=media&#x26;token=bf0b4b8b-a1df-428b-bbcc-0b5d873206c5" alt="" width="300"><figcaption></figcaption></figure>

Векторна графіка однакова якісно відображається як на звичайних екранах, так і на екранах з підвищеною щільністю. Растрова графіка особливо при збільшенні зображення буде втрачати у якості. З'явиться ефект пікселізації.&#x20;

## Растрова графіка[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D1%80%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%B0-%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0) <a href="#rastrova-grafika" id="rastrova-grafika"></a>

**Растрова графіка (raster, bitmap)** - У цьому форматі зображення описується кольором кожного окремого пікселя, як на сітці із квадратними комірками.

Найвживаніші растрові формати зображень:

* **JPEG** - великі файли, без анімації і прозорого фону. Ідеально підходить для різнобарвних фотореалістичних фотографій.
* **PNG** - має додатковий параметр, який описує прозорість(альфа канал). Його використовують коли потрібно додати прозорості зображенню, а відтак відомості фону. Ідеально підходить для іконок, декоративних елементів, креслень та графіків.&#x20;
* **webP** - сучасний графічний формат. Поєднує в собі переваги PNG і JPEG. Оптимізований так, що займає в середньому на 25% менше місця. Недоліком є те що його у не повній мірі підтримують деякі браузери.&#x20;

## Векторна графіка[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%B2%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BD%D0%B0-%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0) <a href="#vektorna-grafika" id="vektorna-grafika"></a>

**Векторна графіка (SVG, Scalable Vector Graphics)** - контури та лінії описує рівняннями та формулами. Також вказує додаткові властивості, наприклад колір ліній, або фону.

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

{% hint style="info" %}
Векторну графіку розглянуто в окремому розділі.
{% endhint %}

## Оптимізація зображень[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C) <a href="#optimizaciya-zobrazhen" id="optimizaciya-zobrazhen"></a>

Переважний об'єм проєкту складають зображення. Тому для економії місця на сервері потрібно їх оптимізувати. У проєктах використовують автоматичні сервіси для оптимізації. Утім є спеціальні сервіси які також виконують цю функцію. Вони сильно стискають розмір зображення при незначній втраті якості, яку навіть не видно неозброєним оком.

Для оптимізації растрових зображень використовують такі сервіси як [Squoosh ](https://squoosh.app/)та [Сompressjpeg](https://compressjpeg.com/). Тут потрібно підібрати баланс між вимогами до стискання файлу і допустимою втратою якості. Оптимізувати зображення можна один раз.

## Базовий і Прогресивний JPEG[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-jpeg) <a href="#progresivnii-jpeg" id="progresivnii-jpeg"></a>

**Базовий JPEG (Baseline JPEG)** завантажується поступово піксель за пікселем, рядок за рядком згори вниз. У разі низької швидкості з'єднання інтернету це спричиняє негарний ефект уривчастого завантаження зображень.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FSPyJYAXW7I8o3746s7aV%2Fsleepy-purrito-baseline-timeline-1.webp?alt=media&#x26;token=4c2c5afe-3938-4ca3-90a7-025c3094d252" alt=""><figcaption></figcaption></figure>

**Прогресивний JPEG (Progressive JPEG)** - це такі ж само файли зображень тільки завантажуються вони інакше - шарами. Спочатку показується все зображення, але в погані якості й в процесі завантаження якість покращується до максимальної. З точки зору користувача такий формат файлу набагато краще.

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FbHLF8jCftL4V8zFhDrxb%2Fsleepy-purrito-progressive-timeline-768x275.jpg?alt=media&#x26;token=2c5e0775-a697-46e1-8029-ccdf2ef891c3" alt=""><figcaption></figcaption></figure>

## Створення[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-01/images#%D1%81%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F) прогресивного JPEG <a href="#stvorennya" id="stvorennya"></a>

Сервіс [Squoosh](https://squoosh.app/), за замовчуванням зображення JPEG робить прогресивними. Розмір файлу прогресивного JPEG-зображення зазвичай трохи менше його базового JPEG-аналога.

**Покликання:**

[Специфікація тегу \<img> ](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element)

[Squoosh для оптимізації растрової графіки](https://squoosh.app/)

[Сompressjpeg для оптимізації растрової графіки](https://compressjpeg.com/)

[SVGOMG для оптимізації векторної графіки](https://jakearchibald.github.io/svgomg/)
