DEV Community: MELVIN GEORGE

Use margin-inline-start CSS property instead of margin-left for better internationalization

MELVIN GEORGE — Mon, 12 Dec 2022 05:39:38 +0000

Originally posted here!
On the world wide web (www) or the internet, we have our website visited by people from different countries and languages. Some of the languages are read from left to right (like English), and some from right to left (like Arabic). So when the direction of the language gets changed it is good for the website layout to change accordingly as well as a good user experience so that the website doesn't look bad.

To accommodate for the language intricacies, we have to make the website layout responsive in every language and its reading direction.

TL;DR

<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box">Hello World</div>
  </body>
  <!-- Style for the red color box -->
  <!--
    Adding a 30px margin to the start of the box 
    using an internationalization property
  -->
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-inline-start: 30px;
    }
  </style>
</html>

For example, suppose we have a layout with a red background color box that has a text called Hello World like this,

The HTML code will look like this,

<html lang="en" dir="ltr">
  <body>
    <div class="box">Hello World</div>
  </body>
  <!-- Style for the red color box -->
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>

Now let's add a left margin of 30px like this,

<html lang="en" dir="ltr">
  <body>
    <div class="box">Hello World</div>
  </body>
  <!-- Style for the red color box -->
  <!-- Adding a 30px left margin to the box -->
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-left: 30px;
    }
  </style>
</html>

Now the webpage looks like this,

Have you noticed the dir="ltr" attribute on the main html tag in our HTML code? This refers to the language direction of the content on the webpage. the dir refers to the direction and the value ltr refers that the direction of the language from left to right (ltr). This is the default for languages like English. Now let's change the dir attribute's value to rtl which refers that the direction of the language from right to left.

It can be done like this,

<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box">Hello World</div>
  </body>
  <!-- Style for the red color box -->
  <!-- Adding a 30px left margin to the box -->
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-left: 30px;
    }
  </style>
</html>

As you can see that after changing the dir attribute's value from ltr to rtl, the whole box with the text is now shifted to the right side since the language direction is now changed.

Have you noticed something weird here?

You may have guessed that the margin-left of 30px is applied but is not taking effect to its right side after we changed the dir attribute. Well, we can't blame the browser since we have defined it specifically to be applied to the left side of the box. We now have a weird-looking website. This is huge and will break the website layout if our layout is more complex and large.

To accommodate for this problem of not switching the left margin when we change the language direction, we now have an internationalized version of the margin-left property which is the margin-inline-start.

Let's change replace the margin-left property with the new property of margin-inline-start in our HTML code like this,

<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box">Hello World</div>
  </body>
  <!-- Style for the red color box -->
  <!--
    Adding a 30px margin to the start of the box 
    using an internationalization property
  -->
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-inline-start: 30px;
    }
  </style>
</html>

The webpage now looks like this,

As you can see that the 30px margin is now applied to its right side and the layout is now correct automatically by changing the direction of the language.

We have successfully made our webpage layout look good using internationalization standards.

See the above code live in codesandbox.

That's all 😃!

Use margin-inline-end CSS property instead of margin-right for better internationalization support

MELVIN GEORGE — Mon, 12 Dec 2022 05:39:08 +0000

To accommodate for the language intricacies, we have to make the website layout responsive in every language and its reading direction.

TL;DR

<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!--
    Using `margin-inline-end` instead of `margin-right` 
    for better internationalization
  -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-inline-end: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>

For example, suppose we have a layout with two red background color boxes side by side that has the text called Hello World 1 on the first box and Hello World 2 on the second box like this,

The HTML code will look like this,

<html lang="en" dir="ltr">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>

Now let's add a right margin of 30px to the first box like this,

<html lang="en" dir="ltr">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!-- Adding 30px right margin to the first box -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-right: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>

Now the webpage looks like this,

Have you noticed the dir="ltr" attribute on the main html tag in our HTML code? This refers to the language direction of the content on the webpage. The dir refers to the direction and the value ltr refers that the direction of the language from left to right (ltr). This is the default for languages like English. Now let's change the dir attribute's value to rtl which refers that the direction of the language from right to left.

It can be done like this,

<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!-- Adding 30px right margin to the first box -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-right: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>

As you can see that after changing the dir attribute's value from ltr to rtl, the whole box with the text is now shifted to the right side since the language direction is now changed.

Have you noticed something weird here?

You may have guessed that the margin-right of 30px is applied but is not taking effect between the boxes like we needed after we changed the dir attribute.

Well, we can't blame the browser since we have defined it specifically to be applied to the right side of the box, and it is getting applied to the right side of the last box. (Since the direction is now from right to left, the first box on the end of the screen) Because of this, we now have a weird-looking website. This is huge and will break the website layout if our layout is more complex and large.

To accommodate for this problem of not switching the right margin when we change the language direction, we now have an internationalized version of the margin-right property which is the margin-inline-end.

Let's replace the margin-right property in the box-1 box class name with the new property of margin-inline-end in our HTML code like this,

<!-- Changing language direction to `rtl`  -->
<html lang="en" dir="rtl">
  <body>
    <div class="box-1">Hello World 1</div>
    <div class="box-2">Hello World 2</div>
  </body>
  <!-- Style for the red color box -->
  <!--
    Using `margin-inline-end` instead of `margin-right` 
    for better internationalization
  -->
  <style>
    .box-1 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
      margin-inline-end: 30px;
    }

    .box-2 {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: red;
      color: white;
    }
  </style>
