Графіка для веб-середовища

Призначення

• Візуальна/естетична привабливість — підтримує інтерес і увагу відвідувачів
• Створення візуальної структури
• Візуальне представлення теми

Рекомендації щодо веб-графіки

• Веб-графіка повинна відповідати меті та стилю сайту
• Велика (розмір файлу) графіка збільшує час завантаження сторінки — уникайте
• Графіка повинна допомогти зосередити увагу відвідувача на тому, що важливо на сторінці
• Уникайте дратівливих зображень, анімації, безпричинних ефектів
• Графіку ніколи не слід використовувати замість текстового вмісту, за винятком випадків, коли заголовок вимагає включення логотипу. Це зменшує індексацію пошуковою системою, доступність тощо.
• Зробіть графіку доступною за допомогою альтернативного тексту (тег alt).
• Під час використання тексту в графічних зображеннях переконайтеся, що є достатній контраст, щоб вони були розбірливими. Це особливо важливо при використанні фонових зображень.

Існує три формати графічних файлів, які використовуються в Інтернеті: JPG, GIF і PNG. Кожен із цих форматів файлів розроблено з певною метою, тому важливо розуміти відмінності, коли ми використовуємо їх на веб-сайтах.

Формат зображень JPG розроблено для ефективного зберігання та стиснення реалістичних зображень і творів мистецтва (як кольорових, так і градацій сірого). Формат JPG дуже добре стискає зображення з великою кількістю кольорів і градаціями кольорів.

У форматі JPG не можна зберігати прозорий фон. Якщо необхідна прозорість фону вашого зображення, вам слід вибрати інший формат.

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

Формати зображень GIF і PNG використовують так званий «індексний колір». Вони зберігають мінімізовану палітру кольорів у файлі зображення та ключі до місця розташування цих кольорів на зображенні. Розмір файлу для зображень GIF і PNG зазвичай залежить від кількості використаних кольорів. Загальні номери кольорів: 2, 4, 8, 16, 32, 64, 128, 256.

Формати зображень GIF і PNG ідеально підходять для зображень із рівними кольорами (без градієнтів) і жорсткими краями. Типовими прикладами таких типів зображень є логотипи, логотипи та ілюстрації без градієнтів.