Ви знаходитесь у розділі «Статті по web-дизайну»
На цій сторінці буде описаний процес оптимізації графіки для інтернету в Adobe Illustrator. Оптимізація - це процес, при якому з файлу видаляється певна інформація і за рахунок цього відбувається істотне зменшення розміру файлу. У web-дизайні використовуються три формату оптимізованої піксельної графіки - JPEG, GIF і PNG. Який використовувати? Природно той, в якому файл займе менший розмір при однаковому візуальній якості. Вважається, що для повнокольорових і фотореалістичних зображень слід застосовувати JPEG, а для простих, особливо з великими площами однотонних заливок краще застосовувати GIF. Непогано вони стискаються і форматом PNG-8. Ці особливості пояснюються різними принципами оптимізації в різних форматах.
Формат GIF (Graphics Interchange Format) дозволяє зберегти зображення з використанням палітри індексованих кольорів - до 256. Іншими словами, GIF використовує оптимізацію за рахунок зменшення кількості кольорів - будь-яке зображення він представить в кольорах, обраних з 16 мільйонів, але кількість яких може бути від 2 до 256. Звичайно, не кожне зображення можна безболісно «втиснути» в 256 квітів. Звідси висновок - використовувати формат для немногоцветних картинок з різкими межами між квітами. Формат GIF підтримує прозорість і використовує стиснення без втрати інформації.
Формат JPEG (Joint Photographic Experts Group) придатний для збереження повнокольорових зображень з колірною глибиною 24bpp (TrueColor) і використовує стиснення з втратою інформації. Прозорість цим форматом не підтримується і при сильному ступені стиснення з'являється різні артефакти (спотворення, сторонні плями і т.д.).
PNG (Portable Network Graphics) - найновіший з форматів, спроектований для заміни застарілого і більш простого формату GIF. Існує 2 види формату. PNG-8 - 8-бітний, який використовує індексовані кольори і підтримує градиентную прозорість. Використовує стиснення без втрат. PNG-24 - 24-бітний, використовується для хранений повнокольорових зображень. Ступінь стиснення PNG24 менше, ніж у JPEG, але він використовує стиснення без втрат.
В Adobe Illustrator вікно оптимізації Save for Web & Devices викликається комбінацією клавіш (Alt + Ctrl + Shift + S) або в меню File> Save for Web & Devices. З правого боку вікна розташована панель з настройками, яка в залежності від обраного формату приймає різний вигляд. На малюнку показано, як буде виглядати панель при виборі GIF.
Optimized file format (вибір формату)
Color reduction algorithm (алгоритм скорочення квітів)
Dithering algorithm (алгоритм імітації)
Transparency (прозорість)
Interlaced (черезстрочная розгортка)
Color reduction algorithm - алгоритм скорочення квітів (по-іншому називається вибором палітри) визначає, як Illustrator зробить з повнокольорового зображення індексовані. З усіх варіантів нас цікавлять такі:
Perceptual (палітра на сприйняття) - вид адаптивної палітри з урахуванням чутливості і сприйняття людського ока;
Selective (вибіркова палітра) - з перевагою квітів web-безпечної палітри (прийнята за замовчуванням, досить близько зберігає вихідні кольору);
Adaptive (адаптивна палітра) - створить колірну таблицю з квітів, що найчастіше зустрічаються в оригінальному документі. Одна з найбільш важливих палітр;
Restrictive (Web-палітра) - перетворює зображення в стандартну таблицю з 216 web-безпечних кольорів.
Custom (замовна) - формує палітру з обраних користувачем квітів.
Dithering algorithm - алгоритм перемішування пікселів (ще називають дизеринг, розсіювання, імітація) дозволить вибрати спосіб імітації додаткових квітів шляхом перемішування існуючих пікселів. Варіанти вибору: No dither - без перемішування, Diffusion - дифузний алгоритм, Pattern - алгоритм на основі заданого зразка і Noise - алгоритм на основі шуму. При оптимізації завжди варто спробувати всі варіанти. Включення цієї опції призводить до збільшення розміру файлу, але це варто того. Пов'язаний зі списком движок Dither регулює інтенсивність перемішування.
Transparency (прозорість) - включення прозорості, розглядається тут .
Interlaced - черезстрочная розгортка. Забезпечить поступове поліпшення (промальовування) зображення в процесі завантаження.
Процес оптимізація зводиться до вибору палітри і кількості кольорів. Палітра вибирається в Color reduction algorithm, а кольори - в списку Colors. Серед всіх палітр найкращою вважається адаптивна. Кількість квітів починати слід з 256 і, поступово зменшуючи, контролювати зміни зображення. Як правило, кількість кольорів в вибирається з ряду: 2, 4, 8, 16, 32, 64, 128, 256.
Незважаючи на те, що GIF підтримує стиснення без втрат, Illustrator дозволяє встановити втрати в цьому форматі. Повзунком Lossy можна ще більше стиснути файл, зменшивши його розмір.
Оптимізація формату PNG8 нічим не відрізняється від GIF (в Optimized file format вибираємо PNG8). Як вже говорилося, PNG8 слід використовувати для зберігання зображень великих розмірів - саме в цьому випадку буде перевага перед JPEG і GIF.
Перейдемо до формату JPEG.
Optimized file format (вибір формату)
Compression quality (Якість стиснення)
Progressive (прогресивний)
Тут все трохи простіше. Compression quality (якість стиснення) - список, що випадає з шаблонними значеннями якості зображення:
Low - низький (максимальний рівень компресії)
Medium - середнє (середній рівень компресії)
High - висока (невеликий рівень компресії)
Maximum - максимальне (мінімальний рівень компресії).
Відповідно до вибору буде змінюватися значення поля Quality від 0 (найнижче) до 100 (найвища). Більш плавно якість можна налаштувати безпосередньо в самому полі, або в постає під ним движку. В поле Blur (розмиття) встановлюється ступінь розмиття картинки, при невеликих значеннях розмиття приховає дрібні дефекти стиснення. Включення прапорця Progressive дозволить зробити завантаження картинки зручнішою для сприйняття - зображення буде відображатися ще до повного завантаження. При цьому збільшиться розмір файлу.
Залишається додати, що з меню, що випадає Preset можна вибрати готові предустановки для кожного формату. Натискання клавіші Alt призведе до чергової зміни кнопок меню (на малюнку). Reset приведе до скидання всіх налаштувань, а Remember - до запам'ятовування.
З лівого верхнього боку розташовані чотири вкладки, що полегшують процес оптимізації.
Вкладка Original дозволить, як зрозуміло з назви, переглянути оригінал зображення, Optimized - оптимізований варіант. А вкладки 2-Up і 4-Up - двох і чотириблочною варіанти перегляду відповідно, де буде і оригінал, і оптимізовані варіанти. Причому для кожного варіанта можна застосовувати різні настройки.
Посилання на статтю при передруку обов'язкове.
Який використовувати?