Тепер лідируючі позиції формату jpeg. Завдяки своєму вмінню стискати фотографії та кольорові картинки в кілька разів, він випереджає за мінімальною вагою формати gif і png, а bmp, як і раніше, "пасе задніх".
Зараз, мабуть, не знайти в Інтернеті веб-сторінку без наявності на ній будь-яких фотографій або картинок. Сьогодні це стало нормою при верстці будь-яких веб-сторінок, адже картинки пожвавлюють, прикрашають, доповнюють основний вміст сайтів і з успіхом застосовуються у всіх областях Інтернету. До речі, першим браузером, який міг показувати графіку, став Mosaic (мозаїка), що з'явився практично одночасно з появою гіпертекстової мови розмітки Html.
Нині майже всі браузери підтримують три основних формати растрової графіки використовуваних для Інтернету - Gif, Png і Jpg. Історично першим з'явився gif і саме за допомогою нього у перших браузерах можна було додавати та відображати картинки та медійну інформацію. Розробники при його створенні робили основний упор на максимальне зменшення розміру картинки, що зберігається.
Адже в той час швидкість Інтернету була настільки мала, і щоб завантаження зображень не тривало "цілу вічність", і був розроблений та застосований особливий "формат графічного обміну" (саме так розшифровується абревіатура GIF).
Особливість Gif в тому, що він може включати палітру, що складається лише з 256 кольорів. Тобто. зображення, перетворене на цей формат, завжди міститиме не більше 256 відтінків, а всі інші кольори будуть створюватися на основі підмішування. Але саме через це підмішування і з'являються різні несподівані артефакти при перетворенні повнокольорових фотографій в Гіф. Через цей очевидний і істотний недолік, для виведення на сторінки сайту повнокольорових картинок і фото все частіше використовують jpeg і png.
Але gif досі популярний у галузі Інтернету з однієї простої причини - він підтримує анімацію, єдиний з усіх, що використовуються в Інтернеті. Анімовані смайлики та аватарки, листівки та банери - це результат роботи формату Гіф. Правда зараз не менш популярні флеш-технології, але завдяки своїй простоті gif у улюбленцях у вебмайстрів, особливо початківців.
Суть цієї анімації полягає в тому, що в контейнері Гіф знаходиться не одна картинка, а відразу кілька і там же прописано час, через які ці зображення будуть змінювати одне одного. При цьому є можливість зациклити анімацію і тоді за останнім кадром знову почнеться показ першого. Сьогодні в Інтернеті є чимало спеціалізованих редакторів, у яких можна самостійно створювати анімацію Gif.
Також gif може підтримувати примітивний спосіб формування прозорості для створюваних зображень. Чому примітивний? Так тому, що Гіф підтримує всього два значення прозорості - прозорий або непрозорий, без будь-яких проміжних станів, яких можна досягти за допомогою використання альфа-каналів у форматах Png.
Через це виникають складності з відображенням рівня прозорості, що плавно змінюється, тому все, що стосується якісного прозорого фону для зображень - це прерогатива вже Png. Майже всі зображення з прозорим тлом, що ми можемо знайти в Інтернеті, мають розширення png.
Існує кілька варіацій Png, кожна з яких покликана виконувати свої завдання:
Png 8 - тут за аналогією з Gif, при збереженні фотографії в ПНГ 8 використовуватиметься лише 256 кольорів., тому результати стиснення зображень у цих двох форматах растрової графіки будуть практично ідентичними. Так само як і Gif - тут підтримується прозорість, але вже з альфа-каналом.
Png 24 - тут на кожен піксел фото виділяється три колірних каналупо 8 біт кожен (8*3=24), цим реалізується полноцветное формування зображення без спотворень. За якістю колірного відображення перевершує навіть Jpg, але по вазі буде важче.
Png 32 - тут три колірні канали відповідають за формування повнокольорового зображення, а четвертий виділяється окремо для формування альфа-каналу, що дозволяє використовувати ПНГ 32 для отримання картинок з прозорим фоном. У Png 32 ви зможете вибрати будь-яку зміну ступеня прозорості, завдяки чому такі картинки однаково добре виглядатимуть на всіх веб-сторінках з будь-яким фоном.
Тепер давайте узагальним всю інформацію і зробимо деякі висновки.
Вітаю на блозі всіх на блозі сайт. Сьогодні хочу розповісти про три найпопулярніші формати картинок, які використовуються на просторах всесвітньої мережі інтернет, на різних сайтах, блогах і не тільки.
Ця тема дуже важлива, адже різні формати призначаються для різних цілей. Якщо всі нюанси можна легко зменшити навантаження на свій хостинг адже завантаження (вага) різних форматів різняться.
Формати картинок png, gif та jpeg
В Інтернеті на сьогоднішній день практично не залишилося сайтів, на сторінках яких би не було графічних елементів. На сьогоднішній день найпопулярнішими форматами картинок є JPEG, PNG, GIF. Усі вони різняться між собою за призначенням. Нікому не секрет, що сторінка повинна "важити" якнайменше. Розмір ("вага") графіки на сайті залежить як від форматів картинок, і від їх розмірів . Звичайно, для зменшення зображень використовують різні методистиснення, які можуть працювати як із зменшенням якості зображення, так і без нього.
Для отримання максимально оптимального розміру картинки для веб, слід використовувати орієнтовані на це , які не будуть створювати зайвого навантаження у браузерах користувачів. Можна скористатись усім відомим фотошопом, але я бачив рекомендації на програму Fireworks від Adobe. Далі розберемо три популярні розширення картинок.
PNG (Portable Network Graphics)– спочатку розроблявся як альтернатива розширенню GIF. Спочатку PNG призначався для застосування в Інтернеті. На сьогоднішній день картинки формату PNG не набули великої популярності. Якщо бути чесним, я почав використовувати PNG зображення у себе на блозі, коли перейшов на прозорий фон картинки. При стисненні цього формату ми не отримаємо втрат як колірі це дає переваги зберігати незакінчені зображення PNG. За допомогою варіацій PNG можна легко замінити JPEG та GIF:
- PNG 8- вісімка позначає, що при збереженні буде використовуватися не більше 256 кольорів (за аналогією, як і GIF). Взагалі PNG 8 був розроблений, щоб замінити картинки формату GIF, але при цьому він відрізняється тим, що не може відображати анімацію в жодному вигляді. Можна використовувати низькорівневу прозорість.
- PNG 24– 24 означає, що використовується 24-бітна палітра кольору. Ця варіація призначалася для заміни формату JPEG. Як і у форматі JPEG, PNG 24 зберігає яскравість та відтінки кольорів у фотографіях. Цей форматкартинок використовує близько 16.7 млн. кольорів, через що прийшов на зміну повнокольорових зображень, як у JPEG. Має підтримку багаторівневої прозорості, що дозволяє зробити плавний перехід від прозорої області до кольорової.
- PNG 32– схожий на варіацію 24, але відрізняється тим, що можна вказати зміну ступеня прозорості, а це дає добре видиме зображення на будь-яких веб-сторінках з будь-яким фоном.
Якщо брати до уваги навантаження на веб-сторінку, то розмір PNG 8 майже вдвічі менший за розмір PNG 24, але це не дивно, адже вони призначалися для заміни форматів GIF і JPEG (якість відповідає розміру).
GIF (Graphics Interchange Format)– це перший історичний формат, який використовується в . Навіть сьогодні це розширення має велику популярність. Картинки формату GIF мають невеликий розмір, тому навантаження на сервер мінімальне. Особливість GIF – це наявність анімації .
Невеликий розмір картинок пояснюється тим, що GIF може мати не більше 256 кольорів. Саме тому GIF не використовують для виведення повнокольорових зображень і фотографій.
Принцип GIF анімаціїполягає в тому, що GIF має контейнер, де знаходиться не одне зображення, а кілька і прописано час показу зміни картинки один одним. Після останньої картинки почнеться перша. Таким чином, створюється анімація GIF.
Ще одним плюсом використання GIF буде примітивна прозорість зображень. Для будь-якого пікселя можна встановити лише два значення – прозорий та непрозорий.
JPEG (Joint Photographic Experts Group)– це розширення є власністю асоціацій американських фотографів (можна зрозуміти з абревіатури). Був створений для зберігання повнокольорових зображень, передачі хорошої якостізображення.
Використання JPEG може призвести до великих навантажень. Якщо на веб-сайті необхідно передати якість (в деталях) фотографію, звичайно без JPEG не обійтися. Якщо вести блог, то у використанні JPEG гострої необхідності немає, тому що розміри картинок формату JPEG дуже великі у вазі, що дає навантаження на хостинг.
Ми всі завантажуємо зображення, створюємо фото, робимо "меми", щоб ділитися ними соціальних мережах. Багато постають зображення навіть не замислюючись над тим, а який формат графічного файлу підходить для конкретного випадку найбільше. Ця стаття не стосується фахівців растрової та векторної графіки. Іншим же цей короткий аналіз графічних форматівбуде не зайвим, щоб краще розуміти для яких цілей використовувати той чи інший формат. Тож почнемо.
Короткий аналіз графічних форматів файлів
- JPG / JPEG / JFIF
- TIF/TIFF
Растр проти вектора
Перш ніж ми перейдемо до п'яти вибраних форматів файлів, добре знати, що є два основних графічних сімейства: растр і вектор, і всі формати файлів зображень, перераховані нижче, відносяться до сімейства растрових.
У растрової графіці зображення зібрано з пікселів, тоді як векторна графіка збирається із шляхів, про ділянки ділянок ліній.
Стиснення файлів
Крім того, формати файлів зображень можна розрізняти на основі ефектів стиснення, які називаються компресією. Різновидів схем стиснення досить велика кількість, але суть їх існування можна звести в одне завдання - стиснути растровий файл якомога ефективніше. Стискати графічний файл немає сенсу, оскільки його розмір залежить немає від масштабу, як від кількості шляхів у ньому.
Компресія може дуже ефективно стискати зображення буквально вдвічі і більше. Але при цьому майже завжди відбувається втрата якості, тому що основний алгоритм компресії - виділити кілька пікселів і замінити їх одним або двома схожими за відтінком. Компресійний файл ніколи не буде точним поданням оригіналу, за деяким винятком. Поговоримо про це далі. Стиснення файлів зазвичай підходить для невеликих фотографій та не підходить для проф. малюнків чи якісних ілюстрацій, презентацій.
Компресія без втрат як - це той самий вихідний файл, оскільки компресія без стиску є точним уявленням оригіналу.
Зображення JPG/JPEG/JFIF
Абревіатура від: Joint Photographic Experts Group - Об'єднана група експертів з фотографій.
Розширення файлів: .jpg / .jpeg
Найпоширеніший формат серед растрових файлів зображень. Цифрові фотокамери зберігають зображення саме в цьому форматі. Файли JPEG застосовують метод стиснення із втратами, який може значно зменшити розмір файлу без істотних збитків для якості.
Мінуси: цей формат не захищений від деградації поколінь. Це означає, що при кожному редагуванні та збереженні якість зображення з кожною новою версієюфайл буде погіршуватися.
Застосовність: непрозорі зображення, пристрої захвату зображень (гаджети, фотокамери, екш-камери).
Формат зображення PNG
Абревіатура від: Portable Network Graphics - портативна мережева графіка 
Розширення файлів: .png
Ця безкоштовна альтернатива GIF з відкритим вихідним кодом, яка підтримує 16 мільйонів кольорів, на відміну від GIF, максимум якого 256-колірна палітра. Це найкращий форматфайлів для зображень із збереженням джерела кольорів. Формат підходить для передачі балансу тону. Анімований файл PNG доступний у форматі APNG. Ці файли зазвичай мають прозоре тло.
Мінуси: Найбільш підходить для файлів великих розмірів. Сам формат PNG не підтримує анімовану графіку.
Застосовність: редагування зображень, веб-зображення, зображення з урахуванням шарів, таких як прозорість або ефект загасання.
Розширення файлу TIF
Абревіатура від: Tagged Image File Format- Формат для зберігання растрових графічних зображень.
Розширення файлів: .tif / .tiff
Гнучкий формат файлу, що легко розширюється, здатний зберігати файли з великою глибиною кольору. Ці файли мають прозоре тло. Вони ідеально підходять для логотипів компанії.
Мінуси: Не ідеальні для веб-браузерів
Застосовність: Початковий етапфотографічних файлів у друку. Програмні пакети OCR.
Формат файлу GIF
Абревіатура від: Graphics Interchange Format - формат обміну зображеннями. 
Розширення файлів: .gif
Хоча GIF має низький рівень стиснення в порівнянні з більшістю відеоформатів, цей формат найбільш популярний серед користувачів для анімації зображень.
Мінуси: формат обмежений 8-бітною палітрою (256 кольорів) і не підходить для фотографічних зображень або згладжування.
Застосовність: Графіка, яка вимагає декількох кольорів, наприклад, спрощені діаграми, логотипи та анімації, які складаються на більш ніж 50% з одного кольору.
Формат файлу зображення BMP
Абревіатура від: Bitmap Picture - буквально формат для зберігання растрових зображень
Розширення файлів: .bmp
Цей формат розроблений компанією Microsoft і призначений для зберігання великих стиснених файлів усередині ОС Windows.
Мінуси: цей формат не використовує стиснення.
Застосовність: спрощена структура формату робить файли bmp ідеальними для Windows.
Це найпоширеніші формати файлів зображень, які використовують користувачі в даний час. Тепер, коли Ви знаєте, який з них ідеально підходить для будь-якої мети, Ви зможете краще розуміти файли яких графічних форматів використовувати для себе.
При створенні сайтів на етапі верстки завжди є завдання вибору того чи іншого формату для зберігання зображень. Зображення можна зберігати в будь-якому форматі PNG, JPEG, GIF та десятці інших, але який формат вибрати, щоб передати кращу якість з мінімальним розміром одержуваного файлу зображення?
Який формат файлу вибрати?
Формат GIFобмежений 256 кольорами. Це формат без втрат і при його використанні досягається мінімальне стиснення зображення. Формат GIF підтримує анімацію (єдиний із усіх форматів) та прозорість, але напівпрозорі картинки зберегти в ньому не вдасться. За рахунок особливостей алгоритму, він дуже добре стискає зображення, в якому є вертикальні лінії (для вебу, наприклад, це можуть бути вертикальні розділові смуги, однокольорові іконки, графічні точки тощо). Він може бути використаний для зберігання креслень, текстової та знакової графіки у невеликому розмірі файлу.
Формат PNGє форматом, в якому стиск відбувається без втрат. У цьому форматі кожен піксел припадає 3 колірних канали (RGB – червоний, зелений, синій), тим самим реалізується повнокольорове формування зображення без спотворень. За якістю колірного відображення формат PNG може перевищувати JPG, але за розміром файлу буде також більшим. Формат PNG підтримує різні рівні прозорості (напівпрозорість). За рахунок особливостей алгоритму він дуже добре стискає зображення, в якому є горизонтальні лінії. І коли стоїть завдання вибрати збереження файлу у форматі GIF або PNG, для випадків коли картинка являє собою примітивні лінії, варто звертати увагу на положення цих ліній - тобто. у форматі GIF варто зберігати зображення з вертикальними лініями, PNG - горизонтальними. PNG є гарним виборомдля зберігання креслень, тексту та знакових графіки в невеликому розмірі файлу.
Формат JPGє форматом, де є втрати кольору. Алгоритм роботи в цьому форматі такий, що в ньому дуже добре стискаються зображення з градієнтами (зберігаються кольори першого пікселя в градієнті та останнього, а при виведенні зображення – всі проміжні кольори між цими точками обчислюються), що робить його корисним для зберігання зображень у меншому розмірі , ніж формат BMP. Фотографії, переливи, логотипи, бекграунди тощо краще зберігати у форматі JPG.
Таким чином, при розробці сайтів можна досягти дуже хороших результатіву швидкості за рахунок правильного виборуформат зберігання зображення.
JPEG і PNG - це два основних формати для винаходів, які використовуються на сайтах. У деяких випадках краще використовувати JPEG, а в деяких - PNG.
JPEG (він же JPG) - це формат зображень, який використовує стиснення з втратами і не підтримує прозорість. Поз-во-ляє налаштовувати рівень якості збереження-е-мого ізоб-ра-же-ня - при його зниженні видаляються деталі і дода-ля-ються шуми на изоб-ра-же- ня, проте розмір стає більш компактним. JPEG опти-ма-лен для зображень з великою кількістю кольорів (наприклад, для фотографій).
PNG 24 - це формат винахід, який працює з повно-кольоровими винаходами, використовує стиснення без втрат і поз-во- ляє зберігати прозорість. Налаштувати якість збереження в PNG 24 неможливо, одна-но, можна адаптувати збереження моє винахід для досягнення -ня міні-маль-ного розміру файлу: для цього можна знизити кількість кольорів у зображенні. PNG 24 опти-ма-лен для винаходів з невеликою кількістю кольорів (наприклад, для ікон, схем і малюнків). PNG 8 - це більш компактний формат, але застосовуваний тільки для зображень з обмежень кількостями кольорів (256 - це максимум).
