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

Графічні формати файлів, які підтримуються більшістю популярних веб-браузерів, є: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) та векторна графіка. Деякі властивості графічних файлів:

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

GIF заснований в 1980 році і прийнятий веб-дизайнерами на початку 1990-х років як основний графічний формат для веб-сторінок. GIF файли використовують алгоритм стиснення, який робить розмір файлу маленьким для швидкого завантаження. GIF обмежений 256 кольорами (8 біт), підтримкою прозорості та черезрядкової графіки. Також є можливість створювати анімовану графіку, використовуючи цей формат. Всі браузери можуть відображати файли GIF без проблем.

Переваги GIF:

  • графічний формат, що найбільш широко підтримується
  • Схеми виглядають краще у цьому форматі
  • Підтримка прозорості

Файли стиснуті, але підтримують "справжні кольори" (24 біт) і є кращим форматом для фотографій, де питання якості дуже важливе. JPEG підтримує прогресивний формат, який дозволяє майже миттєво бачити зображення, яке покращиться якість, коли закінчиться завантаження.

На відміну від GIF файлів, веб-дизайнери можуть керувати стислими файлами JPEG, що дозволяє мати різні рівні якості зображення та розміри файлу.

Переваги JPEG:

  • Великий стиск означає більш швидку швидкість завантаження.
  • Виробляє відмінну якість для фотографій та складних малюнків.
  • Підтримка 24-бітового кольору.

PNG є відносно недавнім форматом, який був введений як альтернатива для файлів GIF. PNG підтримує до 24 бітового кольору, прозорість, переплетення і може містити короткий текстовий опис зображення, який використовується в пошукових системах.

Переваги PNG:

  • Подолає 8-бітовий колір обмежень у GIF
  • Дозволяє текстовий опис зображень для пошукових систем
  • Підтримує прозорість
  • Схеми виглядають краще, ніж у JPEG

Векторна графіка

Більшість веб-графіки є растровим зображенням або малюнком, що складається із сітки кольорових пікселів. Ілюстрації повинні бути створені у векторній графіці, яка складається з математичного опису кожного елемента, який складає форми ліній та кольору зображення. Векторна графіка створюється за допомогою таких програм, як Adobe Illustrator або CorelDRAW. Векторна графіка має бути перетворена у будь-якому форматі GIF, JPEG або PNG для використання на веб-сторінках.

Який формат потрібно використовувати?

Веб-дизайнер може вибрати GIF або JPEG формат для більшості застосувань. Але, оскільки розмір файлів GIF, як правило, невеликий у порівнянні з розміром файлу JPEG, більшість веб-дизайнерів використовуватимуть формат GIF для фону, коробок, кадрів та будь-яких інших графічних елементів, які виглядають відмінно за допомогою 8-бітового кольору.

Більшість дизайнерів виберуть формат JPEG для фотографій та ілюстрацій, де стиск не йде на компроміс візуальної якості зображення.

Фотографії та картинки відрізняються одна від одної не лише за змістом, а й за іншими «комп'ютерними» характеристиками. Наприклад, за розміром.

Буває так, що начебто два однакові малюнки, але в одного розмір утричі більший, ніж у іншого.

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

А буває так, що малюнку начебто не вистачає фарб. Ось приклад.

І за все це відповідає формат або тип файлу.

На замітку . Зображення бувають різних форматів. І існує їх дуже багато. Ми не розглядатимемо їх усі, а поговоримо про найпоширеніші: bmp, gif, jpg (jpeg), png, tiff.

Відрізняються формати зображень один від одного насамперед якістю. А якість відрізняється за кількістю (насиченістю) кольорів.

Наприклад, я малюю картину, використовуючи різні кольори. І тут раптом частина їх закінчилася, і доводиться домальовувати тим, що є. Я, звичайно, постараюся зробити все можливе, щоб це не сильно позначилося на результаті, але все одно картина вийде не така, як хочеться – блякліша, розмита.

Так і з форматами зображень. Якийсь залишає всі кольори, інший обрізає частину. І, буває, через це картинка псується.

