Може здатися, що 256 кольорів це багато. Для порівняння в складних фотографіях тисячі відтінків. В процесі перетворення в GIF діапазон кольорів сильно звужується, і це основна причина не використовувати GIF для кольорових фотографій.
GIF погано підходить для зображень з широким діапазоном кольорів, але обмеження в 256 кольорів може допомогти зберегти низьку вагу файлу, що ідеально підходить навіть для самих повільних з'єднань. Протягом довгого часу тільки GIF мав функцію прозорості. Зараз вона є в PNG і SVG.
Практичний курс по створенню дизайну сайтів в Photoshop
Стати професійним веб-дизайнером, створюючи затребувані макети сайтів.
графіка з низькою варіацією пікселів (тобто монотонні кольору типу логотипів і прапорів).
Залежно від вашого уподобання ви можете використовувати цей формат у вигляді «JPEG» або «JPG» - обидва є прийнятними варіантами одного акронима - Joint Photographic Experts Group.
На відміну від GIF формат JPEG 16-бітний, тобто він вміє змішувати червоний, синій і зелений. Це дозволяє відображати мільйони кольорів і робить його дуже доброзичливим до фотографій. Почасти так склалося тому, що це стандартний формат, в більшості цифрових камер на ринку.
JPEG дозволяє гнучко налаштовувати ступінь стиснення зображення: від 0% (сильне стиснення) до 100% (без стиснення). Як правило, 60% -75% вистачить, щоб значно знизити вагу файлу, зберігаючи відмінну якість на більшості екранів.
JPEG добре підходить для стиснення і рендеринга фотографій, але це тип стиснення з втратами. Тобто він мало підходить для постійного редагування зображень. Експорт в JPEG призводить до втрати якості, і втрати стають все більше з подальшим експортом. Тому професійні фотографи в основному знімають у форматі без втрат RAW.
Також на відміну від GIF і PNG формат JPEG не зберігається прозорість.
зображення зі складними кольорами і динамікою.
На відміну від GIF і JPEG формат PNG (Portable Network Graphics) новіший. Завдяки двома версіями формат схожий на мікс GIF і JPEG.
PNG-8 сильно схожий на GIF і використовує також колірну палітру в 256 квітів (максимум). У нього трохи краще прозорість і трохи менше вага файлу. Однак в PNG-8 немає функції анімації.
PNG-24 дозволяє рендерить зображення з мільйонами квітів, майже як JPEG, але також зберігає прозорість.
PNG-24 - формат без втрат якості, що збільшує вагу файлів. Якщо якість зображень важливіше ваги файлів, PNG-24 кращий вибір. Сервіси типу TinyPNG.com часто можуть сильно знизити вагу файлу.
У порівнянні зі своїм зведеним братом JPEG, PNG-24 не є універсально сумісними з усіма додатками і платформами, що робить формат невідповідним для спільного використання в мережі. Проте, формат можна редагувати без втрат якості.
веб-графіка з прозорістю;
складні фотографії з безліччю квітів і графіка;
зображення, які необхідно повторно редагувати і експортувати.
На відміну від трьох форматів вище SVG (Scalable Vector Graphics) - не чисто растровий формат. Це векторний формат, близький до AI в Adobe Illustrator і EPS. Векторна графіка поступово набуває популярності в мережі і у UI дизайнерів.
Іноді зручно представляти SVG як «HTML для ілюстрацій». Цей формат трохи відрізняється від інших.
SVG - векторний формат, проте в нього можна (часто так і робиться) вставити растрові дані точно так же, як JPEG вставляється в HTML.
Онлайн сервіси типу WordPress, Flickr, Medium, Tumblr і Facebook будуть або примусово конвертувати SVG у відповідний для них формат, або, що більш імовірно, відразу заблокують завантаження SVG. У мережі є купа хостингів SVG, серед яких svgur.com. imgh.us і навіть Github, як Alex продемонстрував тут.
Мені подобається, що є маленькі хостинги SVG, проте я на 99% впевнений, що наступні 5 років тільки GitHub буде SVG-friendly. При використанні SVG в веб-дизайні майже завжди можна стиснути вага файлу на відміну від JPEG і PNG. Але чим складніше SVG, тим більше вага файлу.
логотипи та графіка в веб-дизайні;
Ми дізналися про відмінності популярних форматів, тепер пора порівняє їх лицем до лиця. Нижче ви побачите, як GIF, JPEG, PNG і SVG обробляють зображення з простими і складними кольорами, а також зображення.
Графіка з монотонними квітами
Перший тип, який ми розглянемо - графіка з монотонними квітами. Вона покриває велику частину логотипів і брендів, іконок, простих карт, графіків і діаграм. Початковий розмір зображення 23.4 КБ з роздільною здатністю 1280 х 1280.
Нижче показано порівняння ваги файлів і якість. Зображення були збережені через функцію в Photoshop «Зберегти для web і пристроїв» з максимальною якістю.
Практичний курс по створенню дизайну сайтів в Photoshop
Стати професійним веб-дизайнером, створюючи затребувані макети сайтів.
JPEG 100% (без стиснення): 53.3 KB
SVG: 6 KB (чиста векторна графіка)
У випадку з цим зображенням непомітно великих втрат якості при порівнянні шести форматів. Хоча можна помітити невеликі артефакти по краях стисненого JPEG.
Не завжди все буде так з графікою з монотонними квітами, але в більшості випадків проблем з такими зображеннями не виникне. Для цього зображення найкращий варіант за умови, що у нас є оригінал - SVG з вагою в 6Кб. Якщо векторної графіки немає, на заміну можна використовувати PNG-8. Вага файлу знижується з 23,4Кб до 11,8Кб.
Зображення зі складними кольорами
Оригінал - 328Кб JPEG з роздільною здатністю 1280 х 960. Нижче показано порівняння ваги файлів і якості. Зображення були збережені через функцію в Photoshop «Зберегти для web і пристроїв» з максимальною якістю.
У нас немає векторної версії цього зображення, тому будь-яка SVG версія буде являти собою просто JPEG всередині SVG. Цей формат тут буде зайвим.
JPEG 100% (без стиснення): 776 KB
Зображення зі складними кольорами краще виглядають в JPEG, PNG-24 і SVG. Кольори здебільшого зберігаються, і немає цих страшних кілець і шуму, який зазвичай вилазить в GIF і PNG-8.
кольорові фотографії
Оригінал - 215Кб JPEG з роздільною здатністю 1280 х 710. Нижче показано порівняння ваги файлів і якості. Зображення були збережені через функцію в Photoshop «Зберегти для web і пристроїв» з максимальною якістю.
SVG тут також мало що дасть.
JPEG 100% (без стиснення): 90 KB
Як і зі складними зображеннями, фотографії найкраще зберігати в JPEG, PNG-24 або SVG. В фото зверху кольору зберігаються у всіх форматах крім PNG-8 і GIF, де вилазять кільця і шум в тіні волосся, на задньому фоні, а також у верхній частині фото.
Редакція: Команда webformyself.
Практичний курс по створенню дизайну сайтів в Photoshop
Стати професійним веб-дизайнером, створюючи затребувані макети сайтів.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
