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

найважливіші

  1. Які типи графічних форматів існують?
  2. Формати зображень для растрових зображень
    1. Формат JPG
    2. Формат PNG
    3. Формат GIF
    4. Формат TIFF
    5. Формат PSD
    6. Формат BMP
  3. Формати векторних зображень - поки що не настільки популярні в Інтернеті
    1. Формат EPS
    2. Формат SVG
  4. Чотири найпопулярніші графічні формати: порівняльна таблиця

Які типи графічних форматів існують?

Зараз існує безліч форматів зображень для 2D-графіки та фотографій, де відповідні функції значно різняться. Загалом традиційні растрові зображення або растрову графіку можна відрізнити від векторних зображень, які використовуються рідко. У першому випадку зображення складається з багатьох конкретних точок, тобто пікселів. Чим менший розмір цих пікселів і чим їх більше, тим більше дозвіл хвиля якість файлу зображення, а отже, і розмір файлу. Розширення або скорочення файлу завжди несе за собою відповідну втрату якості, оскільки при кожній зміні, пікселів найбільш чітко сприймаються як маленькі квадратні споруди, які є.

Цей факт, у свою чергу, є найбільшою візитною карткою векторної графіки, яку можна мінімізувати або максимізувати будь-яким способом, не впливаючи на їх якість. Причиною цього є те, що векторні зображення складаються не з окремих пікселів, а навпаки представлені векторами. На час масштабований, фігури, що їх складають, що містять точні дані про розмір і довжину, автоматично адаптуються до нових габаритних розмірів. Однак, чим складніший вміст зображення, тим менш придатними є векторні формати. Таким чином, хоча фотографію з векторами можна імітувати, файл незліченна кількість граней, світлових ефектів і тіней їх можна відтворити лише за допомогою пікселів. Детальнішу інформацію про відмінності та подібності двох типів графіки див. У нашій статті порівняння векторних зображень та растрових зображень.

Формати зображень для растрових зображень

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

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

Формат JPG

Формат JPG або JPEG насправді відноситься до правило (ISO/IEC 10918-1), опублікований у 1992 р., Який описує різні процедури стиснення зображень. Оскільки стандарт не містить положень про те, як слід зберігати зображення, він вимагає використання додаткового формату, отже, стандарт був встановлений як JPEGФормат обміну файлами (JFIF) для всіх браузерів. Інші менш використовувані альтернативи Формат файлу для обміну фотографіями (SPIFF) та графічний формат Мережева графіка JPEG (JNG).

Формат стиснення JPG модифікує звичайну структуру піксельних зображень таким чином, що кожні 8 х 8 пікселів групуються в блок, який перераховується як набір на кожному кроці. У цьому процесі є, наприклад, a перетворення кольорового простору RGB в колірну схемуYCbCr і т. зв фільтр низьких частот, де фільтруються більш високі частоти, щоб зменшити розмір файлу. Залежно від обраного ступеня стиснення процес пов’язаний із втратою якості, оскільки вся інформація на зображенні не може підтримуватися. Згідно зі статистикою W3Techs, близько трьох чвертей веб-сторінок використовують формат JPG, що пояснюється ефективністю розміру файлу, пов'язаного зі стисненням.

Рекомендоване застосування: зберігання та публікація фотографій.

Формат PNG

Ще одним з найпопулярніших форматів в Інтернеті є PNG (Портативна мережева графіка), універсальний формат зображень, визнаний Консорціумом Всесвітньої павутини (W3C), який вперше з’явився в Інтернеті в 1996 р. Як сучасна, безпатентна альтернатива GIF (Graphic Interchange Format), формат PNG виділяється можливістю стискати зображення без втрат і запропонувати глибину кольору до 24 біт на піксель (16,7 мільйона кольорів) з 32-бітовим альфа-каналом. На відміну від GIF, формат PNG не може генерувати анімацію.

PNG підтримує як прозорість, так і напівпрозорість (завдяки вбудованому альфа-каналу), яку можна застосовувати до всіх типів зображень, а також через чергування, що дозволяє прискорити композицію файлів зображень під час процесу завантаження. механізми корекції кольору або яскравості вони забезпечують, щоб файли зображень у форматі PNG виглядали більш-менш однаково в різних системах. Такі інструменти, як pngcrush, можна використовувати для стиснення графіки у форматі PNG. Через процес стиснення без втрат файли порівняно більші, тому формат не такий придатний для відображення фотографій, як, наприклад, JPG. Формат PNG також пропонує можливість зменшення колірного простору (з 1 до 32 біт на піксель).

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

