Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 1, 2021 at 10:25 pm #1308402
    joelnewcomer

    Hi! Google PageSpeed Insights penalizes me for image elements that do not have explicit width and height and for me that is a big problem on my Enfold website because that image element doesn’t output width and height data for SVGs because they are vector. What I’m requesting is a feature request to add a place in the Avia Layout Builder to manually enter height and width for SVG images. Thank you!!!

    Joel

    July 5, 2021 at 1:16 pm #1308777
    Ismael

    Hey joelnewcomer,

    Thank you for the inquiry.

    Have you tried to manually add the svg image using a text or code block? This way you will be able to define the width and height attribute of the svg image directly.

    Best regards,
    Ismael

    July 11, 2021 at 2:53 pm #1309578
    joelnewcomer

    Hi Ismael, that is what I have been doing but when they website has hundreds of SVGs it is extremely time-consuming and it makes future editing less intuitive.

    Joel

    July 13, 2021 at 10:57 am #1309909
    Ismael

    Hi,

    Are you using a plugin to allow svg images? WordPress does not have native support for svg images, which is why the theme does not have any option for it. And defining the width and height attribute will render the image unresponsive because the defined dimensions will persist regardless of the screen size.

    Best regards,
    Ismael

    July 13, 2021 at 4:25 pm #1309985
    joelnewcomer

    Hi Ismael, on this particular website I am using the Safe SVG plugin which has over 500,000 installs (https://wordpress.org/plugins/safe-svg/) but there is also the SVG Support plugin which has over 600,000 installs (https://wordpress.org/plugins/svg-support/). Defining the width and height attribute will not render the image unresponsive as it still respects max-width: 100%. PageSpeed Insights is penalizing our website because “Image elements do not have explicit width and height. Set an explicit width and height on image elements to reduce layout shifts and improve CLS.” https://web.dev/optimize-cls/#images-without-dimensions

    Thanks Ismael!

    July 19, 2021 at 5:48 am #1310679
    Ismael

    Hi,

    Even if we add a width and height option for the SVG images, it will still not work with the default Image element because the element’s markup is intended for bitmap and raster images (png, jpg, webp etc). If you already installed an svg plugin, you can upload SVG images through the Image element but it will not render properly in the front end because it does not contain the appropriate markup. You may need to create a custom element or shortcode that contains tags and markup for svg images.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.