What is the difference between an Image tag in NextJs and the regular img tag
The programming language used to create websites is HTML. It stands for HyperText Markup Language. It is the barebones of the website using which you cannot start off with Web Development. We visit hundreds of websites every day. One of the things we see in common in every website is an image. An image is used to express the text in a better way and helps the reader to understand the topic easily. We write HTML with the help of various tags. And to add an image, a specific tag is used. This tag is called the img tag. The basic syntax for adding an image is:
Note that normal img tags can be self closed or normally closed as well
The words src and alt are called attributes. Attributes of a tag are special words that control the tag's behavior. src means source. Source means the path of the URL from where the image is supposed to be rendered. Alt is the alternate text which is to be displayed when the image is not found at the particular place or the browser which is showing the website doesn't support images. In this scenario, we are showing an image named image_name.jpg and if the image is not found or the user does not have an image supported by the browser the alternate text which is This is an Image will be displayed.
Frameworks have become increasingly popular. One such framework is ReactJs. ReactJs uses JSX and converts it into HTML and renders it onto the page. Due to recent developments, a framework for React has arisen. This framework's name is NextJs. NextJs borrows all the features of React and adds its own powerful features making that framework incredibly useful and powerful at the same time. One such additional feature of NextJs is called server-side rendering or called SSR in short. Some frameworks which use SSR are NextJs and NuxtJs. This feature renders the code on the server and then passes it to the web browser instead of directly rendering it on the browser. One of the pros of this feature is, it renders everything correctly because it has already been rendered by the server. The specialty of SSR is, it renders a specific page when needed. Meaning that it doesn't render the whole app when it's first opened. For example, when I visit a website, SSR doesn't render the whole app when I go to the website. It just renders the home page only. And then I click on proceed to checkout option. After I click it, SSR renders the code for the checkout page on the spot and displays it. This means that it renders the page on the spot when it's requested by the user, hence leaving the unvisited pages of the user which saves a lot of loading time. NextJs also has another feature which is really useful. This feature is regarding image rendering. It has a tag for rendering Images. This tag is called the Image tag. But what is the role of this special tag here? As told before, SSR renders the page on the spot after it has been requested to the server by the client(the user). Meaning that even this Image tag takes some time to be rendered because the type of rendering is on the spot. Hence we see it loading part by part because it is not fully rendered yet. This type of loading is called Lazy Loading But why do you want Lazy Loaded Images? When normal img tag images are loaded, they take up a lot of bandwidth space because they have to be rendered all at once. But because the special Image tag images are loaded slowly, they take a lot of less bandwidth space. Now how much do a few MegaBytes matter to us? But imagine the number of bandwidth that is wasted in a site like Pinterest, which has millions of images. Hence in production builds or if you want to build a website that has many images, using the special Image tag helps out a lot. The syntax for the Image tag is
<Image src="image_name.jpg" alt="This is a Lazy Loaded Image" />