Формат GIF

Інтернет-портал CompuServe створив Формат графічного обміну, GIF, в 1987 році як кольорова альтернатива тодішньому чорно-білому формату X BitMap (XBM). На відміну від інших існуючих на той час рішень, таких як PCX або MacPaint, файли GIF вимагали менше місця для зберігання завдяки ефективному компресія LZW (стиснення даних за алгоритмом Лемпеля-Зів-Велча), саме тому формат був дуже популярним у перші часи Інтернету. JPG та PNG взяли на себе лідируючі позиції як графічні та графічні формати, хоча, починаючи з версії GIF89a (1989), формат може групуватися кілька зображень в одному файлі, що зробило його улюбленим форматом для створення невеликих анімацій.

Вся інформація про кольори GIF розміщується в таблиці, кольоровій палітрі. Ця таблиця містить до 256 кольорів (8 біт), тому цей формат зображення не підходить для перегляду фотографій. Кожен з даних також можна визначити як прозорий, хоча, на відміну від сучасного формату PNG, напівпрозорість неможлива, тому піксель відображається чи ні.

Рекомендоване застосування- Створення анімації, картинки або логотипу, де менша глибина кольору не створює проблем.

Формат TIFF

TIFF (Tagged Image File Format) - графічний формат, що використовується для передачі зображень із високою роздільною здатністю та друкованих даних. Він був розроблений у 1986 році корпорацією Microsoft у співпраці з Aldus, який сьогодні належить Adobe, і був оптимізований для інтеграції розділення кольорів та кольорових профілів (ICC-профілі) відсканованих зображень. TIFF також підтримує Кольорова модель CMYK і допускає глибину кольору до 16 біт для кожного кольорового каналу (загальна глибина становить 48 біт). З 1992 року ви можете стиснути формат без втрат - за допомогою згаданого алгоритму LZW, який також використовується у GIF.

Завдяки своїм характеристикам TIFF зарекомендував себе як загальний стандарт для зображень, якість яких відіграє більш важливу роль, ніж розмір файлу. Саме з цієї причини він використовується редакційні статті та друковані засоби масової інформації, а також у монохромний графічний файл, як це може бути у випадку з технічними кресленнями. Для зберігання та презентації географічна інформація на основі решіток (карт, аерофотозйомок тощо) встановлено формат GeoTIFF, який забезпечений додатковими ярликами.

Рекомендоване застосування- передача якісних зображень із високою роздільною здатністю для відбитків

Формат PSD

Adobe пропонує, серед іншого, власний формат PSD (Photoshop Document) для зберігання графічних проектів, розроблених за допомогою Photoshop. Це виділяється фактом забезпечення інформації, що стосується шарів, каналів або векторів, що дозволяє їх подальше редагування. Таким чином ви можете редагувати додані, продубльовані, приховані, переміщені або видалені шари, а також кожен із елементів. Їх можна зберегти в одному файлі PSD як шари, так і відповідні дані зображення без втрат. Цей формат зображення особливо корисний для графічних зображень з високим значенням розпізнавання, таких як логотипи або банери, які потрібно швидко та за потреби адаптувати до кожної з платформ та розмірів екрану.

Зображення у форматі PSD можна відкривати лише в Adobe Photoshop без будь-яких обмежень, тому обмін між програмами Windows та macOS працює ідеально. Таким чином, цей графічний формат можна назвати, певним чином, як формат, який працює в будь-якій системі. PSD працює в основному як формат зберігання під час процесу редагування. Для редагування в Інтернеті відповідний файл потрібно перетворити у Формат PNG або в JPG перед завантаженням на сервер, Зберігання даних зображень на всіх рівнях без втрат дозволяє ефективно їх модифікувати, але він також несе великий обсяг даних. Для перетворення PSD-графіки необхідно лише мати веб-інструмент, такий як Zamzar.

Рекомендоване застосування: тимчасове зберігання та републікація часто використовуваних графічних зображень, шаблонів макета

Формат BMP

