Belajar HTML Untuk Pemula: Mengatur Ukuran Gambar Secara Otomatis Tag Picture dan Source

Summary

This tutorial demonstrates how to use the HTML <picture> and <source> tags to create responsive images that adapt to different screen sizes, such as smartphones, tablets, and desktops. It covers the process of preparing various image sizes for each screen type, writing the appropriate HTML and CSS code, and testing the responsiveness using browser developer tools. The tutorial ensures viewers can create images that load optimally for different devices, improving user experience and web performance.

Takeaways

• 😀 The `<picture>` tag allows you to provide multiple versions of an image for different screen sizes.
• 😀 The `<source>` tag inside the `<picture>` tag defines various image versions based on conditions like screen width.
• 😀 The `media` attribute in the `<source>` tag helps define which image to display depending on the maximum screen width.
• 😀 Responsive images can be achieved by specifying different image sizes for smartphones, tablets, and desktops.
• 😀 For screens with a width of 500px or less, a smaller image (e.g., `cofe_small.png`) is displayed.
• 😀 For screens between 501px and 850px wide, a medium-sized image (e.g., `cofe_medium.png`) is displayed.
• 😀 For screens wider than 850px, a larger image (e.g., `cofe_big.png`) is displayed.
• 😀 The `<img>` tag serves as a fallback for browsers that don't support the `<picture>` tag.
• 😀 The `srcset` attribute in the `<source>` tag determines the image location based on the device's screen size.
• 😀 Testing responsiveness is important and can be done easily by resizing the browser window or using the 'Inspect' tool.
• 😀 The use of the `<picture>` and `<source>` tags ensures optimized loading of images for different devices, improving page performance.

Q & A

What is the purpose of the <picture> tag in HTML?

The <picture> tag allows you to provide different versions of an image based on the screen size. This enables the display of responsive images that adjust according to the device's screen size, such as smartphones, tablets, laptops, and desktops.

How does the <source> tag work within the <picture> tag?

The <source> tag is used within the <picture> tag to define various image versions for different screen sizes. It specifies the image's location and its conditions, such as the maximum screen width, under which the image should be displayed.

What is the role of the 'srcset' attribute in the <source> tag?

'srcset' in the <source> tag defines the image file location. It helps the browser choose the appropriate image based on the specified conditions, such as screen width or resolution.

What is the significance of the 'media' attribute in the <source> tag?

The 'media' attribute in the <source> tag specifies conditions under which a particular image should be displayed. For example, it can define maximum screen width, and the image will only be shown if the screen size matches those criteria.

How does the 'max-width' value in the 'media' attribute affect image selection?

The 'max-width' value in the 'media' attribute sets a maximum screen width for which the image will be shown. For example, if the screen width is 500px or less, a smaller image will be displayed.

What should be done to make images responsive in HTML using the <picture> and <source> tags?

To make images responsive, you need to use the <picture> tag combined with <source> tags for different image sizes. Each <source> tag should have the 'srcset' and 'media' attributes to specify image file locations and conditions for displaying each image based on screen size.

Why is it important to include an 'alt' attribute in the <img> tag?

The 'alt' attribute in the <img> tag provides an alternative text description of the image. This text appears when the image cannot be displayed and improves accessibility for users with visual impairments.

What is the significance of using '100%' for the image's width in a responsive design?

'100%' width for images ensures that the image takes up the full width of its container, adjusting dynamically with the size of the browser or screen, making the image responsive.

How can you test if an image is responsive in a web browser?

To test if an image is responsive, you can resize the browser window and observe if the image changes according to the screen size. You can also use developer tools (Inspect Element) in the browser to simulate different screen sizes.

What images are used for smartphones, tablets, and desktops in this tutorial?

In the tutorial, three different image sizes are used: a large image (850px by 450px) for desktops and laptops, a medium-sized image (500px by 400px) for tablets, and a small image (350px by 300px) for smartphones.