57. Оптимізація формату JPEG
| |
Оптимізуємо зображення, створене вами при вивченні глави 4. Воно знаходиться в файлі Relief.psd в робочій папці на жорсткому диску Вашого комп'ютера. Розмір зображення занадто великий для Web-сторінки, і тому змініть його пропорційно за допомогою команди Image Size (Розмір зображення) меню Image (Зображення), вказавши горизонтальний розмір приблизно 350 пікселів.
Параметри оптимізації в ImageReady задаються в спеціалізованій палітрі Optimize (Оптимізація), що відкривається командою Show Optimize (Показати оптимізацію) меню Window (Вікно). Якщо вікно документа знаходиться в режимі 2-Up або 4-Up, то параметри відповідають активному варіанту, відзначеному тонкої чорною рамкою.
1. Відкрийте палітру Optimize (Оптимізація) командою Show Optimize (Показати оптимізацію) з меню Window (Вікно).
2. У вікні документа перейдіть на вкладку Optimized (Оптимізоване). Перед вами результат оптимізації зображення відповідно до параметрів, представленими в палітрі Optimize (Оптимізація). Зміна цих параметрів призведе до негайного оновлення зображення на вкладці Optimized (Оптимізоване) у вікні документа.
3. У верхній частині палітри Optimize (Оптимізація) знаходиться список Settings (Установки) з іменованими параметрами оптимізації. Ми будемо відштовхуватися від варіанту JPEG High (рис. 11.13). У списку Optimized file format (Формат оптимізованого файлу) при цьому виявляється обраний формат JPEG, а в списку Compression Quality (Якість стиснення) - варіант High (Високе). Градації якості Low (Низький), Medium (Середнє), High (Високе) і Maximum (Максимальна) відповідають значенням 10, 30, 60 і 80% параметра Quality (Якість) в сусідньому полі введення.
Мал. 11.13. Палітра Optimize для формату JPEG
4. Найбільший вплив на розмір файлу зображення надає якість, тому не будемо обмежуватися приблизною установкою якості High (Високе). Перемішайте повзунок Quality (Якість) праворуч (висока якість) наліво (низька якість) до тих пір, поки не помітите появи небажаних артефактів. У нас помітне прояв характерної "бруду" сталося приблизно при 50% -му значенні якості.
5. Спробуйте видалити артефакти попередніми розмиванням зображення за допомогою повзунка Blur (Розмиття). Слідкуйте за тим, щоб зображення не дуже втратило в різкості. Прийнятною величиною розмивання буде 0,1-0,13 пікселя.
6. Погляньте на рядок стану у вікні документа. Там відображається поточний розмір оптимізованого файлу і оцінка часу його завантаження при обраної швидкості модему.
Формат JPEG найкраще підходить для фотографічних зображень. Погіршення якості найбільш помітно на чітких контурах. У нашому прикладі це, в першу чергу, текст. Алгоритм JPEG підтримує зважену оптимізацію, при якій різні ділянки зображення можуть мати різну ступінь стиснення. Таким чином, вибравши для фрагмента з текстом менший ступінь стиснення, ніж для решти його частини, ми покращимо якість тексту з мінімальними втратами в розмірі файлу. У ImageReady ступінь стиснення при зваженій оптимізації визначається маскою в альфа-каналі зображення. Чорні ділянки маски задають максимальну ступінь стиснення, а білі - мінімальну.
1. Виберіть на панелі інструментів інструмент Marquee (Виділення).
2. Виділіть на зображенні прямокутну область, яка містить текст.
3. Збережіть виділення в альфа-каналі командою Save Selection (Зберегти виділення) меню Select (Виділення) під ім'ям Type.
4. Натисніть на палітрі Optimize (Оптимізація) маленьку кнопку праворуч від поля Quality (Якість). Відкриється діалогове вікно Modify Quality Settings (Змінити установки якості), в якому задаються параметри зваженої оптимізації (рис. 11.14).
Мал. 11.14. Діалогове вікно Modify Quality Settings
5. У списку Channel (Канал) виберіть канал, що задає ступінь стиснення - Type. У правій частині області Quality (Якість) з'явиться мініатюра каналу.
6. Нижче списку каналів в діалоговому вікні знаходяться два повзунки, що визначають мінімальну (чорні області маски) і максимальне (білі області маски) якість стиснення. Якщо положення повзунків збігається, то якість стиснення на всій площі зображення однакове, т. Е. Відповідає невиважених, а звичайної оптимізації. Перемістіть лівий повзунок в положення, знайдене при звичайній оптимізації. Цим ви задасте ступінь стиснення для всього зображення, за винятком тексту. Перемішайте правий повзунок вліво, поки якість тексту буде залишатися задовільним.
7. Закрийте діалогове вікно кнопкою ОК.
У палітрі Optimize (Оптимізація) для формату JPEG є ще кілька параметрів. Формат JPEG не дозволяє створювати на зображенні прозорі області. Якщо ж в документі є прозорі області, то при експорті вони перетворяться в білі. Щоб створити ілюзію прозорості, можна заповнити прозорі області кольором, що збігається з фоновим кольором сторінки. Клацання на стрілці поруч із полем Matte (Облямівка) відкриває палітру кольорів. У ній вибирають колір, яким хочуть залити прозорі області зображення.
Прапорець Progressive (Прогресивна) встановлює прогресивну розгортку зображення, т. Е. При перегляді в браузері воно буде деталізувати поступово, у міру завантаження. Для прогресивної розгортки потрібен особливий варіант формату JPEG, який дає файли трохи більшого обсягу, ніж зазвичай. Тому встановлюйте прапорець Progressive (Прогресивна) тільки для досить великих зображень, коли чимало часу завантаження компенсується зручністю розгортки.
Прапорець ICC Profile (Профіль ICC) поміщає в експортований файл колірний профіль зображення. Впровадження профілю істотно збільшує розмір файлу, і використовується виключно рідко. Більшість браузерів, на жаль, не підтримують управління кольором.
В результаті оптимізації формату JPEG ми отримали досить істотний (97%) виграш в розмірі файлу, зберігши прийнятну якість зображення. Але найкращим чи способом проведена оптимізація? Може бути краще використовувати формат GIF?
1. Перейдіть на вкладку 2-Up (2 варіанти) у вікні документа. Перед вами одночасно оригінал (зліва) і оптимізоване зображення (праворуч).
2. Клацніть курсором миші в межах лівої половини вікна документа. Це зробить активним оригінал зображення.
3. У списку Settings (Установки) палітри Optimize (Оптимізація) виберіть варіант GIF 64 Dithered. Це встановлений варіант оптимізації в індексований формат з 64-кольорової палітри. Результат оптимізації ви бачите в активній (лівої) половині вікна на місці оригінального зображення. З точки зору розміру файлу (18 Кбайт) вона явно ефективніше. Маючи на екрані перед очима одночасно два варіанти оптимізації, ви можете вибрати найбільш підходящий.
4. Палітра Optimize (Оптимізація) для формату GIF приведена на рис. 11.15. Подивимося, які засоби оптимізації індексованих зображень пропонує ImageReady. Найбільш істотний параметр індексованого зображення - це кількість квітів в його палітрі. Воно задається в поле Colors (Кольори) і має створювати компроміс між якістю і компактністю. Зображення містить багато квітів, тому в якості першого наближення і було вибрано число 128. Зменшуйте кількість квітів, поки вид оптимізованого зображення залишатиметься прийнятним. Не забувайте, що наша мета полягає не в ідеально точному відтворенні кольорів, а в привабливому вигляді Web-сторінки.
Мал. 11.15. Палітра Optimize для формату GIF
5. Список Color reduction algorithm (Алгоритм скорочення кількості квітів) містить перелік алгоритмів генерації .індексірованной палітри зображення. Всі вони вже обговорювалися в розділі 2. Зауважимо лише, що за замовчуванням пропонується варіант Selective (Селективна), що дає найкращі результати для зображень, що містять значний простір, заповнене близькими квітами. У нашому випадку більше підходить алгоритм Adaptive (Адаптивна).
6. Відсутні в палітрі зображення кольору імітуються поєднанням декількох сусідніх пікселів близьких кольорів. Алгоритм імітації вибирається в списку Dithering algorithm (Алгоритм згладжування). У більшості випадків використовуються варіанти Noise (Шум) і Diffusion (Дифузія), що не дають регулярного візерунка, як Pattern (Візерунок). Алгоритм Diffusion (Дифузія) краще застосовувати для фотографічних зображень, a Noise (Шум) - для фонових текстур і градієнтів. Оскільки сюжетно важливу частину нашого зображення займає не градієнт, виберіть у списку алгоритм Diffusion (Дифузія).
7. Величина згладжування задається повзунком Dither (Згладжування), розташованим праворуч. Встановіть її такою, щоб передача відтінків була задовільною. Пам'ятайте, що чим вище згладжування, тим більше розмір результуючого файлу.
8. ImageReady пропонує унікальний алгоритм попередньої обробки зображення, що підвищує ефективність стиснення. Він управляється повзунком Lossy. Великі значення цього параметра істотно знижують якість зображення. Якщо ж встановити його в межах від 5 до 15%, то зниження якості буде практично непомітним, а розмір файлу може скоротитися на 5-40%. Перемістіть повзунок Lossy (Якість) на позначку 15%.
9. Прапорець Transparency (Прозорість) забезпечує перетворення прозорих ділянок шару Photoshop в прозорість GIF-файлу. Його слід обов'язково включити, якщо в документі є прозорі ділянки, які повинні залишитися прозорими і в браузері. В іншому випадку вони виявляться заповненими суцільною заливкою. У нашому прикладі встановлювати цей прапорець немає необхідності.
10. Список Matte (Облямівка) забезпечує непомітний перехід кромки зображення до фонового кольору сторінки. Пікселі кромки виділеного об'єкта, як правило, напівпрозорі, а це не підтримується форматом GIF. В результаті при експорті зображення в формат GIF, навколо об'єктів на прозорому тлі виникає характерне світіння. Щоб уникнути його появи, встановіть в списку Matte (Облямівка) колір фону Web-сторінки. Напівпрозорі пікселі будуть пофарбовані програмою в цей колір.
Примітка
При скинутому прапорці Transparency (Прозорість) колір, заданий в списку Matte (Облямівка), вважається фоновим і заповнює всі прозорі ділянки зображення.
Однакове відтворення кольорів зображень на різних платформах комп'ютерів можна забезпечити, використовуючи стандартну палітру Web. Photoshop дозволяє тонко регулювати цей аспект дає змогу отримувати зображення з обмеженою палітрою. Ви можете привести до палітри Web всі кольори зображення або тільки деякі, найбільш важливі.
У напівавтоматичному режимі приведення квітів до палітри Web здійснюється повзунком Web Snap (До палітрі Web). Він задає відсоток наведених кольорів палітри зображення. Спробуйте переміщати цей повзунок і спостерігайте за змінами кольорів зображення.
Поточна палітра зображення наводиться в палітрі Color Table (Колірна таблиця), що відкривається командою Show Color Tabl e (Показати колірну таблицю) меню Window (Вікно) (рис. 11.16). Варіювання значення параметра Web Snap (До палітрі Web) впливає і на палітру зображення. Ви спостерігаєте зміна деяких квітів палітри і поява на їх зразках білих гуртків. Останні позначають кольори, наведені до палітри Web. Вкладка Color Table (Колірна таблиця) корисна не тільки для спостереження. Вона дозволяє управляти окремими кольорами зображення: додавати, видаляти, змінювати, приводити до палітри Web. Це набагато більш клопіткий, але і гнучкий спосіб управління. На практиці до нього доводиться вдаватися в дуже рідкісних випадках, і ми пропонуємо познайомитися з палітрою Color Table (Колірна таблиця) самостійно, якщо така потреба будь-коли виникне.
Для формату GIF в новій версії ImageReady також з'явилася підтримка зваженої оптимізації. Маски, збережені в каналі, можуть управляти алгоритмом скорочення квітів, величиною згладжування і зниження якості. Діалогові вікна з параметрами зваженої оптимізації відкриваються маленькими кнопками праворуч від відповідних списків і полів введення. Влаштовані вони абсолютно аналогічно діалоговому вікну управління якістю формату JPEG. У них необхідно вибрати канал маски, керуючий параметром оптимізації, і задати за допомогою повзунків (або полів введення) максимальні і мінімальні значення. Перевірте роботу зваженої оптимізації на кожному параметрі. Як маски використовуйте інвертовану шар-маску шару Relief. Це дасть можливість оптимізувати карту з фотографіями і градієнтний фон окремо. За рахунок зваженої оптимізації нам вдалося відіграти 6 Кбайт в розмірі файлу. Спробуйте повторити цей результат!
Мал. 11.16. Палітра Color Table
Збереження параметрів оптимізації
Тепер, коли у вас перед очима результати оптимізації для обох форматів, порівняйте їх. Визначте, який з форматів дає менший розмір і достатню якість. Якщо ви припускаєте застосовувати такі ж параметри оптимізації для великої кількості подібних зображень, їх має сенс зберегти для повторного використання.
1. Виберіть в меню палітри Optimize (Оптимізація) команду Save Settings (Зберегти установки).
2. Команда відкриває стандартне діалогове вікно збереження файлів. Налаштування оптимізації записуються в окремі файли з розширенням irs в каталог \ Presets \ Optimized Settings, вкладений в папку Photoshop. Дайте його записала установкам яке-небудь значуще ім'я.
3. Натисніть кнопку Save (Зберегти).
4. У списку Settings (Установки) палітри Optimize (Оптимізація) з'явиться введене ім'я параметрів оптимізації.
Тепер ви зможете використовувати збережений набір параметрів поряд з попередньо встановленими. Щоб видалити поточний набір параметрів, виберіть у меню палітри Optimize (Оптимізація) команду Delete (Видалити).
Збереження параметрів оптимізації дозволяє переносити їх між програмами Photoshop, Illustrator і ImageReady. ImageReady і Photoshop ділять одні й ті ж файли параметрів оптимізації. Щоб скористатися ними в Adobe Illustrator, слід переписати їх у відповідну папку цієї програми.
Автоматична оптимізація за розміром файлу
ImageReady має власними коштами аналізу зображень. На підставі аналізу програма може сама підібрати параметри оптимізації, виходячи з бажаного розміру файлу. Якість автоматичного аналізу все ж сильно поступається тому, на яке здатний людське око. Тому ми рекомендуємо застосовувати його тільки в найпростіших випадках.
1. У меню палітри Optimize (Оптимізація) виберіть команду Optimize To File Size (Оптимізувати за розміром файлу).
2. У діалоговому вікні (рис. 11.17) в поле Desired File Size (Потрібний розмір файлу) введіть розмір файлу, в який ви б хотіли укласти оптимізоване зображення.
Мал. 11.17. Діалогове вікно Optimize To File Size
3. Перемикач в області Start With (Почати с) визначає вибір формату оптимізації. Якщо він знаходиться в положенні Current Settings (Поточні установки), то для автоматичної оптимізації використовується формат, заданий в палітрі Optimize (Оптимізація). Положення Auto Select GIF / JPEG (Автоматичний вибір GIF / JPEG) дозволяє ImageReady самостійно вибрати формат, найбільш відповідний для даного зображення.
4. Перемикач Use (Використовувати) задає, який з фрагментів зображення слід оптимізувати автоматично: Current Slice (поточний фрагмент). Each Slice (Кожен фрагмент) або Total of All Slices (Всі фрагменти разом). Поки зображення не розбите на фрагменти, буде
Після натискання на кнопку OK ImageReady автоматично призведе оптимізоване зображення до заданого розміру. Якщо якість оптимізації вас не влаштує, то доведеться вдатися до "ручного" оптимізації, описаної вище,
Photoshop теж має потужний засіб оптимізації, реалізоване у вигляді плагіна Save for Web (Зберегти для Web). Його діалогове вікно відкривається однойменною командою меню File (Файл). Погляньте на нього (рис. 11.18), і вам напевно не будуть потрібні докладні пояснення - елементи інтерфейсу модуля Save for Web (Зберегти для Web) виключно схожі на ті, що ви бачили в Image Ready.
Мал. 11.18. Вікно фільтра експорту
Save For Web
Основну частину вікна займає область попереднього перегляду. Вона так само, як і вікно документа ImageReady, може перебувати в одному з чотирьох режимів, що встановлюються за допомогою вкладок. Режими дозволяють переглядати результати оптимізації без проміжної стадії експорту в файл, порівнювати різні варіанти оптимізації між собою і з оригіналом.
У правій частині вікна, нижче кнопок OK, Cancel (Скасувати) і Output Settings (Настройки експорту), знаходиться область, яка виконує функції палітри Optimize (Оптимізація) в ImageReady. У списку Settings (Установки) вибираються встановлені і збережені варіанти оптимізації, а нижче розташовуються знайомі вам настройки. Замість палітри Color Table (Колірна таблиця) в модулі Save for Web (Зберегти для Web) є вкладка Color Table (Колірна таблиця), що знаходиться під областю з установками оптимізації. Друга вкладка, Image Size (Розмір зображення), дозволяє масштабувати зображення не залишаючи модуля експорту. Це економить час на підборі оптимального розміру.
У нижній частині вікна є рядок, що відображає колір пікселя, на якому знаходиться курсор в будь-якому з вікон перегляду. Таким чином, рядок грає роль палітри Info (Інфо) в ImageReady. Поруч з нею знаходиться кнопка попереднього перегляду експортованого зображення в браузері.
Ліву сторону вікна займає панель інструментів. Інструменти Zoom (Масштаб) і Hand (Панорама) призначені для управління масштабом і прокрутки областей перегляду і діють так само, як і в самому Photoshop або ImageReady. Піпетка в модулі відтворення встановлюється для прямого редагування індексованої палітри.
Перемикач Toggle Slices Visibility (Перемикання видимості фрагментів) аналогічний перемикача на панелі інструментів ImageReady. Він керує видимістю кордонів фрагментів. Інструмент Slice Select (Виділення фрагмента) призначений для виділення окремих фрагментів при оптимізації. Про оптимізацію фрагментів буде розказано нижче в розділі "Оптимізація фрагментів" даної глави.
Але найкращим чи способом проведена оптимізація?Може бути краще використовувати формат GIF?