</html>

The webpage now looks like this,

As you can see that the 30px margin is now applied to its left side and the layout is now automatically corrected by changing the direction of the language. This will make our website more responsive and internationalized when the dir changes from ltr or rtl.

We have successfully made our webpage layout look good using internationalization standards.

See the above code live in codesandbox.

That's all 😃!

How to make HTML elements in horizontal order that is responsive to the screens using CSS?

MELVIN GEORGE — Mon, 12 Dec 2022 05:38:38 +0000

Originally posted here!
To make HTML elements in horizontal order or row-wise that are responsive to the screens, we can use the CSS display property and set its value to flex, then we can use the property flex-direction and set its value to row, and finally, we can use the flex-wrap property and set its value to wrap. These values should be applied to the parent element of the children elements where you want this to take place.

For example, let's say we have three red color boxes with 200 * 200 dimensions (width * height).

The HTML code would look something like this,

<html>
  <body>
    <!-- Three `red` color boxes -->
    <div>
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>

    <!-- Styles for the boxes -->
    <!--
      `margin` of `2px` is applied to
      make some gap within the elements
    -->
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 2px;
      }
    </style>
  </body>
</html>

The webpage now looks like this,

As you can see that we have defined three red background colors div and applied a width of 200px and a height of 200px. If you look closely, you can also see a parent div that is enclosing all these boxes. This is where we have to apply the CSS properties to make it horizontal order or row-wise.

Let's add a class of parent to the parent div element and apply the display: flex;, flex-direction: row; and the flex-wrap: wrap; properties to it.

It can be done like this,

