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


10

У меня есть файл PNG размером 2042 x 1250 и 6,1 МБ. Когда я открываю с помощью Photoshop и выполняю «Сохранить как> PNG 24» и выбираю сжатый размер файла из двух вариантов (другой - без сжатия), я все равно получаю изображение размером порядка нескольких МБ, которое, поскольку оно будет веб-ресурсом, я бы хотел быть в КБ, а не в МБ. Как мне разумно сжимать это изображение до приблизительного диапазона в несколько тысяч КБ?


1
Вместо этого используйте file -> save for web и выберите 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.
— Ханнес Шнайдермайер

@Heanz. Правда. Преобразуется в 8-разрядный. Но это не GIF, хотя. Он поддерживает альфа-прозрачность. По своему опыту, я никогда не замечал разницы между полноценным PNG и тем, который они производят.
— cockypup

@cokcypup Для логотипов, которые могут быть правдой, но для человеческого лица, ни за что.
— Ханнес Шнайдермайер

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

2

Попробуйте добавить корректирующий слой Posterize к изображению и уменьшите количество цветов. Я считаю, что вы можете сохранить высокое качество и уменьшить размер файла с помощью этого метода.


Работает как шарм!
— Кристиан Странг

0

PNG на 6,1 МБ далек от диапазона КБ, поэтому предложения Cokypup будут лучше.

Для других PNG, которые вы можете создать, лучший способ сохранить их для использования в Интернете - сохранить в Photoshop с помощью «Сохранить для Интернета», а не «Сохранить как». Photoshop "Save for Web" выполняет некоторую оптимизацию, которая значительно уменьшает размер файла.

Затем я бы следил за этим, используя инструмент сжатия для PNG, такой как Tiny PNG.
Tiny PNG использует сжатие с потерями, как при сохранении JPG. Это значительно уменьшает размер файла, и, как видно из примера на сайте, сжатие с потерями, которое он выполняет, едва заметно.


Едва заметное зависит в значительной степени от изображения, которое вы передаете через алгоритм, который я нашел, используйте с осторожностью и никогда не перезаписывайте ваш оригинальный файл.
— PieBie

Он конвертируется в 8 бит и выглядит как GIF на красочных фотографиях.
— Ханнес Шнайдермайер

-1

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

Изображение> Размер изображения> установите разрешение 72 ppi.


это не влияет на изображения, используемые для Интернета, только размер в px
— Luciano
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.