Це грубий приклад — насправді там усе дещо складніше. Але, гадаю, суть ви вловили.

Розповсюджені формати зображень

BMP - формат малюнків, зроблених у програмі Paint. Його можна використовувати для зберігання зображень на комп'ютері. Але в інтернеті такий тип не підійде через великий обсяг. Так що якщо ви хочете опублікувати картинку Paint у блозі або соціальній мережі, вона має бути іншого типу - gif, jpg або png.

GIF – популярний формат картинок в інтернеті. У ньому можна зберігати зображення без втрати якості, але з обмеженою кількістю кольорів - 256. Особливу популярність gif отримав завдяки тому, що в цьому форматі можна створити невеликі анімовані картинки.

JPG - формат фотографій та картин з великою кількістю кольорів. У ньому можна зберегти зображення без втрати якості, так і з втратою.

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

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

Який формат вибрати

  • BMP - якщо це малюнок, зроблений у програмі Paint, і ви збираєтеся тримати його лише на комп'ютері.
  • GIF — якщо анімація або малюнок із невеликою кількістю кольорів для публікації в інтернеті.
  • PNG - якщо це малюнок, в якому багато кольорів або якісь прозорі частини.
  • JPG (jpeg) – якщо фотографія.
  • TIFF – зображення для поліграфії (візитки, буклети, плакати тощо).

Всім привіт! Усі бачили у картинок в інтернеті таку приписку, як bmp, png, jpgабо gif(ну чи інші)? Наприклад, foto.png чи foto.jpg. Це графічні файли різних форматів . Думаю, не я один замислювався над тим, у чому відмінність цих форматів зображень? Спробуймо розібратися.

Що таке формати зображень бувають і навіщо вони потрібні?

Не засмічуватиму статтю надлишком розумних слів. Тим більше, сам не завжди розумію їхній зміст. Формат зображення стосовно інтернету та комп'ютера (під зображенням я маю на увазі якусь графічну інформацію – фотографії чи малюнки) – це спосіб зберігати і, відповідно, передавати картинки як елемент інформації.

Це своєрідний інструмент, матеріал або метод, за допомогою якого можна зберегти на ваш комп'ютер картинку, що сподобалася, або перекинути з фотоапарата на ПК ваші фото. Загалом це спосіб кодування інформації.

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

(Як ілюстрацію своїх слів я взяв портрети В. Висоцького)

Фотографія може бути чорно-білою, кольоровою, цифровою, паперовою у вигляді слайду. Художник може зробити ваш портрет фарбами, олівцем, чорнилом, на папері, на полотні, на стіні. Скульптор може виконати портрет із гіпсу, мармуру, дерева, металу…

Загалом варіантом незліченна кількість. Але будь-який з них буде вашим портретом.

Те ж саме і з форматами зображень- Варіантів безліч.

Але їх можна розділити на дві великі групи – растрові і векторні. А ні, є ще одна група – змішані, або комплексні, куди ж без них у світі 🙂

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

Векторні зображення ґрунтуються на геометричних фігурах – точках, кривих, колах, багатокутниках. Векторні зображення можна збільшувати без втрати якості. Приклади векторних файлів svg, cdr, eps. Але, щиро кажучи, я не стикався з такими форматами.

Комплексні формати, як випливає з назви, мають ознаки і векторних, і растрових зображень. Найбільш відомий приклад такого формату – файли pdf. Напевно, кожен стикався з ними: багато електронних книжок і документів якраз і зберігаються у PDF-форматі.

Растрові зображення

Найбільш поширені формати зображень –jpg (jpeg),gif,png,bmp. Усі вони належать до растрової групи.

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

Ось приклад растрового малюнка та її частини під збільшенням.

Бачите, як розмитий малюнок зі збільшенням?

Натомість редагувати, зберігати та передавати растрові зображення набагато простіше, ніж векторні. Це дуже важливо для звичайних користувачів.

Працювати з растром можна у таких зручних та відомих редакторах, як Adobe Photoshop та Paint.

Характеристики растрових зображень

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

Найбільш розповсюджені формати зображень, безумовно, BMP,GIF,PNG, JPEG.

