Потеря качества изображения после изменения его размера - PullRequest
Новая
       21

Потеря качества изображения после изменения его размера

0 голосов
/ 05 мая 2020

Привет, ребята, у меня следующая проблема. На моем веб-сайте у пользователя есть возможность загружать изображения. Размер этих изображений будет изменен из-за размера и места на диске et c.

Я использую sharp для изменения размера изображения: https://www.npmjs.com/package/sharp

В моем тесте я загрузил изображение размером ~ 3000x2000, оно увеличивается до 600x600. Я также изменяю его размер до 300x300 и 120x120. При 120x120 изображение выглядит более размытым ..

Вот изображение без изменения размера. Это изображение имеет размер 3000x2000, но его размер изменяется до ~ 600x600 в браузере:

enter image description here

А вот изображение, размер которого изменен с помощью Sharp до 600x600:

enter image description here

Как вы можете видеть, изображение ниже имеет более низкое качество. Почему?

Вот часть, которая изменяет размер моего изображения: 

let resizeData = await sharp(dir + path)
    .resize({ width: 600, height: 600 })
    .toBuffer();

fs.writeFileSync(dir + path, resizeData);

Я пропустил какие-то конфигурации? Можно ли сохранить качество?

1 Ответ

2 голосов
/ 05 мая 2020

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

В первом изображении артефакт размером 10x10 пикселей может оказаться меньше одного пикселя при его уменьшении. На втором изображении артефакт размером 10x10 пикселей гораздо более заметен, потому что на самом деле это 10x10 пикселей на вашем экране.

Глядя на документацию есть опция quality:

options.quality целое число 1-100 (необязательно, по умолчанию 80)

Вы можете попробовать установить качество 90 или даже 100, и это должно дать вам больший размер файла, но менее заметные артефакты сжатия.

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

...