Зображення для веб-сторінки - як оптимізувати
Різні формати – різні підходи.
Основне місце у вікні займає панель із вкладками, де відображається зображення, що оптимізується. На вкладці Original (Вихідний вигляд) зображення виводиться у тому вигляді, як воно було створено; на вкладці Optimized (Оптимізований вигляд) – так, як воно виглядатиме при збереженні з вибраними параметрами. Для оцінки ступеня стиснення та змішування зазвичай доводиться по кілька разів переходити від однієї вкладки до іншої. Як правило, зручніше використовувати вкладку 2-up (Два види), де поруч відображаються вихідна та оптимізована версії (або дві оптимізовані). Вкладка 4-up (Чотири види) розділена на чотири частини – і оригінал можна порівнювати з трьома оптимізованими версіями.
Під оптимізованим зображенням наводяться його основні характеристики, зокрема формат, основні параметри оптимізації, розмір файлу та приблизний час завантаження. Пропускна здатність каналу, на основі якої робиться ця оцінка, вибирається в основному списку, що розкривається діалогового вікна.
Розмір зображення, що оптимізується, теж можна змінити - мабуть, це єдиний спосіб зменшити геометричні розміри при стисканні. На вкладці Image Size (Розмір зображення), розташованій у правому нижньому куті діалогового вікна Save for Web (Зберегти для Web), можна вибрати новий розмір зображення, вказавши його висоту і ширину або в абсолютних одиницях, або у відсотках. У Photoshop можна вибрати метод інтерполяції зображення: Smooth (Плавно) або Jagged (Різко) - у повному діалоговому вікні зміни розміру Photoshop вони відповідають бікубічній інтерполяції та інтерполяції сусідніх пікселів. У Illustrator питання інтерполяції не стоїть, оскільки змінюються розміри векторного оригіналу.
Незалежно від вибраного інструменту, у нижній частині вікна наводяться постійно оновлювані дані про колір піксела, на який наведено курсор. Йдеться про значення червоної, зеленої та синьої складових, а також альфа-каналу для напівпрозорих зображень. Позначене поруч шістнадцяткове число є червоним, зеленим і синім компонентами, об'єднаними в 24-розрядне значення, яке і записано в шістнадцятковому форматі.
Нарешті, для файлових форматів з індексуванням кольору (GIF та PNG-8) наводиться індекс кольору на панелі. Зліва від даних про колір знаходиться поле, в якому вводиться коефіцієнт збільшення.
У Photoshop на міні-панелі інструментів є ще один інструмент, призначений для виділення фрагментів, на які може бути розбито зображення, та їх незалежної оптимізації. Кнопка, розташована під міні-панеллю, призначена для увімкнення та вимкнення відображення меж фрагментів.
Параметри оптимізації
Найпростіше вибрати стандартну заготовку зі списку Settings (Параметри). Набір елементів керування змінюється в залежності від вибраного формату файлу - наприклад, для GIF це число кольорів на панелі.
Максимальна кількість кольорів (256) у заготовках не використовується, оскільки вважається, що після 128 кольорів додавання до пікселя ще одного біта не призводить до помітного покращення якості зображення.
Якщо, розглянувши попередню версію оптимізованого файлу, ви дійдете висновку, що жодна із заготовок вам не підходить, спробуйте налаштувати параметри вручну. Ми розглянемо цю операцію для всіх форматів веб-зображень по черзі.
Оптимізація форматів GIF та PNG
Найбільше параметрів формату GIF. Перший з них (зліва направо, у верхньому рядку) - це значення від 0 до 100,відповідне обсягу втрат при стисканні зображення. Звичайно, це дивує – адже GIF-файли стискаються за алгоритмом без втрат. Але вже стало загальноприйнятою практикою надавати користувачеві можливість відкинути деяку частину інформації, перш ніж застосовувати LZW-алгоритм - таким чином підвищується ефективність стиснення. Оскільки відкинута інформація не відновлюється, отримуємо комбіновану процедуру стиснення із втратами. Але навіть при невеликому рівні втрат (менше 10) розмір файлу може значно скоротитися без помітної зміни якості зображення. А ось за великих втрат виходять непривабливі артефакти.
Обсяг втрат вказується безпосередньо в полі Lossy (Втрати) або на шкалі, яка з'являється, якщо навести курсор на трикутник поряд з цим полем і деякий час натиснути кнопку миші.
Другий рядок параметрів використовується для вибору палітри кольорів. З розташованого зліва списку, що розкривається, вибирається спосіб її побудови. В основний набір входять Perceptual (Перцепційна), Selective (Виборча), Adaptive (Адаптивна – тобто побудована з кольорів вихідного зображення) та Web (фіксований набір веб-безпечних кольорів). У Photoshop передбачено кілька додаткових фіксованих палітр: системні палітри MacOS та Windows, а також чорно-біла (один біт на колір) та палітра сірих напівтонів.
Перші три способи побудови палітр відрізняються колірними пріоритетами у зображенні. У перцепційному методі пріоритети визначаються чутливістю людського ока до різних кольорів: чим краще ми сприймаємо колір, тим вищий його пріоритет. У виборчому алгоритмі (пропонованого за умовчанням) перевага надається областям однорідного кольору та веб-безпечним кольорам. Цей алгоритм створювався з розрахунком на GIF-стиснення та можливості браузерів. В адаптивному методі пріоритет кольору визначається інтенсивністю його використання у зображенні.
У наступному полі, Colors (Кольори), вибирається розмір палітри. У списку, пов'язаному з цим полем, представлені ступеня двійки, що визначають кількість кольорів. Всі ці значення точно дорівнюють кількості біт, тому навряд чи є великий сенс їх змінювати. Однак за бажання можна ввести значення вручну або скористатися спеціальними кнопками для його збільшення та зменшення.
Щоб побачити, наскільки браузер спотворить зображення, виберіть зі згаданого списку або ж на правій панелі діалогового вікна Save for Web (Зберегти для Web) режим Browser Dither (Змішення браузера), а в ImageReady - команду View - Preview - Browser Dither (Вид - Перегляд – Змішення браузера).
У першому режимі, No Dither (Без змішання), не робиться жодних спроб змішування - ця операція цілком покладається на браузер, що може призвести до постеризації. У режимі Pattern (Візерунок) змішування нагадує традиційне напівтонове растрування, яке використовується в друку для отримання великої кількості кольорів з обмеженого набору чорнила. У веб-зображеннях регулярні візерунки зазвичай виходять надто явними. У режимах Diffusion (Дифузія) і Noise (Шум) вноситься елемент випадковості, тому змішання стає менш помітним. Якщо зображення розбите на фрагменти для окремого завантаження, у режимі Diffusion між такими фрагментами іноді утворюються видимі краї; у режимі Noise (Шум) цього немає. Для режиму Diffusion (Дифузія) вказується інтенсивність дифузії у відсотках - це значення або вводиться безпосередньо, або вибирається на шкалі, яка з'являється по клацанню на розташованій поручтрикутної стрілки.
Наступні два параметри призначені для прозорих областей зображення. Якщо увімкнути режим Transparency (Прозорість), прозорим областям буде призначено колір, який на панелі GIF відповідає прозорості. Іншими словами, ті області зображення, які у Photoshop були прозорими, такими і залишаться - так що крізь файл GIF, розміщений на веб-сторінці, буде проступати фон. Натомість у полі Matte (Маска) можна вибрати колір, яким заповнюватимуться повністю прозорі області.
Але це ще не все. Вирівнювання країв призводить до появи у вихідному зображенні напівпрозорих пікселів. При маскуванні ці пікселі поєднуються з кольором маски. Якщо вибрати режим прозорості і вказати колір маски, цей колір буде змішуватися тільки з частково прозорими пікселями, а повністю прозорі такими і залишаться. Якщо фон веб-сторінки заздалегідь відомий, то, вказавши в режимі прозорості такий самий колір маски, вдасться уникнути ореолу, що з'являється при накладенні на фон зображень, краї яких згладжені за допомогою прозорості.
У списку Matte (Маска) пропонуються такі режими: None (Ні) - де колір маски відсутній; Eyedropper Color (Колір піпетки), де колір маски відповідає останньому виділенню, зробленому інструментом "піпетка" з міні-панелі інструментів; White (Білий); Black (Чорний); Інші. (Інший. ), коли виводиться вікно підбирача кольору.
У нижньому рядку параметрів оптимізації GIF-файлу є перемикач режиму черезрядкового виведення та поле, в якому вказується рівень автоматичної заміни кольорів найближчим значенням із веб-безпечної палітри - щоб уникнути змішування. Це значення виражається у відсотках, і чим воно більше, тим більше кольорів підлягає заміні. Прийнято говорити, щокольори прив'язуються до веб-безпечної палітри.
Параметри формату PNG-8 ідентичні GIF, за винятком того, що там не передбачено стиснення з втратами. У форматі PNG-24 параметрів найменше - і вони найпростіші: перемикачі черезрядкового виведення та прозорості, а також поле для вибору кольору маски.
Оптимізація JPEG
Природа JPEG-зображень докорінно відрізняється від зображень GIF і PNG, тому параметри оптимізації в них інші. Тут теж є поле вибору кольору маски, але оскільки у форматі JPEG прозорість не підтримується, цим кольором заповнюються тільки прозорі області - якщо вибрати режим None (Ні), то відбувається заповнення білим кольором. Крім того, тут передбачено перемикач прогресивного завантаження, подібного до описаного вище черезрядкового висновку. Інші параметри JPEG визначаються характерними властивостями цього формату.
Є три способи вибору якості. Найпростіший - вибрати один із варіантів у запропонованому списку: Low (Низьке), Medium (Середнє), High (Високе) або Maximum (Максимальне). Точніша градація часто практично не дає видимого ефекту. Але за бажання можна ввести числове значення в полі Quality (Якість) або підібрати його на шкалі, клацнувши на трикутній стрілці, що розташована поруч.
Над полем Quality (Якість) є перемикач з написом Optimized (Оптимізований). Цей параметр означає додатковий стиск JPEG-файлу з використанням ще однієї властивості цього стандарту. Однак не всі браузери здатні відновити таке зображення, тому іноді від цього режиму відмовляються з міркувань сумісності.
Під полем Quality (Якість) знаходиться ще одне поле введення зі шкалою для налаштування розмиття по Гаусс, що застосовується до зображення перед стисненням.Завдяки розмиттю зменшується вплив артефактів, що виникають при високих рівнях стиску JPEG. При розміщенні зображень у Web розмиття застосовується постійно, хоча зображення у своїй, як і очікувати, може дещо розпливатися.
JPEG-файли можуть включати колірні профілі ICC (International Color Consortium), які використовуються програмним забезпеченням, призначеним для керування кольором, наприклад Apple ColorSync. В профіль кольору записуються властивості пристрою, на якому було створено зображення (такі як гамма монітора) - браузер, що підтримує колірні профілі, враховує їх при відображенні на пристрої з іншими характеристиками. Для того, щоб вбудувати колірний профіль у файл JPEG, потрібно активувати перемикач ICC Profile (ICC-профіль). Однак слід враховувати, що це можливо, лише якщо профіль був збережений у вихідному форматі зображення.
Справжній майстер, звичайно, ретельно оптимізує кожне зображення для кожної веб-сторінки, на якій воно розміщується. Але менш розбірливі веб-дизайнери часто використовують те саме вдало підібране поєднання параметрів для безлічі схожих зображень.
Якщо ви помітите, що багато разів використовуєте ті самі значення, можете зберегти їх у вигляді заготовки, додавши її до стандартних варіантів, представлених у списку Settings (Параметри). Для цього необхідно вибрати команду Save Settings. (Зберегти параметри. ) з меню панелі Optimize (Оптимізувати) у ImageReady або її еквівалент у діалоговому вікні Save for Web (Зберегти для Web). Оскільки такі заготовки зберігаються у звичайних файлах, відкриється вікно збереження файлу - і залишиться лише призначити ім'я вибраній групі значень. Під цим ім'ям вона з'явиться в списку Settings(Параметри). Якщо згодом вирішите, що ця заготівля більше не потрібна, ви зможете видалити її за допомогою команди Delete Settings (Видалити параметри) з меню панелі. З цієї команди видаляється заготівля, виділена на даний момент.
Якщо у вас немає бажання заглиблюватися в тонкощі вибору формату та налаштування його параметрів, цю операцію можна зробити швидше (і, ймовірно, грубіше). Для цього потрібно вибрати зі списку заготовок Settings (Параметри) у діалоговому вікні Save for Web (Зберегти для Web) - в Illustrator це вікно простіше, тому що там не передбачається поділ зображення на фрагменти. У Save for Web потрібно, по-перше, задати розмір файлу, який повинен вийти, і, по-друге, вказати, чи слід використовувати як відправну точку поточні параметри або все (у тому числі формат файлу) має визначатися автоматично. Звичайно, останній варіант простіший - але це означає передачу контролю над численними параметрами програмі (іншими словами, вам доведеться погодитися з готовими рішеннями програмістів).
На сторінці "Книги - безкоштовно" Ви можете СВІЛЬНО завантажити деякі матеріали розділу "Бонус" негайно.