До першої групи відносяться формати BMP, GIF, PNG, до другої – JPEG. Стиснення без втрат засноване на видаленні надмірної інформації, а стиск із втратами – на відкиданні інформації, яку зір не сприймає.

У чому різниця форматів зображень bmp, png, jpg, gif

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

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

ФорматJPEG (Joint Photographic Експерти Group) – об'єднана група експертів-фотографів. Так називалася компанія, яка розробила цей формат. Мабуть, найпоширеніший формат зображень, з яким стикався кожен, хто хоч раз сідав за комп'ютер. Редагувати файли jpeg можна практично у будь-якому графічному редакторі. При стисканні колір сусідніх пікселів усереднюється. Цим спричинені втрати як. Проте якість таких зображень непогана, навіть хороша, якщо порівнювати з деякими іншими форматами.

Крім того, "важать" jpeg-файли мало. Їх легко можна переслати з телефону на телефон, по e-mail або викласти в інтернет. Також невеликий розмір дозволяє зберігати велику кількість зображень.

ФорматBMP (Bitmap Picture) – растрове зображення. Якість зображення на висоті, тому що інформація майже не стискається. Але й розмір таких файлів у порівнянні з jpeg – огого.

ФорматGIF (GraphicsInterchangeФормат) – формат обміну графічними даними. Дуже популярний формат. Він дозволяє зберігати анімовані зображення. Хоча вважається, що він застарів. Але, судячи із популярності гіфок, зі сцени цей формат зійде не скоро. Звичайно, для фотографів gif не піде – кількість кольорів у цьому форматі дуже обмежена 256. Зате в інтернеті це чи не основний формат. Ще один важливий плюс – файли GIF підтримують режим прозорості.

ФорматPNG(Portable Network Graphics) – мережна графіка, що переноситься. Формат був розроблений на зміну формату GIF. Існує навіть неофіційне розшифрування абревіатуру як "PNG is Not GIF" - PNG не GIF. Цей формат підтримує не лише прозорість, а й напівпрозорість від 1% до 99%, що є величезним плюсом. Але PNG не може в одному файлі зберігати кілька зображень як gif. Тому він не може використовуватися для створення анімованих картинок.

Звичайно, я розповів не про всі формати зображень. Але ці – найпоширеніші. Тому, гадаю, вам була корисна моя стаття «Чим відрізняються формати зображеньbmp,png,jpg,gif».

Якщо інформація була цікава та корисна, підписуйтесь на анонси статей на , а також поділіться статтею з друзями в соцмережах. Кнопки соцмереж – під статтею, форма підписки – за посиланням вище або у формі зверху зліва.

Успіхів вам у всіх ваших шляхетних починаннях!

Вітаю вас відвідувачі блогу

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

Існуючі типи файлів цифрових зображень

Тип файлу — це звичайний спосіб збереження інформації на ПК, який дозволяє програмі рахувати або відобразити її.

Розпізнати типи файлів потрібно за кінцевими 3-4 літерами його ім'я. За цими літерами дізнаються про розширення імен файлів. Різні програми застосовують різні розширення, зберігаючи файли.

Типи файлів зображень, що найбільш застосовуються (дивись таблицю).

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

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

Наприклад класичний додаток Microsoft Pain t або популярний Photoshopта маса інших.

Які типи файлів більш застосовні

Переважно використовуються формат JPEG (JPG), тому що можливо створити зображення високої якості, маючи невеликий розмір файлу стискаючи дані.

Дуже зручно для збереження та передачі файлів зображень. При необхідності високої якості зображень наприклад, для друку фотографій бажано зберігати зображення у форматах TIFF (TIF)і JPEGз найменшим стиском.

Переваги і недоліки

  • Переваги JPEG

Дуже багато програм здатні відобразити, відкрити та зберегти файл JPEG.

Зручно пересилати поштою через маленький розмір.

Стискаючи файл JPEGможна регулювати якість та розмір зображення.

  • Недоліки JPEG

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

  • Переваги TIFF

Зберігаючи зображення в TIFF-форматіякість не буде втрачено.

  • Недоліки TIFF

