02 лютого 2005 р

оптимізація

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

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

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

Для початку ми поговоримо про вагу файлів, а потім побачимо, якими способами їх можна оптимізувати.

Вага графічних файлів

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

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

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

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

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

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

Наприклад, для зображення розміром 3 х 2 дюйми з роздільною здатністю 72 dpi та глибиною кольору 8 біт ми матимемо:

Розмір файлу = [[(3 x 72) x (2 x 72)] x 8]/8 = 31104 байта = 31 Kb

Якщо розміри зображення в сантиметрах, просто розділіть їх на 2,54. Таким чином, зображення розміром 1 х 1 дюйм з роздільною здатністю 300 точок на дюйм і глибиною кольору 24 біти (справжній колір) матиме вагу: загалом воно містить 90 000 пікселів.

Розмір файлу = [[(1 х 300)/2,54 х (1 х 300)/2,54] х 24]/8 = 41850 байт = 419 Кб

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

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

Оптимізація графічних файлів

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

З метою мінімізації ваги графічних файлів були розроблені різні методи оптимізації, засновані на двох різних принципах:

  • Зменште кількість кольорів, що використовуються на зображенні.
  • Стисніть дані зображення, щоб зайняти менше місця.

Зменшення кольору (розмивання)

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

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

З іншого боку, зображення, яке використовує 256 кольорів, може мати прийнятну якість по відношенню до того самого зображення з 16,8 мільйонами кольорів, будучи втричі меншим за розміром. Щоб отримати колір, якого немає в 256-кольоровій палітрі зображення, завжди можна змішати ті, що є, досягаючи в більшості випадків гарного наближення до необхідного.

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

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

Ця система оптимізації шляхом зменшення кольорів використовується, наприклад, у форматі GIF.

Зменшення даних (стиснення)

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

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

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

Існує два основних типи алгоритмів стиснення: без втрат та стискання з втратою.

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

Системи втрат використовують різні способи компенсувати або відкинути менш важливу інформацію в зображенні на основі зорового сприйняття людини, іноді досягаючи результатів, які майже ідентичні оригіналу з набагато меншою вагою. Якість зображення залежить не тільки від коефіцієнта стиснення, але і від використовуваного алгоритму. Коефіцієнти стиснення високі, від 40: 1 до 100: 1

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

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

Основними алгоритмами стиснення, що використовуються в графічних файлах, є:

RLE (кодована довжина циклу)

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

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

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

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

RLE - це алгоритм, який використовується у графічних форматах BMP та PCX, хоча кожен використовує інший метод реалізації.

Система стиснення без втрат, яка в даний час належить компанії Unisys, розроблена математиками Абрахамом Лемпелем та Якобом Цівом у 1977 та 1978 роках та вдосконалена Террі Уелчем у 1984 році.

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

LZW - це компресор словникового типу, який використовує таблицю рядків для стиснення, замінюючи рядки однакових символів у файлі унікальними числовими кодами, що їх представляють, таким чином, маючи змогу стискати їх, навіть якщо їх не знайти послідовно. У стисненому файлі таблиця рядків не відображається явно, лише таблиця індивідуальних символів та набір усіх згенерованих кодів. Таким чином досягаються максимальні рівні стиснення 2: 1

Ця система рекомендується для стиснення файлів, які містять багато повторюваних даних, таких як прості, монохромні зображення або які містять великі кольорові області, які використовуються у форматах TIFF, GIF та JPG-LS, а також у мовних файлах PostScript.

JBIG (Спільна дворівнева експертна група зображень)

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

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

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

Ця система використовується в графічному форматі TIFF і не підтримується жодним поточним веб-браузером.

JPEG (Спільна експертна група з фотографування)

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

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

Насправді JPEG, міжнародний стандарт 10918, описує сімейство методів стиснення, заснованих на складних математичних операціях, таких як перетворення кольорового формату, роздільне косинусне перетворення (DCT), квантування та ентропійне кодування, визначаючи три різні системи кодування:

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

JPEG - це симетричний алгоритм кодування (декодування займає стільки ж часу, скільки кодування), пропонуючи рівні стиснення 20: 1 або вище, дозволяючи виконувати певні геометричні перетворення (наприклад, обертання зображення) безпосередньо на перетвореній матриці, без регенерації вихідного зображення.

Це метод стиснення, який сьогодні найчастіше використовується для стиснення зображень із втратами, і використовується у графічних форматах JPG, TIFF, FlashPix, у файлах PDF та у мовних файлах PostScript. Крім того, це основа мультимедійного стандарту для рухомих зображень, MPEG.

Що стосується веб-браузерів, він підтримується Internet Explorer 2 та Firefox у всіх його версіях. Звичайно, і в більш сучасних браузерах, таких як Chrome.

Консультант, дизайнер та веб-розробник у ParaRedeBJS. Спеціаліст Usabill.