What are all the differences between src and data-src attributes?
The src attribute is your go-to for immediate loading of resources (like images) in an HTML document: <img src="image.jpg"> will display the image as soon as the page loads.
On the other hand, data-src is a placeholder for resource URLs, indicating that these should not be loaded right away, but instead according to a specific conditional trigger -- frequently seen in lazy loading patterns: in <img data-src="image.jpg">, the image file won’t be loaded until JavaScript swaps data-src with src upon a particular event, for instance, when the image becomes visible on the viewport.
src: the standard attribute
The src attribute is the heart of incorporating external resources (like images, scripts, and videos) into an HTML document. It is universally supported across all browsers and is essential for hassle-free display of media. If your web content needs to be immediately available upon page load, then src is your attribute of choice.
data-src: the lazy-loading attribute
data-src is your buddy for efficiency and performance. It tells the browser to hold on to the URL of a media resource and wait for a signal before it proceeds with loading. This attribute becomes handy when you need to implement lazy loading: on-demand loading of resources, typically triggered when the resource enters the viewport. Both custom scripts and lazy loading libraries use data-src to help you finesse resource loading according to the preferences of your web page, thus positively impacting the page load times.
User experience at the center
Lazy loading with data-src, apart from optimizing the use of resources, significantly improves user experience. especially on mobile devices where network conditions and device capabilities can vary widely. Defer loading of off-screen content, often heavy media files, can boost your webpage performance and make scrolling smoother for your visitors.
Smart resource loading
The IntersectionObserver API is your JavaScript partner for smart resource management. This API keeps a check on whether resources are in the viewport, and when they do enter, it triggers an event that replaces data-src with src, hereby prompting the resource to load. This feature is not only resource-friendly, as it saves bandwidth and computation for initially off-screen resources, but also highly user-centric, prioritizing the immediate loading of on-screen content.
Best practices with src and data-src
Priority loading
While data-src is a strategic selection for non-critical assets that can be deferred, src should be your selection for essential media assets that need to be loaded promptly. Preloading these resources ensures that your essential media is readily available as soon as required and minimizes the latency that may occur with deferring the loading of these resources.
Catering to all browsers
Although both src and data-src are well-supported by modern browsers, it's always a good idea to put in place fallback mechanisms for handling situations where lazy loading or the data-src attribute might not be natively supported.
Leveraging libraries
Libraries like lazysizes can be a massive aid in implementing lazy loading and have added benefits, including the automatic adjustment of the loading strategy considering network conditions and browser capabilities. With lazysizes, data-src can be even more potent and versatile.
Technical nuances
Value fetching
Browsers can obtain the data-src attribute values using the JavaScript getAttribute method or the dataset property of an element. These methods enable developers to dynamically write the image source to the src attribute and initiate the loading of the image.
HTML5 compatibility
Both src and data-src are in line with the HTML5 Content Model, making them valid for developers to use depending on their resource loading strategy and performance optimization needs.
Was this article helpful?