Деякі браузери та програми не мають можливості показу зображень формату TIFF.

Зображення TIFF-форматудосить великі в кілька разів можуть перевищувати одне й теж зображення JPEG-формату. А це означає TIFF файли по відношенню до файлів JPEGпоглинають багато місця на диску.

І лише дуже невеликі зображення TIFF-форматуможна надіслати поштою.

Втрата якості формату JPEG

Зображення JPEG-форматує неточною копією оригіналу у видошукачі.

Але все ж таки знімаючи з максимальною якістю різниця буде непомітна. Кожне наступне збереження або копіювання зображень JPEG-форматубуде втрачати трохи як.

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

Тому щоб отримати відмінну якість зображення, то зберігати його потрібно в JPEG-форматіз максимальною якістю або ж використовувати TIFF-формат.
Я ж на цьому з вами сьогодні прощаюсь.

Розкаже вам про всі основні формати графічних файлів.

RAW.

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

Переваги RAW очевидні - на відміну від JPG, який був оброблений в камері і вже збережений зі стиском даних - RAW дає найширші можливості обробки фотографії і зберігає максимальну якість.

Нотатка. Різні виробники фототехніки використовують різні алгоритми для створення RAW у камерах. Кожен виробник вигадує власний дозвіл для свого RAW-файлу NEF Nikon, CR2 Canon ...

JPEG (він же JPG).

Це найпоширеніший формат графічних файлів.

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

У JPG застосовується алгоритм стиснення із втратою якості. Що нам це дає? Явний мінус такої системи – втрата якості зображення під час кожного збереження файлу. З іншого стиснення зображення вдесятеро спрощує передачу даних.

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

TIFF.

Формат TIFF дуже популярний для зберігання зображень. Він дозволяє зберігати фотографії в різних колірних просторах (RBG, CMYK, YCbCr, CIE Lab тощо) та з великою глибиною кольору (8, 16, 32 та 64 біт). TIFF широко підтримується графічними програмами і використовується в поліграфії.

На відміну від JPG, зображення в TIFF не буде втрачати як після кожного збереження файлу. Але, на жаль, саме через це TIFF файли важать у рази більше за JPG.

Право на формат TIFF зараз належить компанії Adobe. Photoshop може зберігати TIFF без поєднання шарів.

PSD.

Формат PSD використовується у програмі Photoshop. PSD дозволяє зберігати растове зображення з багатьма шарами, будь-якою глибиною кольору та у будь-якому колірному просторі.

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

Також PSD підтримує стиск без втрати якості. Але велика кількість інформації, яка може містити PSD файл, сильно збільшує його вагу.

BMP.

Формат BMP один із перших графічних форматів. Його розпізнає будь-яка програма, що працює з графікою, підтримка формату інтегрована в операційні системи Windows та OS/2.

BMP зберігає дані з глибиною кольору до 48 біт та максимальним розміром 65535×65535 пікселів.
На даний момент формат BMP практично не використовується ні в інтернеті (JPG важить у рази менше), ні в поліграфії (TIFF справляється з цим завданням краще).

GIF.

Формат GIF був створений на зорі інтернету для обміну зображеннями. Він може зберігати стиснуті без втрати даних зображення у форматі до 256 кольорів. Формат GIF ідеально підходить для креслень та графіків, а також підтримує прозорість та анімацію.
Також GIF підтримує стиск без втрати якості.

PNG.

Формат PNG створений як для покращення, так і для заміни формату GIF графічним форматом, який не потребує ліцензії для використання. На відміну від GIF, PNG має підтримку альфа-каналу і можливість зберігати необмежену кількість кольорів.

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

JPEG 2000 (або jp2).

Новий графічний формат, створений для заміни JPEG. При однаковій якості розмір файлу у форматі JPEG 2000 на 30% менше, ніж JPG.

При сильному стисканні JPEG 2000 не розбиває зображення на квадрати, характерні для формату JPEG.

На жаль, на даний момент цей формат мало розповсюджений і підтримується тільки браузерами Safari і Mozilla/Firerox (через Quicktime).