Які формати веб-графіки використовувати?

Веб-сайти можуть містити графіку у форматі JPEG, GIF, PNG, SVG. Які з них слід використовувати, і коли?

Коли використовувати JPG

• фотозображення
• коли стиснення не має значення

Коли використовувати PNG

• коли вам потрібна прозорість
• коли у вас є малювання (фони)

Коли використовувати GIF

• коли вам потрібна зворотна сумісна анімація *
• коли зображення в основному складається з декількох кольорів (2-16) **
• коли вам не потрібна прозорість і є малювання (хоча png є кращим)

_{* З підвищенням анімації 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 (якщо ваша програма не розрізняє, це, мабуть, є за замовчуванням).

Ви повинні знати про кілька ключових факторів ...

По-перше, існує два типи стиснення: без втрат та втрати .

• Без втрат означає, що зображення робиться меншим, але без шкоди для якості.
• Втрата означає, що зображення робиться (навіть) меншим, але на шкоду якості. Якщо ви зберігаєте зображення у форматі Lossy знову і знову, якість зображення буде прогресивно погіршуватися та погіршуватися.

Існують також різні глибини кольору (палітри): індексований колір та прямий колір .

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

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-значка на веб-сайті так, як ви хотіли б тексту (тобто немає потреби в другому зображенні).

Я сподіваюся, що це допомагає!

JPG:

Переваги:

• Доступно багато різних рівнів стиснення
• Легко маніпулювати всіма редакторами зображень

Незручності:

• Артефакти стиснення

Використання:

• Великі фотографії або зображення з великою кількістю кольорів
• Коли потрібна висока компресія

PNG:

Переваги:

• Прозорість з альфа!
• Багато кольорів
• Можна замінити jpg

Незручності:

• Менше стиснення, ніж JPG (але не так багато)
• Не сумісний з IE6 (і я вважаю, 7) - для цього потрібно використовувати патч або хак. Але кого це хвилює? Потрібно використовувати;)

Використання:

• Маленькі або середні фотографії / зображення з великою кількістю кольорів
• Необхідно використовувати, якщо ви хочете прозорість градієнта
• Значки
• Логотипи

GIF:

Переваги:

• Можна анімувати
• Дуже легкий, якщо ви використовуєте лише якийсь колір (наприклад, 8 - 16 або 32 різних кольорів)
• Прозорість

Незручності:

• Не може мати більше 255 кольорів.
• Анімований gif може змусити людей тікати
• Немає альфа для прозорості (прозора вона чи ні!)

Використання:

• Gif анімовані (я використовую їх в основному в розсилках)
• Значки
• Анімований фавікон \ о /
• Логотипи

Веб-сайти можуть містити графіку у форматі JPEG, GIF, PNG, SVG. Які з них слід використовувати, і коли?

Для фотографій:

JPEG, якщо немає необхідності у прозорості. PNG для графічної фотографії, яка потребує прозорості.

Хоча це не 100% правда, це добре правило. Перегляньте інші відповіді на це запитання, щоб дізнатися більше про інші формати. Також перевірте, який формат растрового зображення краще для цифрового відображення зображень, коли немає прозорості; JPEG або PNG? і вибір наших тегів у форматі файлів , таких як jpeg , png , gif & svg, щоб дізнатися більше.

Для графіки:

SVG з запасом PNG / JPEG.

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

Отже, робочий процес для будь-якого сучасного дизайнера веб-сайтів повністю не змінений, він оновлений. Ви все ще готуєте та обслуговуєте PNG та JPEG для графіки, але вони є резервними копіями лише тоді, коли SVG не працює.

Що таке SVG?

SVG означає Scalable Vector Graphic. Не надто надто технічно, різниця між SVG та іншими форматами на основі пікселів полягає в тому, що дані для складу графіки зберігаються як математичні обчислення. Коли браузер відкриває SVG, він повинен провести обчислення, щоб відобразити SVG. У старих веб-переглядачах немає можливостей робити ці обчислення або обробляти SVG, крім того, старші комп’ютери можуть зіткнутися зі створенням важкої веб-сторінки SVG, навіть якщо вони могли бути використані 10 років тому (що вони не могли). Дані для SVG зберігаються у шістнадцятковому форматі (база-16), що дозволяє оптимізувати його до дуже малих розмірів файлів порівняно з двійковим зберіганням піксельних даних.

Ось деякі ресурси для того, щоб дізнатися більше про те, як досягти резервної техніки:

1. Оволодіння використанням SVG для сітківки сітківки, резервні копії із сценарієм PNG

2. Перегляд робочого процесу SVG для продуктивності та прогресивного розвитку за допомогою прозорих URI даних

3. CSS Tricks - SVG

Наведений нижче фрагмент 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>

Коли використовувати SVG

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

Коли використовувати шрифти значків

• Коли вам потрібен широкий набір іконок
• Коли, як SVG, ви бажаєте переваг форматів векторних файлів
• Коли ви маєте розкіш лише орієнтуватися на сучасні браузери (підтримка веб-шрифтів порівняно нова для деяких браузерів)

</DA01>

Чому SVG - найкращий варіант?

• Красиво масштабуйте будь-який розмір одного файлу (не потрібно обслуговувати @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, для зображень такого ж типу. Не розрізняйте один формат за іншим, просто перевірте той, який виглядає більш підходящим для вашої оптимізації.

• Виберіть GIF: для анімаційних зображень не більше 256 кольорів
• Якщо вам не потрібна анімація, ви можете вибрати PNG. Оберіть правильний PNG: Є 2 види 8-бітові та 24-бітні. 8 біт, як правило, є кращою версією GIF без анімації для якості / стиснення (але, як я вже говорив, не завжди, перевіряйте це, коли ви зберігаєте для Інтернету). 24-бітний не має стиснення (тому використовуйте його мало для отримання особливого графічного ефекту), а також має альфа-вале для використання прозорості кольорів (Старі браузери IE не підтримують це, якщо ви не застосуєте спеціальний фільтр або поведінку .htc до сторінки ).

Як я бачу, з різних статей 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:

1. (Майже) ідеальна підтримка веб-переглядача (хоча прозорість відсутня, тому це не є великим бонусом)
2. Вони можуть бути анімованими, проте мультиплікаційну графіку слід використовувати в веб-дизайні.

EDIT: PNG завжди кращий перед GIF, коли він підтримується та корисний, оскільки PNG - це відкритий формат.

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

Хороша порада - експортувати зображення у форматі JPEG та PNG. Практично завжди формат, найкращий для графічних результатів, у меншому файлі. Фотографії стають меншими як JPEG, а графіки меншими, як PNG. Тож якщо ви не впевнені, що вибрати, це може бути хорошим рішенням.