Основні формати зображень плюси та мінуси

основні

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

Незважаючи на це, є деякі технічні вимоги, які обмежують творчі здібності дизайнера. На першому плані тут виходять розширення зображень. Так, при роботі у Photoshop використовується.psd, в Illustrator-.ai, при додаванні невеликих анімацій ставимо.gif. Ну і звичайно ж.jpeg, коли милуємось роботами фотографів. Виникає питання: чому б не застосовувати єдиний формат і дати можливість існувати творчості, без жодних обмежень, чи не так?

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

1. Растрове зображення проти векторного

Растрові зображення складаються з дрібних точок, які називаються пікселями. Середня за величиною картинка сформована із мільйонів пікселів. Завдяки безлічі пікселів зображення набуває чіткості. Головний недолік растрових зображень у тому, що вони дуже великі. Все просто: у великому зображенні кожен піксель збільшено, а якість зображення зменшується.

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

2. Стиснення зображень із втратами та без втрат

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

плюси

основні

плюси

плюси

формати

формати

формати

формати

формати

А тепер настав час познайомитися з тими самими типами розширень.

Розширення: JPEG

зображень

Розшифрування: Joint Photographic Experts Group

Тип зображення: растровеТип стиснення: з втратами

Особливості:

  • Дуже поширене розширення, основне для фотографій та використання в інтернеті;
  • Існує стиснення без втрат для зображень у форматі JPEG, але часто не підтримується у більшості продуктів.

Переваги:

  • Підтримується всіма операційними системами;
  • Є гарним рішенням, коли потрібно подбати про колірні деталі;
  • Підтримується всіма фотокамерами, фотопринтерами та програмами для редагування;
  • Співвідношення між розміром та якістю –задовільний.

Недоліки:

  • Не підходить для логотипів, графічних іконок через алгоритм стиснення: не дуже добре відображає контрасти;
  • Не підтримує анімацію;
  • Не рекомендується зберігати зображення JPEG кілька разів; кожне нове збереження знижує якість.

Розширення: GIF

основні

Розшифрування: Graphics Interchange Format

Тип зображення: растровеТип стиснення: без втрат

Особливості:

  • Відповідно до Вікіпедії, слово “gif”, спочатку було визнано як іменник і дієслово (у значенні – зробити gif-картинку);
  • Розширення .gif було випущено компанією CompuServe. Цей тип зображення використовувався на перших веб-сайтах.

Переваги:

  • Gif стиск гарантує дуже невеликий розмір зображень;
  • Підтримує анімаційні ефекти;
  • Може підтримувати прозорість;
  • Gif формат добре підходить для кнопок, меню навігації, іконок, графічних текстів і т.д.

Недоліки:

  • Gif зображення підтримують лише 256 кольорів; через це рекомендується не вибирати цей формат для барвистих зображень;
  • Існують нові формати зображень, які можуть незабаром змінити “добрий старий GIF”.

Розширення: TIFF

Розшифрування: Tagged Image File Format

Тип зображення: растровеТип стиснення: зазвичай стисло, може бути стиснуто в обох форматах (без втрат, іноді з втратами)

Особливості:

  • .tiff формат був розроблений Aldus, але 2009 патент придбала компанія Adobe Systems;
  • Хороше рішення для сканування абовідправок факсом.

Переваги:

  • .tiff формат не стиснутий, і це означає, що дані не губляться;
  • Зображення точні та високої якості.

Недоліки:

  • Він, як і раніше, не скрізь підтримується;
  • Розмір зображень несумісний із веб-використанням;
  • Через великі розміри є багато негативних сторін: важко надсилати зображення у форматі TIFF, цифрові камери не можуть зберігати багато зображень.

Розширення: PNG

зображень

Розшифрування: Portable Network Graphics

Тип зображення: растровеТип стиснення: без втрат

Особливості:

  • Розглядається як заміна для .gifформату;
  • .png файли краще підходять для збереження інформації, ніж gifs.

Переваги:

  • Використовується стиск без втрат, тому .png зображення не втрачають інформацію;
  • Порівняно з GIF найкраще реалізується прозорість;
  • Доступна анімація (за фактом, це два варіанти .png формату: MNG, що означає Multiple-image Network Graphics та APNG – Animated Portable Network Graphics)

Недоліки:

  • Чи не широко підтримується, але є спроби поліпшення стійкості;
  • Великі зображення краще зберігати у форматі JPEG для зменшення ваги.

Розширення: SVG

формати

Розшифрування: Scalable Vector Graphics

Тип зображення: векторТип стиснення: як правило, не стиснутий, але можливе використання стиснення

Особливості:

  • Розроблений Консорціумом Всесвітньої павутини;
  • Цей формат визначає зображення за допомогою XML-коду.

Переваги:

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

Недоліки:

  • Часто не підтримується різними програмами.