Optimizing Media and Performance

Page speed is crucial for user experience and SEO. HTML5 provides several attributes and elements to help browsers load the correct resources efficiently based on the user’s device, viewport, and network conditions.

1. Responsive Images with srcset and <picture>

The traditional <img> tag struggles with responsiveness because it only supports a single image source. HTML5 introduced mechanisms to let the browser choose the best image file to download.

A. The srcset Attribute (Resolution Switching)

The srcset attribute, used on the <img> tag, provides a list of multiple image files along with their intrinsic width or pixel density. The browser then chooses the most appropriate image based on the device’s screen size and resolution.

• Pixel Density Descriptor (x): Used for high-resolution displays (Retina, 4k).
• Width Descriptor (w): Used for choosing different image sizes based on the viewport width (requires the sizes attribute).

<img src="small.jpg" 
     alt="A landscape view"
     srcset="small.jpg 500w, 
             medium.jpg 1000w, 
             large.jpg 2000w"
     sizes="(max-width: 600px) 500px, 
            100vw">

B. The <picture> Element (Art Direction)

The <picture> element is used when you need art direction—that is, displaying different crops or compositions of an image based on specific criteria (like orientation or screen size).

• It acts as a container for multiple <source> elements and one required fallback <img> tag.
• The <source> tag uses the media attribute (similar to CSS media queries) to define when the image should be used.

<picture>
    <source media="(min-width: 800px)" srcset="wide_crop.jpg">
    
    <source media="(min-width: 450px)" srcset="tall_crop.jpg">

    <img src="default.jpg" alt="A default image crop.">
</picture>

2. Lazy Loading (loading="lazy")

By default, the browser tries to download every image on a page as soon as it encounters the tag, even if the image is far down the page (outside the viewport). This delays the rendering of content that is immediately visible.

The loading attribute tells the browser how to load the resource:

• loading="lazy": The browser will defer loading the image or iframe until the user scrolls near its location. This significantly improves initial page load time.
• loading="eager": (Default) The resource is loaded immediately.

<img src="ad.jpg" alt="Advertisement" loading="lazy">

3. Asynchronous JavaScript Loading

While technically a JavaScript performance technique, the attributes used are placed on the HTML <script> tag:

• defer: Tells the browser to download the script file in the background without blocking the initial HTML parsing. The script executes only after the entire HTML document is parsed. (Best for scripts that rely on the fully loaded DOM).
• async: Tells the browser to download the script file asynchronously. The script executes immediately as soon as it finishes downloading, potentially before the HTML document is fully parsed. (Best for independent scripts like analytics or ads).

<script src="app.js" defer></script> 

<script src="analytics.js" async></script>