How to use WebP images in HTML with picture tag and fallback

Why does responsive image loading still raise questions?

When building web pages, one of the biggest challenges is balancing high visual quality with loading speed. In the past, adding an image required just a simple tag in the code, but today devices range from modest smartphones with compact screens to giant, high-definition monitors. Furthermore, new file formats have emerged to save internet bandwidth, such as WebP, which delivers much lighter images than traditional PNG or JPEG.

The problem is that not all internet browsers understand these modern technologies, especially on older devices or outdated systems. This is precisely where we need to demystify responsive media loading and understand how to serve the right file to each visitor. In practice, this means we cannot simply abandon older formats overnight, risking leaving part of the audience with broken pages.

What is the picture tag and how does it work under the hood?

The <picture> tag is an HTML element that acts as an intelligent container. Unlike the common <img> tag, which points to just one fixed file, the <picture> block allows you to group multiple image options and conditional rules. Think of it as an efficient receptionist who looks at a visitor's device and quickly decides the best file option to display on screen.

Inside this container, we use secondary tags called <source>, where we specify modern formats and screen size conditions. For instance, we can indicate that modern browsers should download an optimized image produced as we explored in how to convert and optimize WebP images on Linux via terminal. If the user's browser cannot read that specific format, the system simply ignores the rule and falls back to the default image hidden at the end of the block.

How to structure HTML code with WebP and secure fallback

To put theory into practice, we need to set up a clean and semantic structure in the page code. The fallback concept we mentioned earlier is simply a safety net: if the browser does not support the modern format, it automatically fetches a universal file like JPG. Let's see how this structure behaves in daily frontend development.

<picture> <source srcset='image.webp' type='image/webp'> <img src='image.jpg' alt='Detailed image description for accessibility' loading='lazy'> </picture>

In this example, the browser reads the code from top to bottom. It checks whether it accepts the image/webp type and, if positive, loads the WebP file. Otherwise, the browser skips that line and renders the JPEG image defined in the traditional <img> tag, ensuring full compatibility without extra friction.

Serving different screen sizes with the same tag

Beyond swapping file formats to save data, the <picture> tag shines when we need to deliver different crops of the same image according to the user's screen size. On a smartphone, a horizontal photo with many tiny details might become completely unreadable because the screen is too small. In these scenarios, we can supply a vertical, cropped version exclusively for mobile devices.

To achieve this, we use the media attribute inside the <source> tag, applying rules similar to CSS stylesheets. This prevents a mobile browser from unnecessarily downloading a heavy desktop image that would just be forced down in size on screen. In practice, we optimize both bandwidth and overall page performance on unstable mobile networks.

Common mistakes when implementing responsive images

One of the most frequent stumbles for beginners using this approach is forgetting to include the <img> tag at the end of the <picture> block. Without it, the image simply will not appear in any browser, because the <img> tag is what actually renders the visual space on screen. The <picture> element acts solely as a rule distributor, while the inner element does the heavy lifting.

Another common mistake is neglecting essential accessibility attributes, such as alternative text (alt). Since the <img> tag is placed at the end, that is where we must put the textual description for screen readers used by visually impaired people. Ignoring this detail harms digital inclusion and hurts search engine rankings. To complement this implementation in production environments, see our related technical analyses on How to test ceramic capacitors with a digital multimeter and Node.js breaking? How to clear npm cache and fix errors.

Final thoughts on visual performance

The conscious use of modern images combined with the <picture> tag represents a massive leap in the technical quality of any web project. Reducing file sizes improves response times, decreases user mobile data consumption, and pleases search engine algorithms that prioritize fast pages. By mastering this technique, you ensure professional delivery, backward compatibility, and readiness for the future of the web.