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.