Images for Search Engines and better resolutions

[paubou]

Not sure it fits under the issues from the plugin more like a support question.
I have some issues regarding the indexation on search engines.
So far, from what I understood, Google and search engines are targeting the src element — but by default, the plugin applies the smallest generated thumb in the config to that src. Perhaps the plugin uses the width attribute to determine the appropriate src, or vice versa. I can’t seem to configure it properly so that it matches the actual size of the image on the page, even with the correct size configuration.

  img {
    width: 1200px;
    height: auto;
    display: block;
    height: max-content;
  }

<?php
$options = [
  'image' => $image,
  'imgAttributes' => [
    'shared' => [
      'class' => 'my-image',
      'decoding' => 'async',
      'sizes' => '(max-width: 749px) calc(100vw), calc(100vw)',
    ],
  ],
  'srcsetName' => 'my-srcset',
  'critical' => false,
];
?>
<?php snippet('imagex-picture', $options) ?>

The generated picture element and most specifically, the img is :

<img 
class="my-image" 
src="http://localhost:8005/media/pages/projects/ping-editions/5d0320b8be-1756990938/ping_ping_10-400x300-crop-q80.jpg" 
decoding="async" 
height="300" 
sizes="1200px" 
width="400" 
srcset="http://localhost:8005/media/pages/projects/ping-editions/5d0320b8be-1756990938/ping_ping_10-400x300-crop-q80.jpg 400w, http://localhost:8005/media/pages/projects/ping-editions/5d0320b8be-1756990938/ping_ping_10-800x600-crop-q80.jpg 640w, http://localhost:8005/media/pages/projects/ping-editions/5d0320b8be-1756990938/ping_ping_10-1360x1020-crop-q80.jpg 1360w, http://localhost:8005/media/pages/projects/ping-editions/5d0320b8be-1756990938/ping_ping_10-1900x1425-crop-q80.jpg 1900w" src="http://localhost:8005/media/pages/projects/ping-editions/5d0320b8be-1756990938/ping_ping_10-400x300-crop-q80.jpg">

As seen, the width of the image in the src is 400px. Is the smallest generated thumb in my config.php;
The solution I found is to generate only a good resolution thumb for jpeg :

 'thumbs' => [
        'driver' => 'im',
        'srcsets' => [
            'my-srcset' => [ // preset for jpeg and png
                //‘400w'  => ['width' =>  400, 'crop' => true, 'quality' => 80],
                //‘640w'  => ['width' =>  800, 'crop' => true, 'quality' => 80],
                //‘1360w' => ['width' => 1360, 'crop' => true, 'quality' => 80],
                '1900w' => ['width' => 1900, 'quality' => 80],
            ],
            'my-srcset-webp' => [ // preset for webp
                '400w'  => ['width' =>  400, 'quality' => 75, 'format' => 'avif', 'sharpen' => 25],
                '640w'  => ['width' =>  640, 'quality' => 85, 'format' => 'webp', 'sharpen' => 10],
                '960w'  => ['width' =>  960, 'quality' => 85, 'format' => 'webp', 'sharpen' => 10],
                '1360w' => ['width' => 1360, 'quality' => 85, 'format' => 'webp', 'sharpen' => 10],
                '1900w' => ['width' => 1900, 'quality' => 85, 'format' => 'webp', 'sharpen' => 10],
            ],
            'my-srcset-avif' => [ // preset for avif
                '400w'  => ['width' =>  400, 'quality' => 75, 'format' => 'avif', 'sharpen' => 25],
                '640w'  => ['width' =>  640, 'quality' => 75, 'format' => 'avif', 'sharpen' => 25],
                '960w'  => ['width' =>  960, 'quality' => 75, 'format' => 'avif', 'sharpen' => 25],
                '1360w' => ['width' => 1360, 'quality' => 75, 'format' => 'avif', 'sharpen' => 25],
                '1900w' => ['width' => 1900, 'quality' => 75, 'format' => 'avif', 'sharpen' => 25],
            ],
        ],
    ],

I suspect that the width=400px is why the src ends up pointing to the 400px thumbnail and setting this one for the src. But I might be wrong.

Is there something I’m not understanding there? Is generating only a high resolution thumb for jpeg a good practice? Also, is there a way to set up the width of the img to fit the proper image?

The idea in the end would be to send a properly sized image to search engines.

[timnarr]

Thank you @paubou. I'll have a look at this :)

[timnarr]

Okay I had a first look and yes, the first size in the srcset-config is used for the src attribute, which is the 400px in your example here. That's why 400px is also used in the width attribute and height is calculated based on the used image ratio.

I'm now thinking about how we can best solve this. How good is good enough in terms of quality? You would probably have to be able to set this independently of the srcset-config, don't you think?

So maybe something like this to overwrite src:

'imgAttributes' => [
    'shared' => [
      'src' => ['width' => 1200, 'crop' => true, 'quality' => 80],
    ],

Or directly using the thumb method and returning the final URL:

'imgAttributes' => [
    'shared' => [
      'src' => $image->thumb(['width' => 1200, 'crop' => true, 'quality' => 80])->url(),
    ],

What do you think @paubou ? :)

[paubou]

Hey Tim,
Thanks for taking the time to investigate.
Replacing the default src is the first thing that crossed my mind my the plugin doesn’t allow to set another one...

[kirby-imagex] Disallowed attributes detected: attribute "src" in "shared".

But maybe we should be able to set another src as it would also help with custom blurry placeholders.

Let me know!

[timnarr]

Yes, as you said, that would open up even more possibilities, like custom placeholders. I think this is a good approach and allows more flexibility and custom solutions. I'll implement it 👍

[timnarr]

Hey @paubou, could you please test the current beta composer require timnarr/kirby-imagex:0.2.0-beta.3

You should now be able to do something like this:

'imgAttributes' => [
    'shared' => [
        'src' => $image->thumb(['width' => 1200, 'height' => 1200, 'crop' => true])->url(),
    ]
]

In general, you can now define/override all attributes, including those for eager or lazy loading mode. If you want to remove a default attribute without setting a custom value, you can set it to null or false, which will remove it:

'imgAttributes' => [
    'shared' => [
        'src' => $image->thumb(['width' => 1200, 'height' => 1200, 'crop' => true])->url(),
    'lazy' => [
        'data-src' => null,
        'srcset' => 'custom-300.jpg 300w, custom-600.jpg 600w, custom-900.jpg 900w',
	'class' => ['u-lazyload', 'js-image'],
    ],
]