Embedded objects are any external files, like images, videos, or any other graphic media, that are added on a page using HTML, so they appear as part of the code. For example, when you embed a YouTube video into your site, you will have to add a code block within your content that looks something like this:
This means that embedded objects already exist somewhere else and when you add them to your website, they are just imported into the HTML document. The benefit of this is that embedded objects retain their size and quality, unlike some pasted or inserted objects. Also, you can embed any external file, including text documents, maps, and any other such object using one of these tags – image tag, <img>, object tag <object>, video tag <iframe>, or the less common embed <embed> tag.
When to use the image tag vs object tag vs iframe tag
As the name states, <image> is used when embedding any kind of non-interactive image files, such as .png, .jpeg, or even a GIF while the iframe tag is especially useful for videos. However, when embedding an interactive file such as an SWF (flash-enabled files) or an interactive SVG, the <object> tag comes in handy. But, embedded objects using the <object> tags, including SVG files, are not seen as images, therefore not available on image search.
While this is expected from SWF files, some developers tend to try and “fix” SVGs by using both <object> and <img> tags. However, when we use both an object tag and an image tag, the browser has to load each of the tags, a process known as double loading. Basically, the browsers load the image twice, once as an object, and once as a non-interactive image. But, while only the interactive image is visible, and the static one is hidden, we are still stuck with two identical media elements. This increases the bandwidth and slows down the page loading speed, which can lead to bad user experience.
How to avoid double loading
The simplest solution, if you don’t care about your SVG’s interactivity is to simply just use the <img> tag instead, or <img src> and if you want to be extra careful, add a fallback error;
<img src=”your.svg” onerror=”this.src=’your.png'”>
This will force the browser to see the SVG as a PNG or rather a GIF instead and render your file as it would do any other such media element. This also means that if the browser supports declarative animations – which most modern browsers do – your image will act as a GIF. Another solution is to compress the double-loaded embedded objects using GZIP Compression.
So, if you have enabled GZIP compressions on your website, you can use this and compress your SVG files since SVGs are seen as objects and not images, and save up to 85% space. This will not stop the double loading, but it reduces the size of the double-loaded embedded objects considerably. And in turn, this leads to saving the bandwidth and an improved loading page speed.
Are embedded objects bad?
Media of all kinds is good for SEO and the overall user experience. Adding. a nice image inside text helps the user keep focus, a video helps them better understand an idea, or a story, and so on. However, large images, embedded videos, and double-loaded files will increase your bandwidth and slow down your site. So while these elements are not affecting the SEO directly, they do impact your page speed, and consequently your user experience. Naturally, bad user experience leads to a higher bounce rate, which in turn leads to a downvote from Google for you as an unreliable site.
Moreover, starting in 2021, embedded objects will directly impact your SEO, as Google will launch a new indexing factor called page experience. This includes everything and anything that makes for bad user experience, including a slow loading page or just slow loading media.
How to avoid embedded objects
There are several other issues with using embedded objects aside from UX and page speed. For one, you have no control over their livelihood. In other words, they also “live” somewhere else, which means that if they change source – i.e. the sysadmin of that source moves them to a different folder or simply changes their name – you lose your media. There is also a security risk with some embedded objects such as flash-enabled files or iframe tags, as they are interactive and can contain malware.
So, the best way to stir clear of all of these issues is to simply host the media on your own servers. While you may think you don’t have the time to create or upload the files manually, the little extra time you take using your own media will save you a lot of headaches in the long run.
