Reduced Size Image Is Blurry

[lbohen]

I reduced the size of an image on my homepage, to speed up loading, from 1920 px X 1021 px to 848 px X 451 px using Affinity Photo's Document Resize feature. Although the resulting reduced size image loads much faster, it is blurry when rendered on the front-end of my website.

I've attached the original 1920 X 1021 image and the reduced size 848 X 451 image.

How do I reduce the size of an image without it getting blurry?

[Pšenda]

1 hour ago, lbohen said:

How do I reduce the size of an image without it getting blurry?

 

I think that this is ruled out in principle - reducing the resolution always leads to a loss of detail and thus to a loss of sharpness.
If you want to keep the sharpness of the images while reducing them (file size), keep the original resolution and try to increase the compression ratio (JPEG quality). Although there will be a reduction in image quality, it may not be as critical/intrusive as when reducing the resolution - and at the same time it may have a greater effect on the file size.

[lbohen]

2 minutes ago, Pšenda said:

I think that this is ruled out in principle - reducing the resolution always leads to a loss of detail and thus to a loss of sharpness.
If you want to keep the sharpness of the images while reducing them (file size), keep the original resolution and try to increase the compression ratio (JPEG quality). Although there will be a reduction in image quality, it may not be as critical/intrusive as when reducing the resolution - and at the same time it may have a greater effect on the file size.

As far as I know, I was not reducing the resolution of the original PNG image. It was 72dpi to begin with. I simply made the image dimensions smaller.

[v_kyr]

Any image resizing (scale down/up) always benits from some afterwards applied slightly (re)sharpening!

[JimmyJack]

@lbohen

While it's true that any substantial reduction in pixel size will result in degradation, a different resample method will help loads.
Looks like you've used Bilinear resampling. Try Bicubic or the two Lanczos formats. Personally I think Lanczos Separable is the best.
And, use can also resize using one of those and then add an Unsharp mask filter if you want more (or something in-between).

Lanczos Sep & non Sep:

[ashf]

Use the Unsharp Mask. it's the best way.
 

 

[Sigurt]

Ich habe mich auch mit dem Thema beschäftigt, meine Einstellungen die ich für meine Webseiten Bilder benutze sind wie folgt.

Bildgröße reduzieren: Lanczos 3(trennbar)
Speicherformat JPEG (Höchste Qualität.
Ich reduziere meine Bilder von 5184x3456px nach 1200x800px.
Die Bilder sehen bei mir noch sehr gut aus.

[lbohen]

1 hour ago, Sigurt said:

Ich habe mich auch mit dem Thema beschäftigt, meine Einstellungen die ich für meine Webseiten Bilder benutze sind wie folgt.

Bildgröße reduzieren: Lanczos 3(trennbar)
Speicherformat JPEG (Höchste Qualität.
Ich reduziere meine Bilder von 5184x3456px nach 1200x800px.
Die Bilder sehen bei mir noch sehr gut aus.

English please.

[walt.farrell]

6 minutes ago, lbohen said:

English please.

You will find that in this forum, users communicate in many languages, and that is both allowed and encouraged by Serif. It's probably best to accept it, and to become familiar with some web-based translation services, such as:

• https://translate.google.com
• https://translate.yandex.com/
• https://www.deepl.com/translator

 

 

[Pšenda]

5 hours ago, lbohen said:

As far as I know, I was not reducing the resolution of the original PNG image.

https://en.wikipedia.org/wiki/Image_resolution

[Pšenda]

7 hours ago, lbohen said:

to speed up loading

For your interest - an image with the same resolution (i.e. 1920 x 1021 px), but saved as a JPEG, i.e. with a smaller file size (7x) and therefore with a significantly faster download.

Your original:

Compressed JPEG:

By optimizing the parameters (degree of compression vs image quality vs file size) plus possible sharpening, you can get the desired result, i.e. a small file without a noticeable reduction in quality.

P.S. In your case, reducing the image size only halved the file size, from 767904 Byte to 361511 Byte (compress JPEG is 111069 Byte).

Edited October 24, 2022 by Pšenda