<html>
  <body>
    <!-- Three `red` color boxes -->
    <!-- 
      add a class name of `parent` to the parent
      `div` to apply styles to it.
    -->
    <div class="parent">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>

    <!-- Styles for the boxes -->
    <!--
      `margin` of `2px` is applied to
      make some gap within the elements
    -->
    <!--
      adding `display: flex`, `flex-direction: row`
      and `flex-wrap: wrap` property to make it in horizontal order.
    -->
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 2px;
      }

      .parent {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
    </style>
  </body>
</html>

Now the webpage looks like this,

Now let's understand what just happened. The display: flex; property sets the parent div element into a flexbox container, and the flex-direction: row property made the div take up the entire available width of the screen by making the elements flow in the row direction and finally the flex-wrap: wrap; property allows the three red color boxes to go into the second line if the available width is too low.

The flex-wrap: wrap property made the three boxes to be responsive to the screen.

A visual representation of the webpage is shown below,

We have successfully made the 3 boxes flow in the horizontal direction as well as making them responsive. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.

How to make font size grow according to the size of the screen using CSS?

MELVIN GEORGE — Mon, 12 Dec 2022 05:38:08 +0000

Originally posted here!
To make the font size grow according to the width of the screen, the better way is to use the clamp() CSS function and pass the minimum font size value, the preferred font size value and finally the maximum font size value it should take according to the width of the screen.

The clamp() CSS function accepts three arguments such as:

the first argument is the minimum value to stop resizing the font size if it is equal to or below a supplied font-size value.
the second argument is the rate at which the font size should grow according to the screen size.
the third argument is the maximum value to stop resizing the font size if it is equal to or above a supplied font-size value.

NOTE: clamp() CSS function is not only reserved for the font-size property and can be used in various other properties too. The above explanation is to understand its usage of it concerning the font-size CSS property

TL;DR

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <!--
    Add `0.75rem` with `2vw` as the second 
    argument to the `clamp()` CSS function
    - add a minimum value as the first argument
    - add a maximum value as the third argument
  -->
  <style>
    p {
      font-size: clamp(1rem, 2vw + 0.75rem, 1.5rem);
    }
  </style>
</html>

For example, let's say we have a text called Hello World on the webpage. The HTML for that would look something like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

To grow the font size of the paragraph tag text at a rate of 1% to the width of the screen, we can use the 2vw unit in CSS.

NOTE: 1vw unit refers to 1%of the width of the screen.

To do that let's define our font-size CSS property and then use the 2vw the like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <style>
    p {
      font-size: 2vw;
    }
  </style>
</html>

Now there are 2 problems with this approach:

one is the font size won't increase if the user tries to magnify the webpage, because the font size property is tied to the view width or the width of the screen only.
the second one is if the width of the screen is too low, the font size becomes too small to read and if the screen becomes too big it becomes really large also.

Visually the webpage looks like this,

To avoid this problem, let's first tie the font size unit with the relative root font-size value of the webpage, in our case we will be using 0.75rem. The 0.75rem means 0.75 * 16px (In our case, 16px is the default font size of the root element).

So let's add the 0.75rem unit with the 2vw using the clamp() CSS function and pass this value as the second argument to the function.

It can be done like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <!--
    Add `0.75rem` with `2vw` as the second
    argument to the `clamp()` CSS function
  -->
  <style>
    p {
      font-size: clamp(0, 2vw + 0.75rem, 0);
    }
  </style>
</html>

Now when the user magnifies the webpage, the font size increases.

It looks like this,

Now the only problem is that we need to set a minimum font size till it should decrease and a maximum value the font size should increase and then stops. Otherwise, it will keep on increasing or decreasing as the screen keeps on getting smaller or bigger.

To do that we need to pass the minimum font size and the maximum font size as the first and third arguments to the clamp() size CSS function.

Let's pass the value of 1rem as the minimum value and 1.5rem as the maximum value.

It can be done like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Style for fonts -->
  <!--
    Add `0.75rem` with `2vw` as the second 
    argument to the `clamp()` CSS function
    - add a minimum value as the first argument
    - add a maximum value as the third argument
  -->
  <style>
    p {
      font-size: clamp(1rem, 2vw + 0.75rem, 1.5rem);
    }
  </style>
</html>

Now the webpage has a minimum and maximum font size it can scale to.

The webpage text now scales like this when screen size increases or decreases,

We have successfully made the font size grow according to screen size. Yay 🥳!

See the above code live in codesandbox.

That's all 😃.

How to limit the number of characters on a single line in a webpage using CSS?

MELVIN GEORGE — Mon, 12 Dec 2022 05:37:38 +0000

Originally posted here!
To limit the number of characters that should be on a line on the webpage, you can use the max-inline-size CSS property on the HTML elements that wrap the texts and use a numeric value with the ch unit (ch refers to the number of characters).

TL;DR

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Adding `max-inline-size: 66ch` CSS property 
    to limit the characters of a single line to 66.
  -->
  <style>
    article {
      max-inline-size: 66ch;
      font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
      margin: 20px auto;
    }
  </style>
</html>

For example, let's say we have a webpage with some paragraphs of text inside an article HTML element.

The HTML code would look something like this,

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
</html>

Now if we see this without any styles, the text would go to the very edge of the screen like this,

This is not looking any good and very hard for the users to read the texts.

So to limit the paragraphs texts we can use the max-inline-size property and give a value of 66ch.

The 66ch value refers to limiting the characters in a single line to 66 characters.
The max-inline-size property is the new internationalized version of the max-width property. The max-inline-size property helps to automatically correct the width according to the writing direction of a particular language.

It can be done like this,

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Adding `max-inline-size: 66ch` CSS property 
    to limit the characters of a single line to 66.
  -->
  <style>
    article {
      max-inline-size: 66ch;
    }
  </style>
</html>

After adding the max-inline-size: 66ch CSS property, the webpage now looks like this,

Let's also add some CSS styles to center the texts and to make them grow according to the size of the screen.

It can be done like this,

<html>
  <body>
    <!-- Sample Paragraphs -->
    <article>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
        dolorem iste accusantium, architecto labore nobis pariatur, ipsa, magni
        incidunt amet at? Ab nihil voluptas mollitia culpa quidem tempora
        explicabo temporibus non? Assumenda labore tempore rerum voluptatibus
        laudantium et facere sed exercitationem nisi culpa dicta perspiciatis
        atque dolorum, aperiam soluta. Consectetur optio inventore eius ullam,
        dignissimos officiis mollitia dicta, error possimus consequatur quasi
        laborum harum nulla.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        laboriosam voluptatibus. Modi id aliquid sit ullam cupiditate aperiam
        nihil dolorem quas fuga omnis eos obcaecati ipsam corrupti voluptatibus
        officiis labore, ipsa consequuntur consequatur numquam facere sequi eius
        quidem. Id accusantium, neque velit animi excepturi saepe explicabo
        consectetur debitis cum voluptate dolorem hic odio nostrum earum
        doloribus, ipsam voluptatem! Libero ipsa ullam officiis odit aliquam
        iusto facilis? Aut!
      </p>
    </article>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Adding `max-inline-size: 66ch` CSS property 
    to limit the characters of a single line to 66.
  -->
  <style>
    article {
      max-inline-size: 66ch;
      font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
      margin: 20px auto;
    }
  </style>
</html>

NOTE: To know more about making texts responsive see the blog on How to make font size grow according to the size of the screen using CSS?

We have successfully limited the characters to 66 in a single line using CSS. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.

How to load custom fonts into a webpage using CSS?

MELVIN GEORGE — Mon, 12 Dec 2022 05:37:08 +0000

Originally posted here!
To load custom fonts or fonts that are hosted by yourself in a server using CSS first, you need to use the @font-face CSS rule block. Inside the block you can then define a CSS property called src and the first value is a url() function where the function takes the path to your font file. Then right after the url() function you can add another function called format() in which you can pass the value of woff2. (woff2 is a well-supported font type format and has the best performance gain among the browsers).

After the src property, you need to add another property called font-family and the value should be the name of your font. You can have a custom name for your font file.

TL;DR

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
      font-family: MyCustomFontName;
    }

    body {
      font-family: MyCustomFontName;
    }
  </style>
</html>

For example, let's say we have a webpage with the text Hello World.

The HTML code would look something like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

It may look like this visually,

Now let's say we need the texts in the webpage to use our custom font file that is hosted in the root directory of the server where the index.html is also present.

To do that let's use the @font-face CSS rule block and use the src CSS property and pass the path to our font file in the url() function like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf");
    }
  </style>
</html>

Now that we have defined the path to our font file, we also need to set the format to woff2 as it is a better-performant and well-supported font format using the format() function right after the url() function.

It can be done like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
    }
  </style>
</html>

Now let's name our custom font using the font-family CSS property and use a custom font name of our choice like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
      font-family: MyCustomFontName;
    }
  </style>
</html>

We have successfully imported our custom font file and given it a name.

