Full image size in src attribute

[Slamik]

Hello,

Is it possible to configure rwd_attachment_image or $my_image_sizes array to display original image or the biggest one in src attribute? It's important for correct lazyload setup and SEO. Placeholders should be in srcset and original image in max resolution should be in src tag. More info you can get from this video https://youtu.be/F6KGcb6trXc?t=2428

[jc-vgermanov]

Hello, Slamik.

Thank you for the question. We strongly do not recommend using the original size of the picture therefore the size might be, for example, 3k pixels, 4k or bigger and it affected the website loading and rendering speed.

As some option to solve your issue you can add some 'extra-large' size to the configuration array with a high value: 'extra-large' => ( 9999, 9999, true ) This option will render the original picture size, but be careful with it.

[Slamik]

Hello Vitaly,

Thank you for your response!

We strongly do not recommend using the original size of the picture therefore the size might be, for example, 3k pixels, 4k or bigger and it affected the website loading and rendering speed. It is not a problem. Original image is resized after upload to appropriate dimensions.

Referencing to Google recommendations https://developers.google.com/search/docs/advanced/guidelines/google-images img src should link to max resolution. This image will be crawled by googlebot. User will load only image contained in srcset.

In modern SEO image size is ranking factor.

As I understand from code, src attribute takes the last element from configuration array, so I just need to put max size to the end of it. Right?

[jc-vgermanov]

Hi Slamik.

The 'image' tag src attribute selects the actual image size based on the current screen width from the 'picture' tag 'source' options. At the same time, the 'sources' contain the entire list of configured sizes.

Also, you could read this text about responsive images on the web -- https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

You can find a live example of the plugin on our website - https://justcoded.com/

All images on our website rendered by this plugin.

Hope I answered your question.

[Slamik]

Здравствуйте Виталий,

Давайте попробую донести мысль на русском.

С точки зрения SEO, в аттрибуте src должен быть самый большой размер. Если обратиться к гайдлайнам гугла, то For best results, provide multiple high-resolution images (minimum of 800,000 pixels when multiplying width and height) with one of the following aspect ratios: 16×9, 4×3, and 1×1.

У вас же получается картина следующая:

При сканировании документа гуглботом, он не будет смотреть на тег source, а будет использовать данные из img, а он в текущей реализации указывает на изображение самого маленького размера.

Это же правило и относится к ленивой загрузке. Большинство LazyLoad скриптов с точки зрения SEO работает не правильно и подменяет src аттрибут, хотя, достаточно подменить только значения source или srcset.

У вас в плагине этот порядок можно задать изменив декларацию размеров от меньшего к большему с помощью фильтра rwd_image_sizes. Единственное, что не разобрался, как сделать так, чтобы аттрибут src тега img указывал на источник: <img src="img.jpg">

Ваш плагин отличный и хорошо решает задачу генерации картинок. Большое спасибо вам за это. Он станет еще лучше, если будет делать это правильно с точки зрения технического SEO.