Оптимізація зображень для Web

• Оптимізатор фотографій JPEG для WEB • Стиснення зображень за допомогою скріншотів • Оптимізація зображень для Web. Програма RIOT • Стиснення фотографій для інтернету та електронної пошти у програмі FastStone Image Viewer • Стиснення фотографій програмою Zoner Photo Studio Free • Оптимізація зображень для Web • Зменшення втрат при зміні розмірів зображень • Фрагментарна оптимізація зображень для Web • Прості ефекти виводу зображень

Під час підготовки зображень для розміщення в Інтернеті або надсилання електронною поштою потрібно забезпечити необхідну в кожному конкретному випадку якість за мінімального обсягу файлу. Для виконання цієї умови вихідне зображення потрібно оптимізувати. Якщо ви хочете отримати найкращий результат, то альтернативиPhotoshop немає. Крім того, найкраща програма створення сайтівAdobe Dreamweaver CS3 повністю інтегрована зPhotoshop, оскільки, нагадаю, що компанія Adobe придбала в 2005 році фірмуMacromedia, творцяDreamweaver.

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

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

Роздільна здатність (Resolution) задаємо стандартне для Web - 72ppi, пропорції зберігаємо (Constrain Proportions). Розмір зображення в пікселях бажано задати мінімально необхідний. Орієнтуватися слід на найпоширенішу роздільну здатність екрану, яка в даний час становить 1280х1024 (1280х800 для широкого екрану). Задавати більше цього значення немає сенсу, якщо ви не плануєте використовувати прокручування, наприклад, бажаючи продемонструвати вудлище для спортивної риболовлі або відтворити картину "Маршал Будьонний з кіннотою біля труни Леніна". Тут уже без прокручування ніяк.

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

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

Аналогічний ефект проявляється і в тому випадку, якщо ви на РК-моніторі встановите роздільну здатність менше максимального. Картинка на моніторі складається з тих же пікселів, і спроба відтворити 1024х768 пікселів на екрані з роздільною здатністю 1280х1024 призведе до погіршення різкості. Якщо хочете, можете відразу перевірити, змінивши дозвіл вашого монітора (праве клацання на робочому столі - Властивості -Параметри - Роздільна здатність екрана).

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

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

Оптимізація зображень у форматі JPEG та PNG-24

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

Шуми прибираємо фільтромReduce Noise (Filter - Noise - Reduce Noise) або будь-якою спеціальною програмою, наприклад, Neat Image або Noise Ninja.

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

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

Для полегшення життя зручно призначити для наших трьох фільтрів швидкі клавіші дзвінка. Нагадаю, для цього потрібно вибрати у Photoshop командуEdit - KeyboardShortcuts. Після цього ви завжди зможете повторно викликати фільтр із попередніми установками, натиснувши Ctrl+Alt+(клавіша фільтра).

На панелі параметрів стиснення є спеціальна функція для дуже лінивих - автоматична оптимізація зображення. Щоб її вибрати, встановіть прапорець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%.

Створено таку прозору область наступним чином (рис.1):

Рис.1. Послідовність створення зображення з прозорістю

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

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