Продизайн. На головну.

Інструменти ↓

Оптимізація PNG-малюнків для веб-сайтів

1

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

Нарізаючи макет у Photoshop ми вже маємо змогу зменшити розмір вихідних зображень вибираючи тий чи інший формат стискання (GIF, PNG, JPEG) в залежності від того, що зображено на малюнку. Наприклад, текст краще зберігати у PNG-8, а пейзажі, градієнти і т.п. у JPEG. Але такі ситуації, коли нам потрібний малюнок з напівпрозорим фоном, тут єдиний варіант — PNG-24. Photoshop же, зберігаючи у такому форматі, записує у тіло зображання ще багато зайвої службової інформації, що ніяк не йде на користь вихідному файлу. Читав, що Fireworks не страждає таким неподобством, але зараз я не про нього.

Для того, щоб викинути цю зайву інформацію не погіршивши якості самого зображення є спеціальна утиліта «PNGGauntlet». Насправді, таких програм є багато, але ця мені сподобалася тим, що:

  • має людський інтерфейс, а не консоль;
  • є вибір алгоритму пакування зображення (від простого і швидкого до продвинутого але повільного);
  • відображення інформації, скільки вдалося зберегти дорогоцінних кілобайт;
  • пакетна обробка зображень.

pnggauntlet — оптимізація png зображень

Ось приклад роботи програми на простому зображенні

   оптимізований малюнок

До оптимізації (зображення зліва) вага зображення 5,24 Кб. Після (справа): 3,76 Кб (зменшено на ~ 30%)

      

Ще цікаве

Ваш коментар

Обов'язкове

Обов'зкове. Не публікується

Якщо є