Розбіжності

Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.

--- subjects:basic:informatika:web:hrafika_dlia_veb-seredovyha [04.11.2022 23:24] – створено Адміністратор
+++ subjects:basic:informatika:web:hrafika_dlia_veb-seredovyha [17.04.2023 15:46] (поточний) – [Джерела] Адміністратор
@@ Рядок 1: / Рядок 1: @@
 ====== Графіка для веб-середовища ======
-**Призначення**
+Зображення — це не лише фактор краси: у дизайні взаємодія з користувачем зображення відіграють важливу роль у створенні зручності користування. Більшість веб-користувачів сприймають картинки швидше, ніж слова. Тому досить часто зображення є невід'ємними елементами дизайну. Більше того, вони інформативні та емоційно привабливі, передають не лише повідомлення, а й особливу естетику. Крім того, зображення, які використовуються на веб-сторінках, позитивно впливають на рейтинг веб-сайту [[subjects:basic:informatika:base:seo|SEO]].
-  * Візуальна/естетична привабливість — підтримує інтерес і увагу відвідувачів
-  * Створення візуальної структури
-  * Візуальне представлення теми
-Рекомендації щодо веб-графіки
+Залежно від цілей, які стоять перед дизайном веб-сайту, креативні та маркетингові групи обирають різні типи зображень.
-  * Веб-графіка повинна відповідати меті та стилю сайту
-  * Велика (розмір файлу) графіка збільшує час завантаження сторінки — уникайте
-  * Графіка повинна допомогти зосередити увагу відвідувача на тому, що важливо на сторінці
-  * Уникайте дратівливих зображень, анімації, безпричинних ефектів
-  * Графіку ніколи не слід використовувати замість текстового вмісту, за винятком випадків, коли заголовок вимагає включення логотипу. Це зменшує індексацію пошуковою системою, доступність тощо.
-  * Зробіть графіку доступною за допомогою альтернативного тексту (тег ''alt'').
-  * Під час використання тексту в графічних зображеннях переконайтеся, що є достатній контраст, щоб вони були розбірливими. Це особливо важливо при використанні фонових зображень.
-===== Формати веб-графіки =====
+===== Формати файлів зображень, які найчастіше використовуються в Інтернеті. =====
+==== APNG ====
+{{https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png?nolink }}APNG (Animated Portable Network Graphics) — формат зображень побудований на форматі PNG, передбачує можливість зберігання анімації аналогічно до тієї, котра використовується в форматі GIF, а також кольорів прозорості (прозорість 8 біт на противагу одному прозорому кольору в GIF-зображенні).
-Існує три формати графічних файлів, які використовуються в Інтернеті: **JPG**, **GIF** і **PNG**. Кожен із цих форматів файлів розроблено з певною метою, тому важливо розуміти відмінності, коли ми використовуємо їх на веб-сайтах.
+Специфікація APNG була розроблена Стюартом Парментером та Владимиром Вукичевичем з Mozilla Corporation для збереження елементів інтерфейсу, таких, як анімація завантаження. Раніше Mozilla відмовилась від MNG (більш потужного формату, який підтримує всі можливості APNG) через немалий розмір MNG-бібліотеки; декодер APNG, побудований безпосередньо на бібліотеці PNG, був набагато меншим.
-==== JPG ====
+Хороший вибір для анімації без втрат якості (GIF менш продуктивний). AVIF і WebP мають кращу продуктивність, але менш широку підтримку браузера.
-Формат зображень **JPG** розроблено для ефективного зберігання та стиснення реалістичних зображень і творів мистецтва (як кольорових, так і градацій сірого). Формат JPG дуже добре стискає зображення з великою кількістю кольорів і градаціями кольорів.
-У форматі JPG не можна зберігати прозорий фон. Якщо необхідна прозорість фону вашого зображення, вам слід вибрати інший формат.
+**Підтримується**: Chrome, Edge, Firefox, Opera, Safari.
-Зберігаючи зображення у форматі JPG, ви можете вибрати рівень стиснення, щоб збалансувати розмір файлу та якість зображення. Розмір файлу безпосередньо залежить від фактичного розміру (у пікселях) зображення. Більше пікселів - більший розмір файлу.
+**Розширення файлу:** .apng
+==== AVIF ====
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Avif-logo-rgb.svg/200px-Avif-logo-rgb.svg.png?nolink&75 }}AV1 Image File Format (AVIF) (/əˈviːf/) — це специфікація формату файлу зображення для зберігання зображень або послідовностей зображень, стиснутих за допомогою AV1, у форматі контейнера HEIF. Версія 1.0.0 специфікації AVIF була завершена у лютому 2019 року.
-==== GIF і PNG ====
+Хороший вибір як для зображень, так і для анімаацій завдяки високій продуктивності. Він пропонує набагато краще стиснення, ніж PNG або JPEG, із підтримкою більшої глибини кольору, анімованих рамок, прозорості тощо. Зауважте, що під час використання AVIF вам слід включити резервні варіанти до форматів із кращою підтримкою браузера (тобто за допомогою елемента ''<picture>'').
-Формати зображень GIF і PNG використовують так званий «індексний колір». Вони зберігають мінімізовану палітру кольорів у файлі зображення та ключі до місця розташування цих кольорів на зображенні. Розмір файлу для зображень GIF і PNG зазвичай залежить від кількості використаних кольорів. Загальні номери кольорів: 2, 4, 8, 16, 32, 64, 128, 256.
+**Підтримується:** Chrome, Opera, Firefox (лише нерухомі зображення: анімовані зображення не реалізовані).
-Формати зображень GIF і PNG ідеально підходять для зображень із рівними кольорами (без градієнтів) і жорсткими краями. Типовими прикладами таких типів зображень є логотипи, логотипи та ілюстрації без градієнтів.
+**Розширення файлу:** .avif
-<callout type="info" icon="true">В обчислювальній техніці індексований колір — це техніка обмеженого керування кольорами цифрових зображень, щоб заощадити пам’ять комп’ютера та сховище файлів, пришвидшивши оновлення дисплея та передачу файлів.</callout>
+==== GIF ====
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/SmallFullColourGIF.gif/200px-SmallFullColourGIF.gif?nolink }}GIF (від англ. Graphics Interchange Format — «формат обміну зображеннями») — 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 році, і з того часу набув широкої популярності у всесвітній павутині завдяки своїй відносній простоті та мобільності. Одними з головних особливостей формату є підтримка анімації та прозорості.
+Для стискання файлів використовує LZW-компресію.
+<alert type="danger" icon="fa fa-info-circle">Старий формат. Зазвичай не потрібно ним користуватися, але знайте, що він існує.</alert>
+**Підтримується:**  Chrome, Edge, Firefox, IE, Opera, Safari.
+**Розширення файлу:** .gif
+==== JPEG ====
+JPEG (Joint Photographic Experts Group) — растровий формат зберігання графічної інформації, що використовує стиснення з втратами якості зображення.
+Термін «JPEG» — це акронім для Joint Photographic Experts Group, даний стандарт було затверджено 1992 року. Він використовує дискретне косинусне перетворення 8×8 (DCT)[1], зигзагоподібне сканування перетворень, DPCM-передбачення середніх значень блоку, скалярне квантування та ентропійне кодування.
+Використовується для фотографій або будь-яких зображень із плавними переходами між кольорами. Не підтримує прозорість.
+Хороший вибір для стиснення статичних зображень із втратами якості (наразі найпопулярніший). Віддавайте перевагу PNG, якщо потрібне більш точне відтворення зображення, або WebP/AVIF, якщо потрібно як краще відтворення, так і вищий рівень стиснення.
+**Підтримується:**  Chrome, Edge, Firefox, IE, Opera, Safari.
+**Розширення файлу:** .jpg, .jpeg, .jfif, .pjpeg, .pjp
+==== PNG ====
+PNG (Portable Network Graphics) — растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF графічним форматом, який не потребує ліцензії для використання.
+Формат PNG характеризується сильнішим рівнем стиснення для файлів з більшою кількістю кольорів ніж GIF, але різниця становить близько 5-25 %, чого недостатньо для абсолютної переваги формату, тому що маленькі картинки GIF стискає принаймні не гірше. Існує також одна особливість GIF, яку не повторює PNG — це можливість збереження множинного зображення, анімації. Призначення PNG — зберігати лише одне зображення. Для передачі множинних зображень використовується розширений формат MNG.
+Для більш точного відтворення зображень або коли потрібна прозорість, перевагу надають PNG, аніж JPEG. WebP/AVIF забезпечують ще краще стиснення та відтворення, але підтримка браузерами обмежена.
+**Підтримується:** Chrome, Edge, Firefox, IE, Opera, Safari.
+**Розширення файлу:** .png
+==== SVG ====
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/220px-Bitmap_VS_SVG.svg.png?nolink }}Scalable Vector Graphics (скорочено SVG) (з англ. масштабована векторна графіка) — специфікація мови розмітки, що базується на XML, та формат файлів для двомірної векторної графіки, як статичної, так і анімованої та інтерактивної. SVG може бути виключно декларативним, або містити описи сценаріїв. Зображення можуть містити зовнішні лінки шляхом застосування простих XLink-ів. Ця специфікація є відкритим стандартом, розробленим робочою групою SVG Working Group організації World Wide Web Consortium.
+Векторний формат зображення; ідеально підходить для елементів інтерфейсу користувача, піктограм, діаграм тощо, які потрібно намалювати точно в різних розмірах.
+**Підтримується:** Chrome, Edge, Firefox, IE, Opera, Safari.
+**Розширення файлу:** .svg
+==== WebP ====
+WebP (Web Picture format, вимовляється як англ. weppy) — формат ущільнення зображень з втратами і без втрат якості, запропонований компанією Google Inc. у 2010 році. Заснований на алгоритмі стиснення нерухомих зображень (ключових кадрів) з відеокодека VP8. Використовує контейнер RIFF.
+При створенні формату WebP використані технології, задіяні у відеокодеку VP8 для стиснення ключових кадрів. Високе стиснення досягається завдяки використанню передбачувальної техніки кодування, що враховує вміст сусідніх піксельних блоків для передбачення вмісту поточного блоку, це дозволяє обмежитися зберіганням тільки відмінностей між фактичними і передбаченими даними. Як контейнер для зберігання зображень, стиснених методом WebP, використовується стандартний RIFF.
+Чудовий вибір як для зображень, так і для анімацій. WebP пропонує набагато краще стиснення, ніж PNG або JPEG, із підтримкою більшої глибини кольору, анімованих рамок, прозорості тощо. AVIF пропонує трохи краще стиснення, але не підтримується браузерами.
+**Підтримується:** Chrome, Edge, Firefox, IE, Opera, Safari.
+**Розширення файлу:** .webp
+===== Джерела =====
+  * [[https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types|Image file type and format guide - Web media technologies | MDN]]
+  * [[wp>APNG]]
+  * [[wp>JPEG]]
+  * [[wp>PNG]]
+  * [[wp>Scalable Vector Graphics]]