BMP (Растрове зображення Windows) був розроблений для операційних систем Microsoft та IBM і випущений у 1990 році з Windows 3.0 як формат зберігання для растрових зображень із глибиною кольору до 24 біт на піксель. Формат нестиснутого зображення присвоює кожному пікселю значення кольору, тому файли зазвичай дуже великі, саме тому формат не підходить для використання на веб-сторінках.

Рекомендоване застосування: зберігання фотографій/графіки в автономному режимі

Формати векторних зображень - поки що не настільки популярні в Інтернеті

Векторні зображення особливо підходять для застосування на веб-сторінках, оскільки вони не потребують стільки місця для зберігання, як растрові зображення. Формати для цього не описують відсоток кольору, який має піксель на кожному зображенні, а швидше об'єктівз яких складене зображення. Сюди включені круглі та криві поверхні, текст, прямі та зігнуті лінії тощо, а також їх положення, розміри, кольори та інші характеристики. У поєднанні з вищезазначеним аспектом масштабування без втрат, реалізація адаптивних веб-елементів без бар’єрів це стає дитячою грою. Крім того, у файли з векторними форматами зміни можна вносити в будь-який час, хоча рівень складності значно зростає із поступовою складністю файлів зображень. Ще однією перевагою над растровими зображеннями є можливість генерувати анімацію за допомогою JavaScript.

Формат EPS

У співпраці з виробниками програмного забезпечення Aldus та Altsys Adobe розробила та опублікувала формат векторного зображення EPS (Інкапсульований PostScript). Назва цього формату пов'язана з тим, що файли зберігаються мовою опису сторінок PostScript, що дає можливість редагувати складні сторінки на лазерних принтерах та в одиницях експозиції. Для цих цілей PostScript описує елементи друкованої сторінки, такі як лінії, кола, зображення тощо.., та надає інформацію про вашу посаду. EPS також розширює цю інформацію на зображення з точними даними про вихідний розмір, так званий обмежувальна коробка. Факультативно, файли EPS містять попередній перегляд із нижчою роздільною здатністю, який може служити заповнювачем. Формат зображення Adobe описує кожен з об'єктів незалежно від наступних пристроїв виведення, дозволяючи обмінюватися даними між різними носіями.

EPS раніше використовувався здебільшого в друкованих виданнях, але був замінений на наступник формату PDF (Портативний формат документа), який більше підходить для надсилання електронних листів через менші розміри файлів. Для веб-проектів однаково підходять як історичний EPS, так і сучасний PDF, який використовується більше для обміну або презентації текстових документів.

Рекомендоване застосування- Опис більш складних відбитків (формат застарілий)

Формат SVG

Хоча багато інших форматів векторних зображень, такі як формат Al (Adobe Illustrator Artwork), не підходять для веб-середовища, SVG (Масштабована векторна графіка), рекомендований W3C, підтверджує вражаючі переваги файлів векторних зображень. Специфікація для опису двовимірних векторних зображень, яка базується на Мова XML, він стає серйозною альтернативою традиційній растровій графіці, оскільки багато браузери підтримують HTML5, особливо у випадку мобільних та адаптивних веб-сторінок. У цьому сенсі файли SVG пропонують, крім файлу масштабованість без втрат і часто дуже малого обсягу даних, ці переваги:

  • Усі атрибути презентації, такі як кольори, шрифти тощо, можуть бути маніпулювати за допомогою CSS.
  • Скрипти можуть отримати доступ до вмісту через інтерфейс НД (Модель об'єкта документа).
  • машини можуть читати svg графіка.
  • Відповідний код може бути позначений та адаптований як окремий файл або безпосередньо в документі HTML.
  • Може бути заохочувати різними способами (SMIL, JavaScript, CSS).

Формат SVG є чудовим вибором, особливо для графіки, яка містить символи (наприклад, логотипи) або які повинні реагувати на запити користувачів (динамічні схеми) на веб-сайті. Цей формат векторного зображення також ідеально підходить для технічна графіка. Згадана вище статистика W3Techs показує, що SVG не використовується в більшості веб-проектів, на відміну від растрової графіки. Щоб отримати докладну інформацію про те, як працює інтеграція векторних зображень SVG, відвідайте наш посібник.

Рекомендоване застосування: технічна або інтерактивна графіка (логотипи, кнопки, піктограми тощо)