SEO and explicit image size

I’m trying to optimise a website(s) and keep running into something that really puzzles me. Setting explicit image width and height. I realise that this is probably a bigger issue than just Modx . I just can’t get my head round how this would be possible on a responsive website. Any ideas?

Hi,

You can set the image size in the html, then override it using CSS

For example the following would still be responsive:

<img data-src="path to image.jpg" width="664" height="668" class=" lazyloaded" alt="your alt text" src="path to image.jpg">

.container img {
    width: 100%;
    height: auto;
max-width: 100%
}

Yes thank you that would work but is there a way to print the rendered image width and height either via phpthumb or somehow within Modx?

Realised that I can use &dims in phpThumb but because I’m using data-interchange from Foundation framework, it’s fouling up.

Well I didn’t think the following approach would give me a better page speed than using data-interchange but I achieved 95 on desktop and 91 on mobile (page speed insights)…
[[pthumb? &input=`[[*ImageRight]]` &options=`w=639` &toPlaceholder=`thumbSM`]] <img class="hide-for-medium" src="[[+thumbSM]]" width="[[+thumbSM.width]]" height="[[+thumbSM.height]]"> [[pthumb? &input=`[[*ImageRight]]` &options=`w=1023` &toPlaceholder=`thumbMD`]] <img class="show-for-medium hide-for-large" src="[[+thumbMD]]" width="[[+thumbMD.width]]" height="[[+thumbSM.height]]"> [[pthumb? &input=`[[*ImageRight]]` &options=`w=2696` &toPlaceholder=`thumbLG`]] <img class="show-for-large" src="[[+thumbLG]]" width="[[+thumbLG.width]]" height="[[+thumbLG.height]]">