Web Dev: The Power of the img Tag

With modern CSS, it has never been easier to add images to a web page. From a simple background image to a parallax divider, default CSS can handle quite a bit when it comes to including and styling images. This is especially true when working with responsive designs, where developers are tempted to switch between images using media queries.

With the rise of modern CSS, developers tend to overlook advancements made to HTML. For example, the <img> tag itself can handle all the features available in CSS, with additional optimizations that CSS cannot match.

The most commonly used properties of the <img> tag are src, used to set the image itself, height and width, used to set image sizes, and alt, used to describe the image for accessibility. Some overlooked properties of the <img> tag are loading, sizes, and srcset, which can all be used to optimize loading times on a web page.

Let’s start with loading=”lazy”, which tells the browser to not load specific resources until they are needed. For example, an image in the footer does not need to be loaded until the user scrolls to the bottom of the page.  Additional details about this tag can be found here.

Other important tags are sizes and srcset, which allow you to switch between different images and resolutions depending on the screen size. For example, the following tag displays a 900px banner image by default but switches to a 600px version if the user's screen is under 899px wide.

A more in-depth explanation of these rules can be found here.

In summary, don’t be so quick to use CSS for everything. Always brush up on the latest options for HTML as well, as new features have grown as quick as they have with CSS.