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

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

Отвратительные подробности (вы не просили)

Некоторые форматы изображений, такие как JPG, поддерживают сжатие с потерями . Когда изображение с потерянным сжатием сохраняется и затем отображается, изображение не на 100% точно соответствует его дизайну, а просто «близко» к нему, что-то вроде эскиза. Часть оригинальной детали потеряна . Поскольку точность не ожидается, изображения с потерянным сжатием позволяют хранить мало информации об оригинальном дизайне, что приводит к небольшим файлам. Они даже позволяют указать, насколько точным должен быть результат: чем менее точным должен быть результат, тем меньше размер файла.

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

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

Некоторые предложения

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

• Большие области плоских цветов сжимаются лучше, чем сложные узорные области. Посмотрите, можете ли вы упростить свое изображение.
• У вас много негативного пространства вокруг изображения? Попробуйте урезать его до минимума.
• Вы используете прозрачность? Если нет, попробуйте сохранить изображение в формате JPG.
• Если по какой-либо причине вы не можете сохранить его в формате JPG, но не используете прозрачность, снимите флажок «прозрачность» в параметрах сохранения. Это позволит немного побриться от вашего окончательного результата.
• Подумайте о том, чтобы разрезать изображение по частям и скомпоновать его в окончательный HTML-код, как какую-то головоломку. Вы можете сохранить части, для которых требуется прозрачность, в формате PNG, а другие части - в формате JPG с высокой степенью сжатия. Общий результат должен быть менее тяжелым.
• Используйте инструмент сжатия PNG (например, https://tinypng.com/ ). Имейте в виду, эти инструменты используют алгоритм с потерями. Они пытаются упростить ваше изображение, чтобы иметь возможность сохранить его в виде файла меньшего размера. Они значительно уменьшают размер вашего файла, но конечный результат может потерять слишком много деталей. Вы всегда можете попробовать их и оценить результат в зависимости от приложения.

Если вы поделитесь своим изображением, я могу дать вам несколько советов.

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

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

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

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

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

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