- Оптимізація зображень для Web При підготовці зображень для розміщення в інтернеті або відправки по...
- Оптимізація зображень у форматі GIF і PNG-8
- Рис.1. Послідовність створення зображення з прозорістю
Оптимізація зображень для Web
При підготовці зображень для розміщення в інтернеті або відправки по електронній пошті потрібно забезпечити необхідне в кожному конкретному випадку якість при мінімальному обсязі файлу. Для виконання цієї умови вихідне зображення треба оптимізувати. Якщо ви хочете отримати найкращий результат, то альтернативи Photoshop немає. Крім того, найкраща програма створення сайтів Adobe Dreamweaver CS3 повністю інтегрована з Photoshop, так як, нагадаю, що компанія Adobe придбала в 2005 році фірму Macromedia, творця Dreamweaver.
Робота по оптимізації зображень ділиться на два етапи: підготовка зображення в редакторі і процес стиснення. Описи оптимізації зазвичай починаються відразу з застосування команди Save for Web (Зберегти для Web) або переходом в Image Ready, а попередній підготовці не приділяється належної уваги. За замовчуванням вважається, що картинка вже відредаговано, тобто підготовлена до друку. А між тим, оптимізація для Web відрізняється від підготовки до друку має велике значення. Крім того, можливості редактора зі зміни параметрів зображення значно ширше, ніж у Image Ready, та й працювати в редакторі зручніше. Це відноситься, звичайно, тільки до процесу підготовки до стиснення, а не до спеціальних функцій Image Ready для Web: створення карти зображення, GIF-анімації і самого процесу стиснення.
Отже, ви відкрили зображення в Adobe Photoshop і виконали необхідні операції по корекції рівнів, балансу кольорів, насиченості і кадруванню. Ці операції детально описані в багатьох посібниках та на них зупинятися не будемо. Щоб не втратити оригінал, створимо копію зображення, і з нею будемо далі працювати. Зручно для цих цілей виділити окрему папку, в якій будуть зберігатися наші зображення для інтернету та електронної пошти.
Переходимо до параметрів, що впливає на ступінь можливого стиснення зображення. Спочатку визначимося з розмірами картинки, клацнувши правою кнопкою миші по синій смузі над зображенням і вибравши з меню, що випадає Image Size.
Дозвіл (Resolution) задаємо стандартне для Web - 72ppi, пропорції зберігаємо (Constrain Proportions) .Размер зображення в пікселях бажано поставити мінімально необхідний. Орієнтуватися слід на найпоширеніше дозвіл екрана, яке в даний час складає 1280х1024 (1280х800 для широкого екрану). Задавати більше цього значення немає сенсу, якщо тільки ви не плануєте використовувати прокрутку, наприклад, бажаючи продемонструвати вудилище для спортивної риболовлі або відтворити картину "Маршал Будьонний з кіннотою біля труни Леніна". Тут вже без прокрутки ніяк ...
За винятком таких екстремальних випадків, зображення повинно бути повністю видно на екрані без прокрутки. При верстці сторінки сайту розміри картинки визначаються розміром осередку таблиці і відповідністю тексту та зображення.
Основне правило при будь-якій зміні розмірів, крім обрізки (Crop): намагайтеся не міняти загальну кількість пікселів в зображенні без крайньої необхідності, так як це погіршує чіткість картинки і створює додаткові контурні спотворення, що підвищують, в кінцевому рахунку, обсяг файлу при стисненні. Це відноситься не тільки до оптимізації зображення для Web, але і до будь-яких операцій в редакторі.
Невелике зауваження: коли ви фотографуєте з єдиною метою розмістити фото в інтернеті, дуже бажано вже при зйомці задати необхідні розміри і дозвіл знімка. На жаль, це можна зробити не у всіх камерах, і тоді єдиний шлях - задавати при зйомці максимальний дозвіл, а потім в редакторі зменшити розміри до необхідних значень.
Падіння контурної різкості при зміні числа пікселів в зображенні викликає дуже неприємне явище: неоднозначність картинки на екрані монітора. Нехай ви отримали чудову якість оптимізованого зображення і з почуттям глибокого задоволення розмістили його на сайті, але, якщо в браузері користувача встановлений масштаб показу сторінки не 100%, то всі ваші зусилля були марні. Можете переконатися в цьому негайно: розгляньте будь-який з скріншотів, поміщених на цій сторінці, при різних масштабах показу в браузері. Переконалися?
Для різних браузерів падіння різкості трохи відрізняється в залежності від способів інтерполяції проміжних значень пікселів, але все одно, це явище дуже помітно. До речі, воно проявляється навіть у такому потужному редакторі, як Photoshop. Саме тому всі операції з різкістю виконуються тільки при 100% масштабі.
Аналогічний ефект проявляється і в тому випадку, якщо ви на ЖК-моніторі встановіть дозвіл, менше максимального. Картинка на моніторі складається з тих же пікселів, і спроба відтворити 1024х768 пікселів на екрані з роздільною здатністю 1280х1024 призведе до погіршення різкості. Якщо хочете, можете відразу перевірити, змінивши дозвіл вашого монітора (правий клацання на Робочому столі - Властивості - Параметри - Дозвіл екрану).
Єдина втіха - це явище не проявляється при друку сторінки сайту. З нечіткої картинки на екрані ви отримуєте при роздруківці на папері відмінну різкість, так як дозвіл принтера у багато разів вище, ніж у монітора, і втрати через інтерполяції пікселів несуттєві.
Встановивши розміри зображення, переходимо до його підготовці для подальшого стиснення. Вимоги оптимізації для форматів JPEG, GIF і PNG відрізняються, що пов'язано з різними алгоритмами стиснення. Для отримання мінімального розміру стисненого файлу в JPEG і PNG-24 треба уникати різких контрастних переходів і дрібних деталей, причому шуми на зображенні - це теж дрібні деталі і, отже, шум може сильно збільшити розмір кінцевого зображення. Для GIF і PNG-8 небажані плавні градієнтні переходи і широка палітра кольорів.
Оптимізація зображень у форматі JPEG і PNG-24
Для перегляду, як уже з'ясували, встановлюємо масштаб 100% і обробляємо фільтрами підвищення різкості.
Можна користуватися будь-якими, але мені здається найбільш зручним використовувати фільтр Unsharp Mask з параметрами, зазначеними на малюнку, повторивши послідовно його дію від трьох до п'яти разів.
Потім застосовуємо фільтр розмиття Despeckle (Filter - Noise - Despeckle) і регулюємо глибину його дії (Ctrl + Shift + F). Зазвичай достатньо зменшити розмиття приблизно до 50%, домагаючись збереження дрібних деталей при мінімальній контурної різкості, необхідної для перегляду на екрані монітора. Пам'ятайте, що при сильному шарпенінге (підвищенні різкості) зростає обсяг стисненого файлу, особливо для великих зображень.
Шуми прибираємо фільтром Reduce Noise (Filter - Noise - Reduce Noise) або будь-якої спеціальної програмою, наприклад, Neat Image або Noise Ninja.
Далі переходимо до стиснення зображення, вибравши File - Save for Web (Файл - Зберегти для Web) або Ctrl + Shift + Alt + S. Переходити в Image Ready для цього немає сенсу, так як команда Save for Web є складовою частиною Image Ready з тими ж функціями стиснення. Встановлюємо режим перегляду одночасно двох зображень, натиснувши 2-Up.
Зліва у нас виводиться оригінальне зображення, праворуч - оптимізоване стислий.
Під стисненим зображенням показані основні його характеристики: алгоритм і параметри стиснення, розмір і час завантаження в браузері при певній швидкості інтернет - з'єднання. Для вибору цікавить вас швидкості правою кнопкою миші по зображенню.
В правому куті розташовані основні регулювання стиснення. Клацнувши по стрілці в вікні Quality (Якість), виводимо шкалу і повзунком регулюємо ступінь стиснення, контролюючи якість по зображенню в правому вікні. Якщо результат стиснення, тобто "вага" отриманого файлу при належній якості, нас не влаштовує, що для допитливого веб-дизайнера характерно в 99% випадків, тиснемо Cancel. Повернувшись таким чином в редактор, повторюємо маніпуляції з Unsharp Mask, Despeckle і Reduce Noise з іншими параметрами. Слід врахувати, що послідовність застосування цих трьох фільтрів той же позначається на результаті. Методом "крок назад, два кроки вперед" поступово добиваємося максимального стиснення при задовольняє нас як картинки. На жаль, отримані установки фільтрів для оптимізації зображення унікальні для кожного випадку, але відмінності не дуже значні, і після декількох експериментів ви будете представляти силу впливу кожного фільтра на остаточний результат оптимізації зображення.
Для полегшення життя зручно призначити для наших трьох фільтрів швидкі клавіші виклику. Нагадаю, для цього треба вибрати в Photoshop команду Edit - Keyboard Shortcuts. Після цього ви завжди зможете повторно викликати фільтр з попередніми установками, натиснувши Ctrl + Alt + (клавіша фільтра).
Якщо ви хочете, щоб зображення з'являлося на екрані монітора поступово, встановіть прапорець Progressive. Іноді це трохи збільшує, а буває, навпаки, зменшує розмір файлу, але для великих зображень виправдано, так як підвищує зручність перегляду. Параметр Blur краще не використовувати, тому що він значно грубіше, ніж Despeckle.
У палітрі параметрів стиснення є спеціальна функція для дуже ледачих - автоматична оптимізація зображення. Для її вибору встановіть прапорець Optimized і натисніть кнопку з трикутником над нею. У випадаючому меню виберете Optimize to File Size.
У вікні можна задати бажаний розмір оптимізованого зображення і формат: або певний вами - Current Settings, або надати його вибір програмі - Auto Select GIF / JPEG. Тиснемо ОК і отримуємо результат, який може задовольнити тільки дуже невибагливого користувача. Як майже будь-яка автоматизація в Photoshop - ця функція практично не застосовується, але для загального розвитку знати про неї треба.
Формат PNG-24 поєднує в собі риси JPEG і GIF: підтримує 24-розрядний колір, зберігає прозорість і дуже добре передає півтони. Розмір одержуваних зображень зазвичай більше, ніж в JPEG, але бувають винятки. Тому є сенс при оптимізації зображення спробувати і PNG-24.
Оптимізація зображень у форматі GIF і PNG-8
Для графічних зображень з невеликою кількістю квітів, великими однотонними ділянками і текстом, наприклад, діаграми, логотипи, скріншоти і прості малюнки, краще застосовувати стиснення в форматах GIF і PNG-8. При підготовці зображень для цих форматів треба прагнути до зменшення кількості квітів, відсутності градієнтів (плавних змін насиченості і колірного тону) і крайових обкантовок. Формат PNG-8 зазвичай дає кращі результати, ніж GIF. Щоб вибрати формат використовуємо меню, що випадає вікна Preset.
Для регулювань доступні наступні параметри: алгоритм стиснення, розмиття (Dither), прозорість (Transparency) і кількість відтворюваних кольорів (Colors). Останній параметр найбільш важливий. Зменшуйте кількість квітів до прийнятного рівня, а потім поекспериментуйте з алгоритмом стиснення. Зазвичай найкращий результат при мінімальному обсязі дає вибір Selective.
Потім переходимо до регулювання згладжування. Ця функція дозволяє імітувати бракуючі кольори декількома сусідніми пікселями. Зазвичай використовується режим Diffusion, а для градієнтів - Noise. Конкретне значення розмиття встановлюємо в вікні Dither за допомогою випадає шкали.
Також, як і в випадку з оптимізацією зображення у форматі JPEG, найкращого результату можна досягти тільки вручну методом послідовних наближень, домагаючись найкращого співвідношення якість / розмір файлу. Тут може бути зручний режим одночасного показу чотирьох зображень (кнопка 4-Up в лівому верхньому кутку): вихідного і трьох різних варіантів в GIF і PNG форматах.
У форматі GIF є функція Lossy (Зниження якості), яка дозволяє при невеликих значеннях зменшити розмір стисненого файлу. При регулюванні треба уважно стежити за якістю, яке швидко погіршується при значеннях Lossy вище 20%.
Формати GIF і PNG дозволяють зберігати прозорість. Це дозволяє накласти зображення на фон сторінки. Без застосування прозорості ви обмежені прямокутною формою кадру зображення. Для створення прозорих областей їх треба виділити або створити маску в редакторі. Наприклад, на логотипі "Фото", розташованому в правому верхньому кутку цієї сторінки, прозора область оточує смайлик.
Створена така прозора область наступним чином (рис.1):
- Спочатку я намалював смайлик "Фото";
- Інструментом Magic Wand Tool (Чарівна кисть) виділив область навколо смайлика;
- Сам смайлик виділив командою Select - Inverse (Виділення - Інверсія);
- Для переміщення смайлика на окремий шар застосована команда Layer - New - Layer Via Copy (Шар - Новий - Шар через копіювання);
- Відключив фоновий шар Background клацанням в вікні Layer по зображенню очі на рядку. При цьому фон замінюється на "шахове поле" - абсолютна прозорість;
- Вибрав команду File - Save for Web (Файл - Зберегти для Web), формат PNG-8, встановив прапорець Transparency і оптимізував зображення з параметрами, зазначеними на малюнку.
Рис.1. Послідовність створення зображення з прозорістю
Звичайно, аналогічний результат можна отримати і без хитрощів з прозорістю: досить призначити колір фону у смайлика такий же, як і на сторінці сайту. Для простих зображень це цілком підходить, але якщо фон має текстуру, або картинку передбачається розмістити в різних місцях, то без підтримки прозорості можуть виникнути складності.
Оптимізуються для Web зображення не завжди підходять для стиснення в якомусь одному форматі. Наприклад, натюрморт або портрет зазвичай мають рівномірний розмитий фон, ідеальний для сильного стиснення, і сам об'єкт зйомки, для відображення якого підходять тільки JPEG високої якості і PNG-24. Багато таких змішаних зображень в рекламі (буклети, календарі, каталоги продукції), де фотографії сусідять з графікою і текстом. Для таких випадків оптимально розділити зображення на фрагменти - слайси і кожен оптимізувати за своїм алгоритмом стиснення. Цей спосіб розглянемо докладніше в подальших статтях по підготовці зображень для Web. Вплив вихідного формату на можливості стиснення зображення показано в статті про зняття скріншотів . Так, наприклад, якщо зображення вже було стисло в JPEG, то оптимізація його можлива тільки в JPEG, так як GIF і PNG-8 дадуть великий обсяг стисненого файлу.
Також для оптимізації змішаних зображень можна застосувати і метод зваженої оптимізації : Тобто різної для різних областей зображення. Цей метод дозволяє зменшити кількість квітів і точно контролювати ступінь стиснення, що дозволяє зменшити розмір файлу при збереженні високої якості.
У разі, якщо всі перераховані методи оптимізації вас не влаштовують, то завжди залишається можливість дати посилання на завантаження якісного зображення великого обсягу. При цьому проявляйте повагу до користувача - не забувайте вказати розмір закачується файлу картинки.
2.08.2008 р
