Зображення
Last updated
Last updated
Для розміщення на сторінці зображення (у різних форматах) використовують тег <img>.
Основні атрибути тегу <img>:
src="шлях до файлу" - це обов'язковий атрибут який вказує де зберігається зображення. Шлях може бути як абсолютним, так і відносним.
alt="опис зображення" - це обов'язковий атрибут альтернативного опису зображення. У разі помилки завантаження зображення буде показана цей текст.
width="значення" і height="значення" - це відповідно розмір ширини і висоти зображення. Якщо ці параметри не задати, то зображення покажеться в оригінальному розмірі. Якщо задати тільки один із цих параметрів, то другий браузер розрахує автоматично (при цьому буде збережено пропорції).
Альтернативний текст потрібно вказувати у кожному тезі <img> в атрибуті alt. У разі проблем із завантаженням зображення буде показано цей альтернативний текст. Утім цей текст також несе корисну інформацію для користувачів, наприклад із вадами зору.
Яким повинен бути опис в атрибуті alt:
Це повинно бути сформоване логічне речення
У описі має бути саме те, що зображено на малюнку
Опис повинен бути унікальним і не повторюватись
В описі не варто використовувати такі слова як «зображення», «малюнок» або «ілюстрація», оскільки це і так зрозуміло
Інколи для опису достатньо не цілого речення, а якоїсь смислової конструкції або просто одного слова (Наприклад: Вершковий торт, кошенята, габаритні вогні тощо)
Якщо у нас галерея зображень без текстового опису, треба уточнити що зображено на картинці.
Як текст, так і зображення можна зробити посиланням. Такий прийом дуже часто використовують, особливо в інтернет-магазинах коли при натисканні на зображення товару відкривається його картка.
Щоб створити зображення-посилання потрібно тег зображення <img> огорнути в тег посилання <a>.
Для зображення з підписом можна використовувати комбінацію тегів <img> та <p>. Утім для таких випадків існують семантичні теги <figure> і <figcaption>.
У тег <figure> поміщають теги <img> та <figcaption>. Це відповідно зображення і його підпис. <figcaption> - обов'язково має бути останньою або 1-ю дитиною.
У проекті веб-сайту всі файли структуровані й розміщення в різних папках відповідно до свого призначення. Щоб вказати адресу файлу є абсолютні та відносні способи вказання шляху на розташування файлу.
За допомогою цього способу вказують точне розташування файлу на сервері. Доступ до такого файлу можна отримати навіть зі сторонніх сервісів.
Абсолютний шлях містить щонайменше три частини:
https:// - протокол
images.com - ім'я сервера
/photos/logos/google.png - шлях до файлу. Тут photos і logos - назви папок, вказані послідовно за ієрархією їх вкладеності одна в одну. google.png - назва і розширення самого файлу.
Відносний шлях описує розміщення файлу відносно поточного файлу. Зазвичай його використовують для опису інших файлів на тому ж ресурсі, наприклад зображень, файлів стилів, скриптів тощо.
Наведемо мінімальну структуру файлів у проекті:
Щоби із файлу index.html вказати шлях до зображення логотипа у папці images, в атрибуті src потрібно записати шлях відносно цього файлу.
Символ слеш / означає що потрібно перейти на один рівень нижче. Тобто на одному рівні із файлом index.html є папка images в якій лежить файл logo.jpg.
Також можна побачити такий запис:
Він буквально означає: Вийти із файлу (./), зайти у папку images, яка лежить на одному рівні разом із цим файлом і там взяти файл logo.jpg.
Подивіться на структуру проєкту вище. Далі ми будемо використовувати таблиці стилів styles.css, які лежать у папці css. Якщо в такому файлі нам потрібно буде описати шлях до зображення то спочатку потрібно вийти із папки на один рівень вище (../), а потім як було вже сказано вище зайти в папку images і взяти там файл logo.jpg.
Векторна графіка однакова якісно відображається як на звичайних екранах, так і на екранах з підвищеною щільністю. Растрова графіка особливо при збільшенні зображення буде втрачати у якості. З'явиться ефект пікселізації.
Растрова графіка (raster, bitmap) - У цьому форматі зображення описується кольором кожного окремого пікселя, як на сітці із квадратними комірками.
Найвживаніші растрові формати зображень:
JPEG - великі файли, без анімації і прозорого фону. Ідеально підходить для різнобарвних фотореалістичних фотографій.
PNG - має додатковий параметр, який описує прозорість(альфа канал). Його використовують коли потрібно додати прозорості зображенню, а відтак відомості фону. Ідеально підходить для іконок, декоративних елементів, креслень та графіків.
webP - сучасний графічний формат. Поєднує в собі переваги PNG і JPEG. Оптимізований так, що займає в середньому на 25% менше місця. Недоліком є те що його у не повній мірі підтримують деякі браузери.
Векторна графіка (SVG, Scalable Vector Graphics) - контури та лінії описує рівняннями та формулами. Також вказує додаткові властивості, наприклад колір ліній, або фону.
Векторну графіку використовують для простих і масштабованих зображень. Наприклад для логотипів іконок декоративних елементів та графіків.
Переважний об'єм проєкту складають зображення. Тому для економії місця на сервері потрібно їх оптимізувати. У проєктах використовують автоматичні сервіси для оптимізації. Утім є спеціальні сервіси які також виконують цю функцію. Вони сильно стискають розмір зображення при незначній втраті якості, яку навіть не видно неозброєним оком.
Базовий JPEG (Baseline JPEG) завантажується поступово піксель за пікселем, рядок за рядком згори вниз. У разі низької швидкості з'єднання інтернету це спричиняє негарний ефект уривчастого завантаження зображень.
Прогресивний JPEG (Progressive JPEG) - це такі ж само файли зображень тільки завантажуються вони інакше - шарами. Спочатку показується все зображення, але в погані якості й в процесі завантаження якість покращується до максимальної. З точки зору користувача такий формат файлу набагато краще.
Покликання:
Для оптимізації растрових зображень використовують такі сервіси як та . Тут потрібно підібрати баланс між вимогами до стискання файлу і допустимою втратою якості. Оптимізувати зображення можна один раз.
Сервіс , за замовчуванням зображення JPEG робить прогресивними. Розмір файлу прогресивного JPEG-зображення зазвичай трохи менше його базового JPEG-аналога.
