“Add Missing Sizes” also to SVG images

  • Resolved Christian

    (@dietlin)


    1 year ago

    I would like to optimize my website speed. Google Lighthouse complains that I didn’t specify the width and height of my SVG images. This leads to a Cumulative Layout Shift, which I want to avoid. The LSCWP only adds this necessary information to JPG and PNG images, why not also to SVG images? Do you recommend using PNG images instead of SVG images for optimal speed?

    Report number: OQZZNWXE

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • supervisior

    (@supervisior)

    .svg is not an image type, it’s document. Therefore the html code for using .svg “images” is wrong and not a valid html code.

    Thread Starter Christian

    (@dietlin)

    I appreciate your swift response. I just wanted to clarify whether using .svg “images” in HTML is considered invalid code. It’s a bit confusing for me because, according to my research, it seems that using SVG in the HTML img element has been valid for quite some time, supported by browsers like IE9, FF4, Edge12, and Chrome28. You can check the compatibility at https://caniuse.com/svg-img. So I will choose PNG instead of SVG.

    supervisior

    (@supervisior)

    It’s not about whether .svg is supported by browsers. It’s about which HTML code you have to use in order to be able to use .svg “images” validly. .svg does not use the tag. You can find the correct code for this in the relevant sources for HTML.

    Plugin Support qtwrk

    (@qtwrk)

    because when you view the source code of SVG, you will see something like this view-source:https://www.studio-d.ch/wp-content/uploads/2023/10/business-icon-40.svg

    it’s like a language to describe how image should display , it’s a text file.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘“Add Missing Sizes” also to SVG images’ is closed to new replies.

Tags