Now we need to apply our custom font to all the texts on the webpage, to fo that we can target the body HTML element in the CSS and use the property of font-family and pass the name of the custom font which in our case is the value of MyCustomFontName.

It can be done like this,

<html>
  <body>
    <p>Hello World</p>
  </body>
  <!-- Styles for the webpage -->
  <!--
    Using custom font file using the `@font-face`
    CSS rule and using the `src` css property.
  -->
  <style>
    @font-face {
      src: url("./mycustomfont.ttf") format("woff2");
      font-family: MyCustomFontName;
    }

    body {
      font-family: MyCustomFontName;
    }
  </style>
</html>

Now the text font in our webpage is changed to our custom font.

The webpage now looks like this,

We have successfully loaded our custom font into the webpage using CSS. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.

How to load a font from a url as soon as possible or preload a font in HTML?

MELVIN GEORGE — Mon, 12 Dec 2022 05:36:38 +0000

Originally posted here!
To load a font from a url as soon as the webpage loads is to use the link tag. In the link tag you can use the href attribute where the value should be the url or path to your font file, then the rel attribute with the value of preload. The value preload will instruct the browser to load the fonts as soon as possible. The link tag should be placed inside the head tag of the HTML code.

We also need to add three more attributes like the below:

the type attribute with a value of font/woff2 to specify the type of font we are going to use. The woff2 is a better-performant and well-supported font type among browsers.
the as attribute with a value of font to specify the kind of file we are preloading.
and finally the crossorigin attribute without any value. Using the crossorigin attribute without any value will consider the browser to use the value of anonymous so that request will use the CORS headers and also the credentials flag is set to the value of same-origin which is what we want.

TL;DR

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>

For example, let's say we have a webpage with the text Hello World.

In HTML, it may look like this,

<html>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>

We need to use a font that is hosted at this url: https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap. The font name is Xanh Mono.

To do that we can use the link tag and then add the href attribute with the value of the font url and then use the rel attribute with the value of preload to load the font as soon as the page loads.

It can be done like this,

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>

Let's also supply additional attributes to instruct the details about the font we are preloading from the url. The attributes are:

type with the value of font/woff2
as with the value of font
crossorigin without any value

It can be done like this,

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>

This will preload all the font files and cache them so that we can use the font.

NOTE: The above link tag with font preloading will only load the font and adds it first in the request chain and caches it. We still need to tell the browser we are going to use this font. To know more about it see the next blog on How to use the preloaded fonts in HTML?.

See the above code live in the codesandbox.

That's all 😃.

How to use preloaded fonts in HTML?

MELVIN GEORGE — Mon, 12 Dec 2022 05:36:08 +0000

Originally posted here!
To use the preloaded fonts in HTML, you have to use another link tag and then use the href attribute where the value is the same url you used for preloading the fonts followed by the rel attribute where the value of it should be stylesheet. The new link tag must be after the preloading link tag and should be inside the head tag in the HTML code.

TL;DR

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />

    <!-- Using another `link` tag to use the preloaded font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>

  <!-- Styles for the webpage -->
  <style>
    body {
      font-family: Xanh Mono;
    }
  </style>
</html>

For example, let's say we have a webpage with the text of Hello World where we also have a font preloaded using the link tag like this,

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>

Now we need to use another link tag right after the preloaded link tag. The new link tag should have an attribute of href and the value of it should be the same font url as the preloaded font url followed by the rel attribute having the value of stylesheet.

It can be done like this,

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />

    <!-- Using another `link` tag to use the preloaded font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>
</html>

We have now the font ready to be used, let's apply it to all the texts in the body tag using the font-family CSS property and then using the font's name which is Xanh Mono as its value.

It can be done like this,

<html>
  <head>
    <!--
    Using the `link` tag and then the `rel="preload"` attribute
    to load the font as soon as possible.
  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="preload"
      type="font/woff2"
      as="font"
      crossorigin
    />

    <!-- Using another `link` tag to use the preloaded font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <!-- A simple webpage -->
  <body>
    <p>Hello World</p>
  </body>

  <!-- Styles for the webpage -->
  <style>
    body {
      font-family: Xanh Mono;
    }
  </style>
</html>

We have successfully used our preloaded font in HTML. Yay 🥳.

See the above code live in the codesandbox.

That's all 😃.

How to set the aspect ratio for images using CSS?

MELVIN GEORGE — Mon, 12 Dec 2022 05:35:38 +0000

Originally posted here!
To set the aspect ratio for images in a webpage using CSS, you can use the aspect-ratio property and set a preferred aspect ratio value on the image element selector.

TL;DR

