Image compression is very aggressive – is there a way to control?

[simonhrogers]

There’s quite substantial loss of quality using this plugin, which I’m sure suits some needs perfectly but it would be great if the quality could be user-controlled.

I want to use this for an image-heavy portfolio site but the quality lost is very noticeable and ideally I would be able to fine-tune the compromises made.

[simonhrogers]

I cann see that I can create a macro to do this like so:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
    resize: function (width, height, quality, gravity = 'Center') {
        return [`gravity|${gravity}`, `resize|${width}|${height}^`, `extent|${width}|${height}|+0|+${height / 2}`, `quality|${quality}`];
    }
};
//# sourceMappingURL=macros.js.map

what is the correct process / setup for using this new macro with your module? – do I make a fork of your repo and use that in my project instead?

[Barry-Fisher]

Hi Simon,

Thanks for your feedback.

There's not currently a way to define your own macros. This is a good point and it shouldn't take much to add this support.

However, I suspect the image quality issues you're experiencing are down to imagemagick's (or graphicsmagick) default quality settings, rather than this plugin.

In your image style you can define any number or parameters to send to imagemagick for processing.

Have you tried adding a quality|100 to your image style? More info on the imagemagick docs about the quality argument: https://imagemagick.org/script/command-line-options.php#quality
Quality and filesize are a trade off so you'll probably want to find a happy medium so that the images are crisp and clear of compression artefacts, but not huge so as to be friendly to your website visitors.

Remember to clear out any existing (cached) copied of the generated images and try re-comiling nuxt with this new value.

I'll be interested to hear how you get on.

Thanks,

Barry

[simonhrogers]

Hey Barry,

Thanks so much for getting back to me so quick!

Sorry for not making clear in my second comment – I got this macro working perfectly thanks, in addition to the code I provided above, I was aware to clear the static/image-files folder and supple the quality argument like so in nuxt.config.js:

        600: { macros: ['resize|600|400|80'] },
        900: { macros: ['resize|900|600|80'] },
        1200: { macros: ['resize|1200|800|80'] },
        1500: { macros: ['resize|1500|1000|80'] },
        1800: { macros: ['resize|1800|1200|80'] },
        2100: { macros: ['resize|2100|1400|80'] },
        2400: { macros: ['resize|2400|1600|80'] },
        2700: { macros: ['resize|2700|1800|80'] },
        3000: { macros: ['resize|3000|2000|80'] },

Yeah the ability to define your own macros would be fantastic!

Thanks again,

Simon

[stuible]

I second this issue, no matter what settings I change, the images that are scaled are very blurry even when viewed at their native resolution.