Не секрет, що оптимізація графіки сайту може істотно прискорити завантаження і відображення веб-сторінки, підвищити сумісність з іншими пристроями і зробити сайт більш привабливим для пошукових систем. В основному, сайти містять безліч іконок, графіки в png форматі. За замовчуванням, в стандартних темах CMS графіка вже оптимізована, але коли виникає бажання щось поліпшити, - наприклад, оновити іконки, - виникають і проблеми.
На популярних сайтах, таких як www.iconsearch.ru , www.iconfinder.com і інших, іконки містяться в форматі PNG-24 з альфа каналом, що забезпечує прозорість фону. Тобто таке зображення можна помістити абсолютно на будь-який фон, однак його розмір величезний - приблизно в 5 разів вище, ніж у оптимізованого зображення.
Отже, стаття про те, як виконати пакетну оптимізацію графіки сайту в форматі PNG і максимально без втрат якості зменшити розмір вихідних зображень. Перш за все, слід визначитися з тим, чи потрібен Вам альфа-канал, тобто прозорість іконки. Справа в тому, що саме прозорість додає зображенню зайві кілобайти. У розглянутому нами прикладі ми будемо припускати, що фон основної області сайта, що містить іконки, - білого кольору.
Ось папки, в яких знаходяться зображення для оптимізації.
Вихідні папки з іконками
Відкриваємо програму під назвою Photoshop. Тиснемо Alt + F9 - відкриється вікно «Операції». Створюємо нову операцію під назвою «Іконки».
Створюємо нову операцію в Photoshop
Після цього почнеться запис операції, яку ми будемо використовувати для пакетної обробки. Відкриваємо будь-яке тестове зображення, яке можна «покалічити». Далі переходимо в меню Зображення -> Розмір зображення. Змінюємо розмір, вказуючи кінцевий розмір в пікселях. Якщо ця операція не потрібна, - пропустіть цей крок.
Далі ми вибираємо основний колір, який буде фоном нашої іконки (в самому низу панелі інструментів зліва). У нашому випадку - це білий. Після цього переходимо в меню Зображення -> Режим -> Індексовані кольору. У вікні вказуємо такі параметри:
Палітра - Локальна (Селективна),
Кольори - тут вказуємо число до 256-ти. Це кількість квітів, використовуваних в зображенні і від цього параметра залежить наскільки буде зменшено зображення. Рекомендую поставити значення 128. Якщо іконка не містить багато квітів, то можна поставити менше;
Примусові - не показує,
Прозорість - знімаємо галочку;
Підкладка - Основний колір (це буде фон іконки);
Дизеринг - Випадковий, 75%.
Photoshop. Індексовані кольору.
Натискаємо ОК, зберігаємо файл і потім - зупиняємо запис операції у вікні «Операції». Далі переходимо в меню Файл -> Автоматизація -> Пакетна обробка. Вибираємо створену нами операцію, а також вказуємо шлях до папки з нашими іконками. Галочки виставляємо як на картинці нижче:
Photoshop. Пакетна обробка.
Коли операція буде закінчена розмір іконок не зміниться - не лякайтеся! Зображення вже оптимізовані: ми «відсікли» непотрібні кольору, прибрали альфа-канал, однак зображення все ще містять багато порожніх байтів, що не несуть корисної інформації. Ми їх повинні прибрати. Для цього є дуже хороша програма, яку я ледве-ледве знайшов. Це єдине працездатне і найпростіше у використанні додаток, яке може очистити PNG зображення від «сміття», залишивши лише ті байти, які містять інформацію. Таким чином вона не шкодить якості зображення - його ми вже зафіксували і обмежили в Photoshop.
Називається програма PngOptimizer. Переходимо на сайт http://psydk.org/PngOptimizer.php і викачуємо ZIP архів з програмою (вона безкоштовна). З нього нам знадобиться лише невеликий файлик під назвою PngOptimizer.exe. Кладемо в зручне для нас місце, запускаємо програму і просто перетягуємо туди все папки з іконками. Програма перезберегти всі файли, залишивши їх в тих же локаціях, де вони і лежать:
Оптимізація PNG за допомогою програми PngOptimizer
Процес займе зовсім небагато часу і Ви будете задоволені результатом. Тепер нам потрібно видалити всі бекапи (резервні копії), залишені програмою. Вони починаються з символу нижнє підкреслювання. Переходимо в папку, де містяться папки з іконками і вбиваємо в пошук «_ *. Png«. Провідник знайде всі файли з розширенням PNG, які починаються з нижнього підкреслення. Виділяємо їх все і видаляємо.
Усе. Тепер іконки готові до завантаження на сервер!
