Images Optimization: decoding attribute

Nour Wael — Thu, 11 Apr 2024 12:45:17 +0000

When you are programmatically optimizing images on your website, the decoding attribute can be a helpful tool, depending on your use case, in addition to other optimization techniques.

Simply, you add this attribute to the image and it can have 3 values:

decoding="sync" :
When the website loads, the main thread loads everything in order. When it encounters the image, it waits for the image to load and decode before continuing. This can be useful if images are essential to your use case, and it is better to wait for them to load. However, this will result in a longer loading time.
decoding="async" :
In this case, the main thread loads the image, but then continues to load the rest of the page and displays it. The image is displayed later, when it has loaded. This is suitable if images are not essential and will make the page load faster. However, it can cause layout shifting, which can affect your CLS performance metric. Therefore, if you know the dimensions of the image, it is a good idea to leave a blank space or skeleton for the image until it loads.
decoding="auto" :
Here, the browser is left to choose one of the other two options. This varies from browser to browser and is the default option if you do not specify it.

Next.js Intercepting Routes 101

Nour Wael — Wed, 10 Apr 2024 18:31:57 +0000

Recently, I was working on a side project where I encountered a problem that piqued my interest.

I wanted to create a modal with the same content as the authentication page without opening the page itself and displaying it inside the home page when I clicked on the sign-in button.

This is where I came across Intercepting Routes in Next.js 14.

In short, it does what I wanted it to do. It helps you display specific content that is normally under a different route, and when you refresh, it takes you to the route of the displayed content and loads its page.

The syntax may seem a bit strange, but it is as follows (the example I will explain is in the images):

Create a folder prefixed with @, which we call a slot. Like dynamic routes, the slot does not appear in the params.

Here, to display the content of the page under the sign-in route, I create a folder prefixed with (.) and named the route with the same name as the targeted route. Under the folder, you create your UI as usual and call the same functionality to perform the same task.

Finally, you create a default file to act as a fallback if the route does not exist or if an error occurs.

DEV Community: Nour Wael

Images Optimization: decoding attribute

Next.js Intercepting Routes 101