CodeGym /Courses /Frontend SELF EN /Responsive Images

Responsive Images

Frontend SELF EN

Level 25 , Lesson 4

Available

5.1 The srcset Attribute

Responsive images are super important when you want to make web pages that are both speedy and look great no matter the device. They're all about loading different sizes and resolutions of images based on what device you're using and how you're viewing it, boosting both performance and user-friendliness. The main tools in HTML for responsive images are the srcset and sizes attributes.

The srcset attribute is used to specify a bunch of image sources with different sizes or resolutions. The browser picks the most suitable one depending on the user's device.

Syntax:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">

Where:

src: specifies the default image path
srcset: contains a list of images and their properties separated by commas
1x, 2x: indicate the scale factor (like 1x for standard resolution and 2x for high pixel density devices)

Example of using srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Example of using srcset</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Example of responsive image">
        </body>
      </html>

Code Explanation:

src="images/default.jpg": specifies the default image
srcset: lists images with their widths in pixels (480w, 800w, 1200w). The browser picks the best fitting image based on the viewport width

5.2 The sizes Attribute

The sizes attribute is used along with srcset to specify the width of an image under different display conditions. This lets the browser choose the right image with more precision.

Syntax:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Example Image">

Where:

sizes: contains a list of display conditions and the corresponding image widths
(max-width: 600px) 480px: if the viewport width is less than or equal to 600px, use the image with a width of 480px
800px: in all other cases, use the image with a width of 800px

Example of using sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Example of using sizes</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Example of responsive image">
        </body>
      </html>

Code Explanation:

sizes defines the image width for different display conditions:

If the viewport width is less than or equal to 600px, use the image with a width of 480px
If the viewport width is less than or equal to 900px, use the image with a width of 800px
In all other cases, use the image with a width of 1200px

5.3 Responsive Images

Responsive Image for Different Screen Sizes

Let's create an example where the image adapts to different screen sizes using the srcset and sizes attributes.

Example:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Responsive Image</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Example of responsive image">
        </body>
      </html>

Code Explanation:

src="images/default.jpg": specifies the default image
srcset: defines three versions of the image with different widths (480w, 800w, 1200w)
sizes: sets the image width for different conditions:
- up to 600px — use the image with a width of 480px
- up to 900px — use the image with a width of 800px
- more than 900px — use the image with a width of 1200px
.responsive-img: a CSS class that sets the image width to 100% and automatic height, so it takes up available space and maintains proportions

Previous Previous lesson

Next Next lesson

Comments

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION