picture_hestiaUI Should Guide User to Use Explicit Width and Height

[corygalyna]

Description

Please provide a short description of what you have encountered below.

On https://hestia.zoralab.com/en/docs/hestiaui/picture_hestiaui/, picture_hestiaUI should guide user to use explicit width and height properties as encouraged by Google Chrome team. This improves page rendering performance.

Link

Please provide the documentation link(s) below.

https://hestia.zoralab.com/en/docs/hestiaui/picture_hestiaui/

Expected Presentation

Please specify the expected presentation of the documentation.

Guide should be:

<picture>
    <source srcset="... 1x,
            ... 2x,
            ... 3x"
        type="image/..."
        width="1200" height="630"
        media"(max-width: ...)">
    <img alt="..." src="..."
        width="1200" height="630"
        loading="lazy"/>
</picture>

Current Presentation

Please specify the current presentation of the documentation.

Guide is:

<picture>
    <source srcset="... 1x,
            ... 2x,
            ... 3x"
        type="image/..."
        media"(max-width: ...)">
    <img alt="..." src="..."
        width="1200" height="630"
        loading="lazy"/>
</picture>

Attachment

Please drag and drop the necessary data files (e.g. screenshot, logs, etc)
below.

[hollowaykeanho]

Accepted.

[hollowaykeanho]

Done in 24dd68cd86ed1a58eac1e12c5d1adcb74a52f671

Also include modern format fallback guide.

[hollowaykeanho]

Released in https://github.com/ZORALab/Hestia/releases/tag/v1.0.0