Веб-сайти можуть містити графіку у форматі JPEG, GIF, PNG, SVG. Які з них слід використовувати, і коли?
Веб-сайти можуть містити графіку у форматі JPEG, GIF, PNG, SVG. Які з них слід використовувати, і коли?
Відповіді:
* З підвищенням анімації CSS як життєздатного варіанту для майже всіх браузерів використання формату .GIF стає все менше і менше, ніж формат переходу для веб-анімації. .jpg
, .png
і .gif
всі вони можуть бути встановлені таким чином, щоб мати "анімовану" функцію за допомогою CSS. Хоча анімовані gif-файли можуть використовуватися привабливо у веб-дизайні в певних сценаріях випадку, винятки рідкісні, тому, як правило, найкраще просто уникати їх.
** ( .gif
зображення обмежені лише 256 кольорами в межах їх палітри.)
(перенесено з повторного запитання)
Це повністю залежить від типу зображення, яке ви хочете зберегти.
PNG - це формат стиснення без втрат, найкраще підходить для "векторної" растрової графіки (тобто графіки з великими, регулярними областями одного кольору та чітко визначеними краями; графіка, що містить чіткий текст).
SVG - векторний формат , найкращий для вмісту векторної графіки (коротше кажучи, колекції геометричних елементів замість колекцій пікселів). SVG є безмежно масштабованим, тоді як растрова графіка втрачає якість при збільшенні.
JPG - це формат стиснення, що втрачає втрату (крім іншого, він видаляє нюанси в зображенні, невидимому людському оку, щоб заощадити місце для зберігання). Найкраще підходить для фотографій; через метод стиснення він не дуже підходить для векторних ілюстрацій чи тексту.
Сумісність веб-переглядача:
Графіка PNG підтримується у веб-переглядачах, за винятком IE 6, якщо PNG містить альфа-прозорість (прозорі частини будуть надані як суцільний сірий), а також всі версії IE, якщо PNG знаходиться в HTML-елементі з непрозорістю менше 100 % (але це крайній випадок).
SVG - це не завжди варіант, тому що підтримка браузера наразі не на 100% . Можуть бути і інші поведінкові відмінності до нормальної <img>
мітки. Використовуйте це, лише якщо ви знаєте, що робите.
Стандартний JPG підтримується в усіх браузерах, якщо вони зберігаються в режимі RGB, а не CMYK (якщо ваша програма не розрізняє, це, мабуть, є за замовчуванням).
Ви повинні знати про кілька ключових факторів ...
По-перше, існує два типи стиснення: без втрат та втрати .
Існують також різні глибини кольору (палітри): індексований колір та прямий колір .
BMP - без втрат / індексованих та прямих
Це старий формат. Це без втрат (при збереженні не втрачаються дані зображення), але також зовсім мало стиснення, що означає збереження, оскільки BMP призводить до ДУЖЕ великих розмірів файлів. Він може мати палітри як індексованих, так і прямих, але це невелика розрада. Розміри файлів настільки зайві, що цей формат ніхто ніколи не використовує.
Добре для: Насправді нічого. Немає нічого, що BMP перевершує або не покращує інші формати.
GIF - лише без втрат / індексується
GIF використовує стиснення без втрат, це означає, що ви можете зберігати зображення знову і знову і ніколи не втрачати будь-які дані. Розміри файлів набагато менші, ніж BMP, тому що насправді використовується хороша компресія, але вона може зберігати лише індексовану палітру. Це означає, що для більшості випадків використання у файлі може бути максимум 256 різних кольорів. Це звучить як зовсім невелика кількість, і це так.
GIF-зображення також можуть бути анімовані та мати прозорість.
Підходить для: Логотипів, лінійних малюнків та інших простих зображень, які мають бути невеликими. Тільки реально використовується для веб-сайтів.
JPEG - втрата / пряма
Зображення JPEG були розроблені для того, щоб зробити детальні фотографічні зображення якомога меншими, видаляючи інформацію, яку людське око не помітить. Як результат, це формат Lossy, а збереження одного і того ж файлу знову і знову призведе до втрати більшої кількості даних з часом. Він має палітру тисяч кольорів і тому чудово підходить для фотографій, але стиснення втрат означає, що це погано для логотипів та лінійних малюнків: вони не тільки виглядатимуть нечітко, але й такі зображення також матимуть більший розмір файлу порівняно з GIF!
Добре для: Фотографії. Також градієнти.
PNG-8 - без втрат / індексується
PNG - це новіший формат, а PNG-8 (індексована версія PNG) - справді хороша заміна GIF. Однак, на жаль, у нього є кілька недоліків: по-перше, він не може підтримувати анімацію, як може GIF (ну, може, але, здається, підтримує її лише Firefox, на відміну від анімації GIF, яку підтримує кожен браузер). По-друге, у нього є деякі проблеми підтримки зі старими браузерами, такими як IE6. По-третє, важливе програмне забезпечення, як Photoshop, має дуже погану реалізацію формату. (Чорт забирає вас, Adobe!) PNG-8 може зберігати лише 256 кольорів, як GIF.
Добре для: Головне, що PNG-8 робить краще, ніж GIF - це підтримка прозорості Alpha.
Важлива примітка: Photoshop нарешті додав підтримку прозорості альфа-версії в останніх версіях. Якщо у вас є старший, то існують способи перетворення файлів Photoshop PNG-24 в PNG-8, зберігаючи їх прозорість. Один з методів - PNGQuant , інший - збереження файлів за допомогою феєрверків .
PNG-24 - Без втрат / Прямий
PNG-24 - це чудовий формат, який поєднує кодування без втрат з прямим кольором (тисячі кольорів, як і JPEG). У цьому плані це дуже схоже на BMP, за винятком того, що PNG насправді стискає зображення, тому в результаті утворюються набагато менші файли. На жаль, файли PNG-24 все ще будуть набагато більшими, ніж JPEG, GIF та PNG-8, тому вам все-таки потрібно врахувати, чи дійсно ви хочете їх використовувати.
Навіть незважаючи на те, що PNG-24 дозволяють тисячам кольорів при стисненні, вони не призначені для заміни зображень JPEG. Фотографія, збережена як PNG-24, ймовірно, буде щонайменше в 5 разів більша, ніж еквівалентне зображення JPEG, з дуже незначним поліпшенням видимої якості. (Звичайно, це може бути бажаним результатом, якщо ви не переймаєтесь розміром файлів і хочете отримати найкраще якісне зображення.)
Як і PNG-8, і PNG-24 підтримує прозорість альфа.
SVG - без втрат / вектор
Філетип, що набирає популярності в даний час, - це SVG, який відрізняється від усіх перерахованих вище тим, що це векторний формат файлу (вище всі растрові ). Це означає, що він фактично складається з ліній та кривих, а не пікселів. Коли ви збільшуєте векторне зображення, ви все одно бачите криву або лінію. Коли ви збільшуєте масштаб растрового зображення, ви побачите пікселі.
Наприклад:
Це означає, що SVG ідеально підходить для логотипів та значків, які ви бажаєте зберегти різкість на екранах сітківки або різних розмірів.
Крім того, SVG-файли записуються за допомогою XML, і тому їх можна відкривати та редагувати в текстовому редакторі, щоб ним можна було керувати на ходу, якщо хочете. Наприклад, ви можете використовувати JavaScript, щоб змінити колір SVG-значка на веб-сайті так, як ви хотіли б тексту (тобто немає потреби в другому зображенні).
Я сподіваюся, що це допомагає!
Переваги:
Незручності:
Використання:
Переваги:
Незручності:
Використання:
Переваги:
Незручності:
Використання:
Веб-сайти можуть містити графіку у форматі JPEG, GIF, PNG, SVG. Які з них слід використовувати, і коли?
Для фотографій:
Хоча це не 100% правда, це добре правило. Перегляньте інші відповіді на це запитання, щоб дізнатися більше про інші формати. Також перевірте, який формат растрового зображення краще для цифрового відображення зображень, коли немає прозорості; JPEG або PNG? і вибір наших тегів у форматі файлів , таких як jpeg , png , gif & svg, щоб дізнатися більше.
Для графіки:
Не існує абсолютно жодних причин не надавати SVG у цей день та вік. Вони реалізовані практично точно так само, як і будь-яке звичайне зображення, і набагато більш універсальні.
Отже, робочий процес для будь-якого сучасного дизайнера веб-сайтів повністю не змінений, він оновлений. Ви все ще готуєте та обслуговуєте PNG та JPEG для графіки, але вони є резервними копіями лише тоді, коли SVG не працює.
SVG означає Scalable Vector Graphic
. Не надто надто технічно, різниця між SVG та іншими форматами на основі пікселів полягає в тому, що дані для складу графіки зберігаються як математичні обчислення. Коли браузер відкриває SVG, він повинен провести обчислення, щоб відобразити SVG. У старих веб-переглядачах немає можливостей робити ці обчислення або обробляти SVG, крім того, старші комп’ютери можуть зіткнутися зі створенням важкої веб-сторінки SVG, навіть якщо вони могли бути використані 10 років тому (що вони не могли). Дані для SVG зберігаються у шістнадцятковому форматі (база-16), що дозволяє оптимізувати його до дуже малих розмірів файлів порівняно з двійковим зберіганням піксельних даних.
Ось деякі ресурси для того, щоб дізнатися більше про те, як досягти резервної техніки:
Наведений нижче фрагмент JavaScript, скопійований із першого посилання, - це все, що вам потрібно для виявлення підтримки SVG у більшості, якщо не у всіх браузерах, а також змінити ім'я файлу, щоб забезпечити резервні копії PNG.
function supportsSVG() {
return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;
}
if (!supportsSVG()) {
var imgs = document.getElementsByTagName('img');
var dotSVG = /.*\.svg$/;
for (var i = 0; i != imgs.length; ++i) {
if(imgs[i].src.match(dotSVG)) {
imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
}
}
}
<DA01>
</DA01>
Красиво масштабуйте будь-який розмір одного файлу (не потрібно обслуговувати @2x.jpg
екрани сітківки або розтягувати графіку)
Дуже часто менші розміри файлів, ніж JPEG та PNG
Майже ніколи не потрібно жертвувати якістю логотипу
Полегшує дизайн вкрай легко
Для вбудованих SVG-файлів підтримка рідше, тому для безпеки найкраще на даний момент посилання на файли через теги зображень. (Якщо ви збираєтесь повторно використовувати графіку в будь-якому іншому місці, тобто піктограмі навігації, ви хочете все-таки зв’язатись із нею зовнішньо, тому браузер кешує її та економить час на завантаження інших сторінок.)
IE не підтримує SVGZ
, стислий формат, доступний для графіки SVG. Для найбільшої сумісності у веб-переглядачах та останніх попередніх версіях найкраще використовувати SVG 1.0
цей момент часу.
Ви все ще можете робити спрайти з SVG так само, як і в інших форматах зображень, але замість того, щоб використовувати фактичні значення пікселів для визначення координат x та y кожного зображення, використовуйте значення на основі відсотків.
Ви повинні створити спрайт-аркуш з метою, щоб можна було розділити і ширину і висоту на 100, і досягти цілих чисел, або чисел з максимум 1 десятковою комою. Наприклад, якщо ви розміщуєте 7 x 10px x 10px
іконок разом у спрайт-аркуші, не створюйте полотно, яке є 70px x 10px
.
Чому? Тому що, діливши 100 на 7, ви отримуєте 14.285714285714285714285714285714
, що, як округлий відсоток, неодмінно десь спричинить дефектну математику.
Натомість створіть 80px x 10px
полотно, і не турбуйтеся про порожні 12,5%. Піктограми будуть з кроком рівно 12,5%, з чим, зайве говорити, набагато простіше працювати.
Ви повинні використовувати .jpeg для фотографій або зображень з великою кількістю кольорів. Тип файлу .gif корисний для анімаційних зображень або там, де потрібна прозорість, але він зменшується у використанні. Найпопулярніший формат - .png, який також може забезпечити прозорість альфа та більший діапазон кольорів, ніж тип файлу .gif. Для більш детального огляду перегляньте статтю Джонатана Снука, який формат зображення найкращий .
Приємною формулою може бути використання JPEG для фотографій та PNG для всього іншого.
Звичайно, якщо у вас є графіка, яка не потребує прозорості альфа-каналів і має менше 256 кольорів, GIF може заощадити вам пропускну здатність, але це, безумовно, на виході.
Я використовую PNG майже для всього, тому що в ньому немає артефактів стиснення, які робить JEPG, і це майже універсально сумісно в наші дні (я бачив пару редакторів сайтів, які не сприймають це, наприклад, настільна версія програмного забезпечення Homestead's SiteBuilder, але це про це).
Ви повинні вибрати своє зображення в основі на рівні стиснення / якості, якого ви хочете досягти.
Інтернет - це швидкість завантаження інформації, і менший розмір зображення, тим краще для швидкості завантаження сторінки.
JPG : для зображень з мільйоном кольорів (фотографія)
PNG та GIF : для прозорості та невеликої кількості кольорів. Я використовую його лише під 64/128 різних кольорів, але загалом під 256. (піктограми, векторні зображення, які мають бути растровими, високий контрастний колір, градієнти з кількома кольорами)
Як вибрати між PNG та GIF?
Перш за все, перевірте оптимізацію стиснення / якість та виберіть, хто дає кращий результат для меншої ваги. Я все ще широко використовую GIF, і це краще, ніж PNG, для зображень такого ж типу. Не розрізняйте один формат за іншим, просто перевірте той, який виглядає більш підходящим для вашої оптимізації.
Як я бачу, з різних статей 90% веб-дизайнерів все ще вважають, що PNG - це лише формат без втрат . Багато професіоналів навіть не знають про існування PNG-8.
Але очевидно, що PNG-8 - це те, що вони повинні використовувати для Інтернету, а не PNG-32. Оскільки вона забезпечує 2х-5х менших розмірів файлів з прийнятною якістю.
Іноді важко визначити, яке стиснення краще для зображення. Наприклад, якщо це не фотографія, але має багато кольорів та градієнтів. Цей інструмент дозволяє візуально порівняти обидва втрачені формати та вибрати найкращий варіант.
Ось приємний інструмент для порівняння форматів у форматі PNG та JPEG: PNG та JPEG
Основними форматами веб-графіки є GIF, JPG та PNG. Важливо знати відмінності та вибрати найкращий формат для кожного зображення, щоб картинки виглядали добре і були максимально компактними, щоб вони швидко з’являлися на екрані відвідувача вашого сайту.
GIF - формат графічної інформації
Формат графіки GIF найкраще для зображень із кількома кольорами: діаграми, графіки чи текст, встановлений у вигляді графіки. Чим менше кольорів ви використовуєте, тим ефективніші файли GIF. GIF-файли ...
• може містити до 256 кольорів.
• підтримка функції, званої прозорості, в якій один колір із 256 кольорів встановлений як прозорий. Це заважає вашій графіці виглядати так, ніби вони знаходяться у вікнах, тому що фон файлу невидимий, що дозволяє відображати фон веб-сторінки.
• можна анімувати. Всередині одного файлу зберігається багато кадрів з зображеннями та покажчик, який вказує, як довго повинен бути показаний кожен кадр. Анімований GIF розглядається як стандартний файл зображення, тому він завантажується стандартним тегом.
• без втрат, що означає, що якість зображення не погіршується процесом стиснення.
• можуть бути переплетені, тому вони, схоже, зникають, від нижчої до вищої якості під час завантаження. Це дає вашим відвідувачам щось подивитися, поки вони чекають.
• не підходять для фотографій - ви втрачаєте якість, а файли не будуть компактними. Використовуйте графічний формат JPG для фотографій.
JPG - Спільна група експертів з фотографій
Графічний формат JPG найкраще підходить для зображень із багатьма кольорами, наприклад, фотографій чи сканованих ілюстрацій. JPG файли ...
• може містити до 16 мільйонів кольорів.
• підтримка змінної компресії. Ви можете застосувати більше або менше стиснення до кожного окремого зображення. Чим більше ви стискаєте, тим більше втрачаєте якості. Незважаючи на те, що розміри файлів можуть бути досить малі за допомогою цього графічного формату, вам часто доводиться йти на компроміс між розміром файлу та якістю зображення. Більш нове графічне програмне забезпечення забезпечує попередній перегляд перед збереженням - це дозволяє експериментувати з різними рівнями стиснення, щоб вибрати найкращий компроміс між якістю та розміром файлу.
• бувають трьох типів: базовий або стандартний, базовий оптимізований або стандартний оптимізований та прогресивний. Базова лінія була розроблена для браузерів, які ми вважаємо давніми в наші дні (наприклад, Internet Explorer версії 1). Базова лінія оптимізована пропонує більше стиснення порівняно зі стандартною базовою лінією, і практично кожен браузер сьогодні може прочитати таке зображення. Прогресивний JPG, як переплетений GIF-файл, створюється під час завантаження, переходячи від грубого зображення зображення до закінченого вигляду. Хоча це хороший веб-графічний формат, більш старі браузери не всі підтримують цей формат.
• не підходять для зображень лише кількох кольорів, наприклад, набору тексту у вигляді графіки або зображень з областями плоских кольорів. Якщо ви використовуєте JPG для цієї графіки, вони будуть більшими, ніж потрібно, і виглядатимуть «строкаті».
PNG - прогресивна мережева графіка
PNG - це найновіший формат веб-графіки. PNG файли ...
• підтримуються всіма сучасними браузерами. Ці файли можуть не відображатися в старих браузерах, тому використання цього графічного формату може призвести до того, що деякі відвідувачі вашого веб-сайту не зможуть побачити ваші зображення.
• компактні та універсальні та можуть поєднувати в собі найкращі функції GIF та JPG, наприклад, можливість мати прозорі фони або можливість містити зображення з мільйонами кольорів.
• все ще не використовуються широко, в основному через те, що вони не підтримуються старими браузерами.
Коли використовувати який?
Вибір правильного формату веб-графіки може забезпечити гарне зображення та швидке відображення на комп’ютері відвідувача. Якщо вибрати невірний формат, ваші зображення виглядатимуть погано та завантажуватимуться навіки
Найпоширеніша помилка графіки, яку роблять люди в Інтернеті, - це використовувати неправильний графічний формат для своїх зображень. Але вибір насправді досить простий ...
• Якщо ваша графіка має багато кольорів (наприклад, фото), виберіть JPG.
• Якщо ваша графіка має кілька кольорів, виберіть GIF. Використовуючи GIF, спробуйте оптимізовану палітру, яка містить лише використовувані кольори - вони можуть скоротити розміри файлів навпіл.
В ідеальному світі це зводиться до цього:
JPEG - для растрових зображень та фотографій
PNG - для векторної графіки (наприклад, логотипи тощо)
На жаль, Internet Explorer 6 (все ще, на жаль, велика кількість користувачів) не підтримує прозорість зображень PNG. Тож якщо PNG містить прозорість, це може виникнути проблеми. На щастя, є хакер, який можна використовувати, щоб обійти цю проблему, хоча і не елегантно:
http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/
(EDIT: Крім того, я думаю, що навіть у IE 7 є проблеми з деякими особливостями PNG.)
GIF мають лише дві переваги перед PNG:
EDIT: PNG завжди кращий перед GIF, коли він підтримується та корисний, оскільки PNG - це відкритий формат.
Як найбільш зазначалося, JPEG хороший для фотографії, а PNG - для графіки з текстами та графіками. GIF має єдину перевагу в тому, що він підтримує анімацію, яку слід використовувати дуже обережно.
Хороша порада - експортувати зображення у форматі JPEG та PNG. Практично завжди формат, найкращий для графічних результатів, у меншому файлі. Фотографії стають меншими як JPEG, а графіки меншими, як PNG. Тож якщо ви не впевнені, що вибрати, це може бути хорошим рішенням.