<html>
  <!-- Styles for the webpage -->
  <style>
    img {
      max-inline-size: 30vw;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
  </style>
  <body>
    <article>
      <!-- 
        add a width of 100% to stop the elements on the
        webpage from moving around while the image is being loaded 
      -->
      <img
        width="100%"
        src="https://images.unsplash.com/photo-1667723047494-b19cebb52706?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8UzRNS0xBc0JCNzR8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"
      />
      <p>Photo by Aloha Risha on Unsplash</p>
      <p>
        Billions upon billions of laws of physics culture globular star cluster
        the sky calls to us light years. Encyclopedia Galactica colonies how far
        away a still more glorious dawn awaits are creatures of the cosmos. (I
        mean if you want to read it. Go on. You are reading a random meaningless
        paragraph or are you? :/) Great turbulent clouds with pretty stories for
        which there's little good evidence invent the universe that something
        incredible is waiting to be known emerged into consciousness not a
        sunrise but a galaxy rise. Vastness is bearable only through love
        courage of our questions network of wormholes astonishment emerged into
        consciousness permanence of the stars and billions upon billions upon
        billions upon billions upon billions upon billions upon billions.
      </p>
    </article>
  </body>
</html>

For example, let's say we have a webpage with an image and a paragraph like this,

<html>
  <body>
    <article>
      <img
        src="https://images.unsplash.com/photo-1667723047494-b19cebb52706?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8UzRNS0xBc0JCNzR8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"
      />
      <p>Photo by Aloha Risha on Unsplash</p>
      <p>
        Billions upon billions of laws of physics culture globular star cluster
        the sky calls to us light years. Encyclopedia Galactica colonies how far
        away a still more glorious dawn awaits are creatures of the cosmos. (I
        mean if you want to read it. Go on. You are reading a random meaningless
        paragraph or are you? :/) Great turbulent clouds with pretty stories for
        which there's little good evidence invent the universe that something
        incredible is waiting to be known emerged into consciousness not a
        sunrise but a galaxy rise. Vastness is bearable only through love
        courage of our questions network of wormholes astonishment emerged into
        consciousness permanence of the stars and billions upon billions upon
        billions upon billions upon billions upon billions upon billions.
      </p>
    </article>
  </body>
</html>

Visually the webpage looks like this,

As you can see from the above GIF that the image is not properly sized, to remove that we can use the max-inline-size property (max-inline-size is just like the max-width CSS property since it takes into consideration of the various language writing directions) and use the value of 30vw also can be read as 20 view width on the img tag using the CSS.

It can be done like this,

<html>
  <!-- Styles for the webpage -->
  <style>
    img {
      max-inline-size: 30vw;
    }
  </style>
  <body>
    <article>
      <img
        src="https://images.unsplash.com/photo-1667723047494-b19cebb52706?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8UzRNS0xBc0JCNzR8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"
      />
      <p>Photo by Aloha Risha on Unsplash</p>
      <p>
        Billions upon billions of laws of physics culture globular star cluster
        the sky calls to us light years. Encyclopedia Galactica colonies how far
        away a still more glorious dawn awaits are creatures of the cosmos. (I
        mean if you want to read it. Go on. You are reading a random meaningless
        paragraph or are you? :/) Great turbulent clouds with pretty stories for
        which there's little good evidence invent the universe that something
        incredible is waiting to be known emerged into consciousness not a
        sunrise but a galaxy rise. Vastness is bearable only through love
        courage of our questions network of wormholes astonishment emerged into
        consciousness permanence of the stars and billions upon billions upon
        billions upon billions upon billions upon billions upon billions.
      </p>
    </article>
  </body>
</html>

Now the image is resized to 30vw of the screen width.

We aim to set the aspect ratio of the image to be in the 16:9 value which is the standard value for a widescreen image.

To do that, we can use the aspect-ratio CSS property on the img selector and set its value to 16 / 9.

It can be done like this,

<html>
  <!-- Styles for the webpage -->
  <style>
    img {
      max-inline-size: 30vw;
      aspect-ratio: 16 / 9;
    }
  </style>
  <body>
    <article>
      <img
        src="https://images.unsplash.com/photo-1667723047494-b19cebb52706?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8UzRNS0xBc0JCNzR8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"
      />
      <p>Photo by Aloha Risha on Unsplash</p>
      <p>
        Billions upon billions of laws of physics culture globular star cluster
        the sky calls to us light years. Encyclopedia Galactica colonies how far
        away a still more glorious dawn awaits are creatures of the cosmos. (I
        mean if you want to read it. Go on. You are reading a random meaningless
        paragraph or are you? :/) Great turbulent clouds with pretty stories for
        which there's little good evidence invent the universe that something
        incredible is waiting to be known emerged into consciousness not a
        sunrise but a galaxy rise. Vastness is bearable only through love
        courage of our questions network of wormholes astonishment emerged into
        consciousness permanence of the stars and billions upon billions upon
        billions upon billions upon billions upon billions upon billions.
      </p>
    </article>
  </body>
</html>

After setting the aspect ratio, the webpage now looks like this,

As soon as we set the aspect ratio of 16/9 for the image, it got squeezed to take the aspect ratio we defined.

To remove this problem we can use the object-fit CSS property and use a value of cover or contain.

the cover value on the object-fit property will crop the image to take up the entire aspect ratio dimension.
the contain value on the object-fit property will resize the image into the aspect ratio dimension but it will not crop the image.

Let's use the value of cover on the object-fit CSS property on the img selector.

It can be done like this,

<html>
  <!-- Styles for the webpage -->
  <style>
    img {
      max-inline-size: 30vw;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
  </style>
  <body>
    <article>
      <img
        src="https://images.unsplash.com/photo-1667723047494-b19cebb52706?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8UzRNS0xBc0JCNzR8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"
      />
      <p>Photo by Aloha Risha on Unsplash</p>
      <p>
        Billions upon billions of laws of physics culture globular star cluster
        the sky calls to us light years. Encyclopedia Galactica colonies how far
        away a still more glorious dawn awaits are creatures of the cosmos. (I
        mean if you want to read it. Go on. You are reading a random meaningless
        paragraph or are you? :/) Great turbulent clouds with pretty stories for
        which there's little good evidence invent the universe that something
        incredible is waiting to be known emerged into consciousness not a
        sunrise but a galaxy rise. Vastness is bearable only through love
        courage of our questions network of wormholes astonishment emerged into
        consciousness permanence of the stars and billions upon billions upon
        billions upon billions upon billions upon billions upon billions.
      </p>
    </article>
  </body>
</html>

The webpage now looks like this,

Now the image is cropped to take up the entire dimension of the aspect ratio we provided which is the 16:9 (widescreen mode dimension).

Now there is one more problem I would like to show you, which is the moving of text contents or the elements on the webpage while the image is loading. This will be a bad user experience if the user has a slow network connection.

See the below GIF to see the problem,

To avoid this problem, all we have to do this set the width attribute on the img HTML tag to have the value of 100%.

It can be done like this,

<html>
  <!-- Styles for the webpage -->
  <style>
    img {
      max-inline-size: 30vw;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
  </style>
  <body>
    <article>
      <!-- 
        add a width of 100% to stop the elements on the
        webpage from moving around while the image is being loaded 
      -->
      <img
        width="100%"
        src="https://images.unsplash.com/photo-1667723047494-b19cebb52706?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8UzRNS0xBc0JCNzR8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60"
      />
      <p>Photo by Aloha Risha on Unsplash</p>
      <p>
        Billions upon billions of laws of physics culture globular star cluster
        the sky calls to us light years. Encyclopedia Galactica colonies how far
        away a still more glorious dawn awaits are creatures of the cosmos. (I
        mean if you want to read it. Go on. You are reading a random meaningless
        paragraph or are you? :/) Great turbulent clouds with pretty stories for
        which there's little good evidence invent the universe that something
        incredible is waiting to be known emerged into consciousness not a
        sunrise but a galaxy rise. Vastness is bearable only through love
        courage of our questions network of wormholes astonishment emerged into
        consciousness permanence of the stars and billions upon billions upon
        billions upon billions upon billions upon billions upon billions.
      </p>
    </article>
  </body>
</html>

We have successfully set an aspect ratio for the image using CSS. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.

How to fetch an image on priority using HTML?

MELVIN GEORGE — Mon, 12 Dec 2022 05:35:09 +0000

Originally posted here!
To fetch an image on priority on a webpage using HTML, you can use the link HTML tag and use the attribute of rel with the value of prefetch which instructs the browser that the image needed to be downloaded on priority, then the href attribute with the value of the image's url and finally the as attribute having the value of image to define the type of the asset you are prefetching.

The link tag should be placed inside the head tag of the HTML code.

TL;DR

<html>
  <!-- 
    The `link` tag for prefetching the image
    should be inside the `head` tag 
  -->
  <link
    rel="prefetch"
    href="https://images.unsplash.com/photo-1667584412550-95241626c80a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    as="image"
  />

  <!-- Basic style for the image to make it responsive -->
  <style>
    img {
      max-inline-size: 20vw;
      block-size: auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }
  </style>
  <body>
    <img
      width="100%"
      src="https://images.unsplash.com/photo-1667584412550-95241626c80a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    />
    <p>Photo by Nico Knaack on Unsplash</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quis
      sequi placeat quisquam doloremque dignissimos qui, asperiores maiores nam,
      repudiandae, recusandae distinctio libero odio nesciunt quidem repellat
      laudantium quo error itaque! Placeat corporis inventore saepe quae non
      sunt fugit omnis, architecto quibusdam incidunt ex voluptatum et itaque
      alias, nisi dolores molestias aliquam officia fuga aut nulla perferendis.
      Ea sapiente corrupti minima eum harum, voluptatibus molestiae.
    </p>
  </body>
</html>

NOTE: Only use the prefetching of images using the link tag if the image is of vital importance. Since prefetching, an image using the link tag will stop all the other prefetches like the prefetching of scripts, fonts, etc.

For example, let's say we have a webpage with some text and an image.

The HTML code would look something like this,

<html>
  <style>
    img {
      max-inline-size: 20vw;
      block-size: auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }
  </style>
  <body>
    <img
      width="100%"
      src="https://images.unsplash.com/photo-1667584412550-95241626c80a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    />
    <p>Photo by Nico Knaack on Unsplash</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quis
      sequi placeat quisquam doloremque dignissimos qui, asperiores maiores nam,
      repudiandae, recusandae distinctio libero odio nesciunt quidem repellat
      laudantium quo error itaque! Placeat corporis inventore saepe quae non
      sunt fugit omnis, architecto quibusdam incidunt ex voluptatum et itaque
      alias, nisi dolores molestias aliquam officia fuga aut nulla perferendis.
      Ea sapiente corrupti minima eum harum, voluptatibus molestiae.
    </p>
  </body>
</html>

As you can see from the above code we have an img tag where the src attribute has the value of the image location. We have also added some basic style to the image to make it responsive to the screen to make it nicer to look at.

The webpage would look like this,

We aim to prefetch the same image and cache it in our browser, to do that we have to use the link tag then use the rel attribute with the value of prefetch, then the href attribute with the value of the image url which in our case is the https://images.unsplash.com/photo-1667584412550-95241626c80a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80 url and finally using the as attribute having the value of image to set the type of the asset we are prefetching.

It can be done like this,

<html>
  <!-- 
    The `link` tag for prefetching the image
    should be inside the `head` tag 
  -->
  <link
    rel="prefetch"
    href="https://images.unsplash.com/photo-1667584412550-95241626c80a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    as="image"
  />

  <!-- Basic style for the image to make it responsive -->
  <style>
    img {
      max-inline-size: 20vw;
      block-size: auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }
  </style>
  <body>
    <img
      width="100%"
      src="https://images.unsplash.com/photo-1667584412550-95241626c80a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
    />
    <p>Photo by Nico Knaack on Unsplash</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quis
      sequi placeat quisquam doloremque dignissimos qui, asperiores maiores nam,
      repudiandae, recusandae distinctio libero odio nesciunt quidem repellat
      laudantium quo error itaque! Placeat corporis inventore saepe quae non
      sunt fugit omnis, architecto quibusdam incidunt ex voluptatum et itaque
      alias, nisi dolores molestias aliquam officia fuga aut nulla perferendis.
      Ea sapiente corrupti minima eum harum, voluptatibus molestiae.
    </p>
  </body>
</html>

Now the image will be prefetched before all other scripts, font files, etc., and will be cached by the browser for later use.

We have successfully fetched an image on priority using the HTML. Yay 🥳!

See the above code live in the codesandbox.

That's all 😃.

How to parallelly process or decode the image to improve webpage performance?

MELVIN GEORGE — Mon, 12 Dec 2022 05:33:04 +0000

Originally posted here!
To parallelly process or decode the image to improve webpage performance, you can use the decoding attribute with the value of async on the HTML img tag.

Using the value of async on the decoding attribute will still download the images but the image's process will be done parallelly and thus the browser can resume the processes for other kinds of data such as the texts on the webpage. This will eliminate blocking the browser rendering and improve the perceived performance of the website.

NOTE: To know more about lazily loading the images as the user scrolls the webpage, see the blog on How to lazy load images in websites the easy way?

TL;DR

<html>
  <!-- Basic styles for image -->
  <style>
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <!-- 
      Add the `decoding` attribute with the value of `async`
      to parallelly process or decode the image file.
    -->
    <img
      decoding="async"
      src="https://images.unsplash.com/photo-1666797630713-f5a2e54d3d23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
    />
    <p>Photo by Dimitry Anikin on Unsplash</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
      expedita iusto cupiditate incidunt aliquid deserunt aut accusamus cum
      dignissimos dolore aliquam ullam rerum aperiam alias tenetur saepe
      laboriosam, tempora et illum voluptatum a! Adipisci, sapiente! Fuga ex
      esse magni, non labore architecto iusto? Sequi saepe, laboriosam
      reiciendis nisi vero aut eveniet amet labore voluptas ullam perspiciatis.
      Voluptate, sit veritatis explicabo ullam praesentium beatae saepe aperiam?
    </p>
  </body>
</html>

For example, let's say we have a webpage with an image and a random paragraph like this,

<html>
  <!-- Basic styles for image -->
  <style>
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <img
      src="https://images.unsplash.com/photo-1666797630713-f5a2e54d3d23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
    />
    <p>Photo by Dimitry Anikin on Unsplash</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
      expedita iusto cupiditate incidunt aliquid deserunt aut accusamus cum
      dignissimos dolore aliquam ullam rerum aperiam alias tenetur saepe
      laboriosam, tempora et illum voluptatum a! Adipisci, sapiente! Fuga ex
      esse magni, non labore architecto iusto? Sequi saepe, laboriosam
      reiciendis nisi vero aut eveniet amet labore voluptas ullam perspiciatis.
      Voluptate, sit veritatis explicabo ullam praesentium beatae saepe aperiam?
    </p>
  </body>
</html>

As you can see from the above code we have given some basic styles to the image to make it responsive to the screen.

Now let's add the decoding attribute and use the value of async to the img HTML tag to instruct the browser to parallelly process or decode the image file.

It can be done like this,

<html>
  <!-- Basic styles for image -->
  <style>
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <!-- 
      Add the `decoding` attribute with the value of `async`
      to parallelly process or decode the image file.
    -->
    <img
      decoding="async"
      src="https://images.unsplash.com/photo-1666797630713-f5a2e54d3d23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
    />
    <p>Photo by Dimitry Anikin on Unsplash</p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
      expedita iusto cupiditate incidunt aliquid deserunt aut accusamus cum
      dignissimos dolore aliquam ullam rerum aperiam alias tenetur saepe
      laboriosam, tempora et illum voluptatum a! Adipisci, sapiente! Fuga ex
      esse magni, non labore architecto iusto? Sequi saepe, laboriosam
      reiciendis nisi vero aut eveniet amet labore voluptas ullam perspiciatis.
      Voluptate, sit veritatis explicabo ullam praesentium beatae saepe aperiam?
    </p>
  </body>
</html>

We have successfully decoded the image file parallelly and improved the webpage performance.

See the above code live in the codesandbox.

That's all 😃.

How to load images of different sizes on different screen widths using HTML?

MELVIN GEORGE — Mon, 12 Dec 2022 05:32:34 +0000

Originally posted here!
To load images of different sizes on different screen widths or sizes using HTML, you can use the srcset attribute on the img HTML tag and the value should be the url of the image followed by a whitespace and the original width of the image. The width should end with the unit of w (1w means 1px). If you have more image sizes then the , symbol (comma) should be used to separate the values (image url and its original width).

The srcset should be used along with the src attribute. According to the user's device width, the browser will automatically choose the image url from the srcset attribute values and replace it with the default value on the src attribute.

Why is this used?

Sometimes on smaller screen devices, downloading a big image is not needed and will also be affecting the network bandwidth of the device which in turn affects the performance of our website on smaller devices. To compact this problem the srcset attribute is introduced in the img HTML tag.

TL;DR

<html>
  <style>
    /* Basic styles for image */
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <!-- 
      using the `srcset` attribute on the `img` HTML tag to set
      different image URLs and the image widths to be chosen
      automatically by the browser according to the user's device-width  
    -->
    <img
      src="/01_small.jpeg"
      srcset="/01_small.jpeg 640w, /02_medium.jpeg 1920w, /03_large.jpeg 2400w"
    />
    <p>Photo by Neha Maheen Mahfin on Unsplash</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam
      aspernatur totam consequatur labore? Vitae voluptas pariatur quos
      repellendus aliquam at magni asperiores nostrum, atque a vero odio. Odit
      dolores quae voluptas enim error quas, architecto minus voluptates. Illum,
      alias molestias ipsam quo accusantium magnam modi eveniet fugit
      perferendis officia dolor nemo eos dignissimos in ipsum neque autem
      voluptas obcaecati. Reiciendis doloremque sed et quo.
    </p>
  </body>
</html>

For example, let's say we have a webpage with an image tag (img) and a random paragraph (p) like this,

<html>
  <style>
    /* Basic styles for image */
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <img src="/01_small.jpeg" />
    <p>Photo by Neha Maheen Mahfin on Unsplash</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam
      aspernatur totam consequatur labore? Vitae voluptas pariatur quos
      repellendus aliquam at magni asperiores nostrum, atque a vero odio. Odit
      dolores quae voluptas enim error quas, architecto minus voluptates. Illum,
      alias molestias ipsam quo accusantium magnam modi eveniet fugit
      perferendis officia dolor nemo eos dignissimos in ipsum neque autem
      voluptas obcaecati. Reiciendis doloremque sed et quo.
    </p>
  </body>
</html>

The webpage now looks like this,

As you can see from the above code that in the img HTML tag, we have used the src tag and given an image url as the value. Currently, the browser downloads this image on every screen size.

Now let's introduce the srcset attribute on the img tag and use different image URLs for different screen widths.

These are the image URLs and their original widths which we are going to set as the values of the srcset attribute:

for the image url 01_small.jpeg it has an original width of 640w
for the image url 02_medium.jpeg it has an original width of 1920w
for the image url 03_large.jpeg it has an original width of 2400w

The values for the srcset attribute should be in the format where the image url is first followed by a whitespace and then the original width of the image with the unit of w. Since we have three image URLs, we have to separate them using the , symbol (comma).

It can be done like this,

<html>
  <style>
    /* Basic styles for image */
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <!-- 
      using the `srcset` attribute on the `img` HTML tag to set
      different image URLs and the image widths to be chosen
      automatically by the browser according to the user's device-width  
    -->
    <img
      src="/01_small.jpeg"
      srcset="/01_small.jpeg 640w, /02_medium.jpeg 1920w, /03_large.jpeg 2400w"
    />
    <p>Photo by Neha Maheen Mahfin on Unsplash</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam
      aspernatur totam consequatur labore? Vitae voluptas pariatur quos
      repellendus aliquam at magni asperiores nostrum, atque a vero odio. Odit
      dolores quae voluptas enim error quas, architecto minus voluptates. Illum,
      alias molestias ipsam quo accusantium magnam modi eveniet fugit
      perferendis officia dolor nemo eos dignissimos in ipsum neque autem
      voluptas obcaecati. Reiciendis doloremque sed et quo.
    </p>
  </body>
</html>

Now let's check the Devtools (if you are in chrome, you can right-click on the webpage, and select the Inspect option) and go to the Network tab to see which size is getting downloaded for each screen size.

Screen size of `1440px`

Screen size of `1000px`

Screen size of `500px`

This will help a lot in improving the performance of the webpage.

We have successfully loaded different image sizes on different screen sizes or widths using HTML. Yay 🥳.

See the above code live in the codesandbox.

That's all 😃.

DEV Community: MELVIN GEORGE

Use margin-inline-start CSS property instead of margin-left for better internationalization

TL;DR

Use margin-inline-end CSS property instead of margin-right for better internationalization support

TL;DR

How to make HTML elements in horizontal order that is responsive to the screens using CSS?

How to make font size grow according to the size of the screen using CSS?

TL;DR

How to limit the number of characters on a single line in a webpage using CSS?

TL;DR

How to load custom fonts into a webpage using CSS?

TL;DR

How to load a font from a url as soon as possible or preload a font in HTML?

TL;DR

How to use preloaded fonts in HTML?

TL;DR

How to set the aspect ratio for images using CSS?

TL;DR

How to fetch an image on priority using HTML?

TL;DR

How to parallelly process or decode the image to improve webpage performance?

TL;DR

How to load images of different sizes on different screen widths using HTML?

Why is this used?

TL;DR

Screen size of 1440px

Screen size of 1000px

Screen size of 500px

Screen size of `1440px`

Screen size of `1000px`

Screen size of `500px`