Photoshop: як зменшити розмір PNG для веб-використання


10

У мене файл PNG розміром 2042 х 1250 і 6,1 Мб. Коли я відкриваю програму Photoshop і роблю "Зберегти як> PNG 24" і вибираю стислий розмір файлу з двох варіантів (інший не стискається), я все одно отримую зображення на замовлення в кілька Мб, яке, оскільки стане веб-активом, я хотів би бути в КБ, а не в МБ. Як мені зробити інтелектуальне стиснення цього зображення до діапазону бальних парків у декілька тисяч КБ?


1
Використовуйте файл -> збережіть для Інтернету і виберіть png 24 зі списку форматів файлів (JPG зазвичай за замовчуванням).
AndrewH

Чому ви вважаєте, що файл можна стиснути стільки, скільки вам потрібно? Можливо, ви захочете перейти на JPEG і повозитися за допомогою параметрів нижчої якості.
usr2564301

Відповіді:


13

Подробиці (ви не просили)

Деякі формати зображень, такі як JPG, підтримують стиснення втрат . Коли зображення, що стиснене з втратою, втрачається та повертається назад, зображення не є на 100% точно таким, як ви його сконструювали, а просто "близько" до нього, начебто ескіз. Частина оригінальної деталі втрачена . Оскільки немає точного очікування, зображення, що стискаються з втратами, розкішно зберігає мало інформації про оригінальний дизайн, в результаті чого утворюються невеликі файли. Вони навіть дозволяють вказати, наскільки точним повинен бути результат: чим менш точним повинен бути результат, тим меншим є файл.

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

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

Деякі пропозиції

Сказавши це, ви можете зробити кілька речей, щоб спробувати отримати менший файл.

  • Великі плоскі кольори стискаються краще, ніж складні ділянки з малюнком. Подивіться, чи можете ви спростити своє зображення.
  • Чи є у вас багато негативного простору навколо зображення? Спробуйте підрізати його до мінімуму.
  • Ви використовуєте прозорість? Якщо ні, замість цього збережіть зображення як JPG.
  • Якщо ви не можете зберегти його як JPG з будь-якої причини, але не використовуєте прозорість, зніміть «прозорість» з параметрів збереження. Це дозволить збрити трохи укусів від вашого остаточного результату.
  • Подумайте розрізати зображення по частинах і скласти його в кінцевий HTML, як якусь головоломку. Ви можете зберегти деталі, які потребують прозорості, як PNG, а інші частини - як дуже стислі JPG. Загальний результат повинен бути менш важким.
  • Використовуйте інструмент стискання PNG (наприклад, https://tinypng.com/ ). Зауважте, ці інструменти використовують алгоритм втрат. Вони намагаються спростити ваше зображення, щоб мати можливість зберегти його як менший файл. Вони різко зменшують розмір вашого файлу, але кінцевий результат може втратити занадто багато деталей. Ви завжди можете спробувати їх і судити про результат залежно від програми.

Якщо ви поділитесь своїм образом, я можу дати вам кілька пропозицій.


TinyPNG перетворюється на 8-бітний PNG, схожий на GIF.
Hannes Schneidermayer

@Heanz. Правда. Він перетворюється на 8-біт. Але це не GIF. Він підтримує прозорість альфа. В моєму досвіді я ніколи не помічав різниці між повним видувом PNG і тим, що вони виробляють.
cockypup

@cokcypup Для логотипів, які мої правдиві, але для людського обличчя, ніяк.
Ганнес Шнайдермайер

@Heanz я ніколи не використовував для обличчя людини, але я регулярно використовую його для фотографій упаковки косметики. Я не можу визначити різницю в них. І все-таки мій коментар про альфа правильний. Формат GIF не підтримує прозорість альфа.
cockypup

2

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


Працює як шарм!
Крістіан Стронг

0

PNG з розміром 6,1 Мб далеко не діапазон KB, тому найкращі пропозиції Кокіпупа.

Для інших PNG-файлів, які ви можете створити, найкращий спосіб зберегти їх для веб-використання - це збереження у Photoshop за допомогою "Зберегти для Інтернету", а не "Зберегти як". "Збереження для Інтернету" Photoshop робить деяку оптимізацію, яка значно зменшить розмір файлу.

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


Ледь помітно багато в чому залежить від зображення, яке ви подаєте за алгоритмом, який я знайшов, використовуйте обережно і ніколи не перезаписуйте свій вихідний файл.
PieBie

Перетворення його на 8-бітне і виглядає як GIF на кольорових фото.
Hannes Schneidermayer

-1

Мабуть, само собою зрозуміло, але багато людей забувають встановити свою роздільну здатність у 72 пікселів / дюйм для веб-ресурсів.

Зображення> Розмір зображення> встановіть роздільну здатність 72 ppi.


це не впливає на зображення, використовувані для Інтернету, лише розмір у px
Luciano
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.