різниця

Привіт усім! Якщо ви натиснули, щоб прочитати цю статтю, це тому, що вам не дуже ясно про відмінності між JPG, PNG та GIF і коли використовувати кожен на своєму веб-сайті. Щоб зрозуміти концепції, вам просто потрібно прочитати цю статтю до кінця і, якщо ви хочете зробити мене надзвичайно щасливою, поділіться нею, коли закінчите 🙂

Якщо я кажу вам правду, донедавна мені також не були зрозумілі відмінності. Але коли потреба нагальна, нічого не залишається, як навчитися!

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

І оскільки знаннями та знаннями слід ділитися, я розповім вам усе, що я знаю з цього питання. Залишайтеся!

Які відмінності між JPG, PNG та GIF?

№1. Що таке JPG?

JPG - це формат стиснення зображень з втратами. Це є, він втрачає якість кожного разу, коли ви зменшуєте його розмір. На вашому комп’ютері, ймовірно, сотні файлів JPG, і ви не замислювалися над тим, "скільки вони важать" (якщо так, то починайте світліше!).

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

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

Як відбувається стиснення в JPG?

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

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

JPG підтримує кольори CMYK та RGB, а також сірі шкали і здатний зберігати інформацію більше ніж 16 мільйонів різних кольорів.

На його скорочення відповідають Спільна фотографічна (експертна) група. Якщо ви знайдете JPG або JPEG, ви будете стикатися з однаковим форматом стиснення. Перші відповідають файлам з ПК або Windows, розширення яких містять лише три символи. Однак файли JPEG використовуються на MAC.

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

Коли використовувати JPG на своєму веб-сайті?

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

Ну, стисніть ці зображення приблизно до 300/400 КБ, наприклад, і вони будуть готові до завантаження в Інтернет. Ця вага є приблизною, оскільки зображення для повзунка на повну ширину не є таким самим, як зображення з невеликим розрізом, яке не повинно важити більше 100 КБ.

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

[box type = »попередження»] ПОПЕРЕДЖЕННЯ! Якщо ви переглядаєте цю статтю зі свого мобільного, ви можете не помітити великої різниці між зображеннями, які ви побачите нижче, але з комп’ютера я гарантую, що це є. [/ box]

Ми починаємо з a оригінальне зображення вагою близько 700 КБ, і ось що відбувається в кожному з форматів:

Вище ви можете побачити зображення в JPG з якістю 60 із 100 заощаджень для Інтернету у Photoshop. Як бачите, він підтримує досить прийнятну якість і лише важить 163 КБ.

Тут ви можете побачити те саме зображення в JPG з якістю 3 зі 100. У порівнянні з попереднім, якість набагато гірша (ви бачите горизонтальні смуги на задньому плані, так? важить лише 39 КБ.

При такому розмірі очевидно, що він дуже потворний, але що, якщо він вам потрібен лише в іншому розмірі?:

Вище маєте зображення PNG-8. Якість не дуже хороша і все ще важить 257 КБ. Половина фону прозора (ви можете перевірити це, збереживши зображення правою кнопкою), це основна чеснота PNG та Gif, що дозволяють грати з прозорістю.

Найкраща якість PNG виходить за допомогою PNG-24, але це саме зображення при експорті у PNG перевищувало 1 Мб ваги ... як ти залишаєшся?. Так, він важив навіть більше, ніж оригінал, тому ми навіть не завантажили його в цей експеримент; Ми хочемо, щоб наш веб-сайт залишався оптимальним і швидко завантажував вміст 🙂

Це GIF на 256 кольори. Ви бачите крапки, так? Втрата кольору та чіткості порівняно з експортованою у JPG є надзвичайною і важить удвічі ... 342 КБ.

GIF a 4 кольори. Повне спотворення кольорів, і тут ви не можете сказати мені, що не бачите крапок. 94 КБ легкості, але, як бачите, дуже мало користі для роботи з фотографіями або цифровими зображеннями, в яких ви хочете продемонструвати мінімум реалізму.

То для чого потрібні PNG та GIF-файли?

Ну, я зараз вам скажу.

# два. Що таке PNG?

На відміну від JPG, PNG - це формат стиснення без втрат. Її скорочення відповідають Портативна мережева графіка і спочатку він був створений для усунення дефектів та недоліків формату GIF (що ми побачимо пізніше).

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

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

Існує два типи файлів PNG:

  • PNG 8: має обмеження кольору, але вага файлу дуже мала (схожа на GIF).
  • PNG 24: не має обмежень щодо кольору, але розмір на диску буде більшим.

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

Різниця між PNG та JPG:

  • JPG має стиснення В збиток якість. Він ідеально підходить для великих зображень, які після зменшення залишаються прийнятною якістю. Він не підтримує прозорі плівки. Особливо для цифрових та фотографічних зображень. Легкі файли. Зізнається CMYK та RGB.
  • PNG має стиснення Без втрат якість. Ідеально підходить для зображень без фону, зображень із текстом та логотипами або штрихових малюнків. Висока якість, але файли повертаються набагато важче, ніж JPG. Приймає прозорі плівки. Він не підтримує CMYK, тому не корисний для (цифрового) друку.

Відмінності між PNG та GIF:

  • У більшості випадків файли PNG стискаються краще, ніж GIF.
  • Файли GIF забезпечують повну прозорість або повну прозорість. Тим не менше, PNG дозволяє створювати напівпрозорість. Насправді можна досягти 256 різних типів прозорих плівок, ніби це ще один колір. Ця напівпрозорість дуже корисна для відтворення напівпрозорих об'єктів.
  • Файли PNG підтримує мільйони кольорів поки зображення GIF має обмеження в 256 кольорів.
  • Нарешті, PNG не підтримує анімацію або рух, щось, що характеризує GIF і що змусило його відродитися з силою в останні часи.

Коли використовувати PNG на своєму веб-сайті?

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

№3. Що таке GIF?

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

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

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

Ах! Абревіатури відповідають терміну Graphic Interchange Format.

Коли використовувати GIF на своєму веб-сайті?

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

Міні-резюме, щоб скласти чіткі поняття про відмінності між JPG, PNG та GIF:

  • JPG: для фотографічних зображень - сукупна втрата якості - не підтримує прозорі плівки - CMYK та RGB так - не використовувати для логотипів або зображень із текстом - невелика вага.
  • PNG: ідеально підходить для логотипу на вашій веб-сторінці, для ілюстрацій або малюнків - стиснення без втрати якості - підтримує прозорі плівки та градієнти в них - RGB так, CMYK ні - дуже добре працює для ілюстрацій або зображень з текстом - важчі файли.
  • GIF: для простих ілюстрацій з плоскими кольоровими блоками і особливо для створення рухомих зображень - підтримує 256 кольорів - абсолютна прозорість (без градієнта) - невелика вага на диску.

Ви все прочитали? Юхууууууууууу! оле, оле і олееееее! Тепер ви можете зробити дві речі:

  • Залиште мені коментар, в якому сказано, що вам сподобалась стаття, або задаєте мені будь-які питання
  • Дайте поділитися і зробіть мене супер щасливим 🙂

PS: Я залишаю вас у додатку на випадок, якщо вас зацікавила стаття в PDF, щоб ви могли її завантажити

Пасхальне яйце Зображення: Pixabay