Image srcset quality

The CMS Questions
1

Hi!

I have the following scenario:

On a website, images are being resized from width = Xpx to width = 1655px, because the uploaded images might have different widths higher than 1655px (never less than 1655px). The code for that is:
$image->resize(1655)->url()

The quality is quite bad compared to the original image if the original image initially has 1655px as well. I tried to set the quality in the config.php to 100 with no luck (I guess it’s for thumbs only).

I tried using:
$image->resize(1655, null, 100)->url()
Weirdly, it’s a bit better then, but compared to the original, still quite bad. (But shouldn’t this be the same as setting the quality to 100 in the config.php?)

Also, if I’m using the built-in srcset width 1655 as max size, the quality seems to be the same as if I’m resizing it manually using $image->resize(1655)->url().

I emptied the media folder of course and tried using the other driver, with no luck. I’m using the latest PHP.

The website is heavily relying on images. Am I missing something?

Thx

18
30
37

2

I’d only call the resize on images that are larger than 1655 pixels. If I get you right that this only affects images that are originally the same size as the resize value, but doesn’t affect bigger images.

3

Hi, all images larger than 1655px should be resized to 1655px. Even if I’m using
$image->resize(1654)->url() on a 1655px image, the image quality then is just quite bad (see screenshots). Shouldn’t the image quality be better than in the screenshots? I mean, it’s just a one pixel difference.

OR

This problem also affects the built-in srcset: If I’m putting 1655px as the largest value (config.php), the srcset is of course generating another image width a 1655px width (same as original).

So, if I’m using the original 1655px image for the src attribute, the generated 1655px srcset image will have a lower quality than the original src image, which defies the use of srcset for larger screens.

4

Could you provide an example image through a download service?

5

ANOTHER NOTE, sry:

In some browsers (Safari), if the filenames in the srcset attribute are different then the filename in the src attribute, also the src file will get downloaded.
So if I’m using the original filename “image-1655x” as the src attribute, the srcset filename will be “image-1655x-1655x”. Then the browser will download both.

So in order to have the original 1655px image in the srcset, I can’t use the built-in srcset, because it’ll generate a new 1655px image for the srcset, which then has a lower quality than the original (which has the same size).

6

This would be the original: https://we.tl/t-tVSSlkzwS3, I rendered a PNG, it’s a JPG though (same exact quality).

7

Have to check that later.

Which driver are you using?

1 Like
8

gd

9

Hm, the resulting image is always smaller in file size although it keeps the dimensions. But I haven’t been able to find out what is causing I also tried with both GD and IM drivers but the result is the same. Maybe create an issue on GitHub?

10

But doesn’t that mean, that the built-in srcset function is kind of redundant if you want to have sharp high-res pictures?

I found this in SimpleImage, but it doesn’t seem to do anything using srcset:

//If the dimensions are the same, there's no need to resize
if($this->getWidth() === $width && $this->getHeight() === $height) { return $this; }

11

The if statement you posted above is respected, so something seems to get stripped before the image is returned.

I don’t have a solution for you, apart from resizing based on an if statement and a custom srcset method that skips resizing if the image is smaller.

12

The built-in srcet shouldn’t skip resizing to smaller images but to images that have the same size as the highest srcset value.

Isn’t the built-in srcset kind of useless if it creates the images – for example – 500px, 1000px, 1500px but the original of 1500px has a better quality than the generated 1500px one?

I think that should be mentioned in the reference.

13

That’s what I meant, yes.

1 Like
14

I don’t see any sense in resizing images that are the same size as the resize target, unless you want to compress as well. The default quality is set to 90 (so in that case, it makes sense if the image goes through the thumb process), but if you set it to 100, the image should be returned as is.

15

That’s exactly the conundrum. Let me explain again a bit.

If I use the built-in srcset, it generates images say, at 500, 1000, 1500px. The 1500px generated one has a lower quality than the original 1500px one. For unknown reasons as stated at the very top – it’s not being resized but compressed anyways.

If the original image has the filename “example.jpg” The built-in srcset is generating filenames like “example-500x.jpg”, “example-1000x.jpg”, “example-1500x.jpg”.

But, so that browsers don’t download the src AND the srcset image, the src image has to have the same filename as the largest srcset image. That would be “example-1500x.jpg”.

BUT if I rename the original to "“example-1500x.jpg”, the generated images have the filenames "“example-1500x-1500x.jpg” (double size notation). And therefore, both images are downloaded again.

16

Yes, I understand that. But as I suggested above, please create an issue on GitHub, because all I can offer here are workarounds. I can’t change the code for you :wink:

1 Like
17

:smiley: But I think the built-in srcset should be removed from the reference then, because it’s not working as a srcset properly.