Add YouTube Video Links

Author: WebDevSimplified

src/pages/2023-05/lazy-load-images/index.mdx

@@ -17,6 +17,9 @@ import Tangent from "@blogComponents/lib/Tangent.astro"
 
 Lazy loading images is one of the easiest ways to speed up the load times of your site since the most basic form of lazy loading only requires one line of code. However, there are a few advanced techniques you can use to make your lazy loading look just like the image above with blurred placeholders and a smooth transition from the placeholder to the full image. In this article I will be covering everything you need to know about lazy loading as well as how to create this advanced lazy loading effect.
 
+_If you prefer to learn visually, check out the video version of this article._
+`youtube: hJ7Rg1821Q0`
+
 ## What Is Lazy Loading?
 
 Lazy loading is a technique used to defer the loading of an asset until it is needed. In the case of images, this means that the image will not be downloaded until the user scrolls to the point where the image is visible on the screen. This is a great way to speed up your site since you are only downloading the images that the user will actually see. This is especially useful for sites with a lot of images since you can save a lot of bandwidth by only downloading the images that the user will actually see.

src/pages/2023-05/responsive-images/index.mdx

@@ -12,6 +12,9 @@ Making sure your images look good on all screen sizes is a difficult task since
 
 The solution to this problem is to use responsive images. Responsive images are images that are optimized for the user's screen size. This means that the image will be downloaded at the correct size and quality for the user's device. This will significantly reduce the amount of data that is transferred to the user and will speed up your page load times. There are many ways to implement responsive images, from simple to complex, and in this article I will be showing you all the ways you can render responsive images on your website.
 
+_If you prefer to learn visually, check out the video version of this article._
+`youtube: fp9eVtkQ4EA`
+
 ## `img` `srcset` Attribute
 
 By far the easiest way to implement responsive images is to use the `srcset` attribute on the `img` tag. This attribute allows you to define multiple different sized images and the browser will then automatically choose the image that best fits the user's screen size.