Image with an SVG Placeholder

Question

Hi!
Please tell me how to set these parameters correctly. <img loading="lazy" class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3' %3E%3C/svg%3E" width="800" height="600" data-src="image.jpg" alt="Image">

The page has several sections with images of different formats.
viewBox='0 0 4 3' and viewBox='0 0 16 9' width="" height="" are not specified for these images.

Smooth Scrolling on the mobile version works as it should, but on the web it goes past the correct block. How can I fix this problem so that Smooth Scrolling stops on the right block both on the web version and on mobile? Would adding width="" height="" to each image fix this issue?

SemiColonWeb · Accepted Answer

Hello, The Placeholder SVG Image has a Aspect Ratio. You can change the Values according to your Image Dimensions and then set the Width/Height. This should also fix the issue with the Smooth Scroll. Else, you will need to activate repositioning of the Scroll Section Positions using JS, using the JS codes provided earlier. We checked out the JS Codes and it appears to be working for us. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.